opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update colours in markup

Browse source
This commit is contained in:
Oliver Davies 2019-03-10 09:04:53 +00:00
parent 989085fac4
commit fc04267074
18 changed files with 98 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Rebuilding Acquia</title> <title>Rebuilding Acquia</title>
</head> </head>
<body class="antialiased bg-grey-lighter font-sans min-h-full flex flex-col flex-1"> <body class="antialiased bg-grey-2 font-sans min-h-full flex flex-col flex-1">
<noscript> <noscript>
<strong>We're sorry but rebuilding-acquia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but rebuilding-acquia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

12
src/App.vue
View file

@ -18,29 +18,29 @@ h2 {
} }
.btn { .btn {
@apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-dark; @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-3;
&:hover, &:hover,
&:focus { &:focus {
@apply bg-blue-darker @apply bg-blue-4
} }
} }
.btn.is-secondary { .btn.is-secondary {
@apply bg-grey-dark; @apply bg-grey-5;
&:hover, &:hover,
&:focus { &:focus {
@apply bg-grey-darker @apply bg-grey-6
} }
} }
.tag { .tag {
@apply text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2 mb-2 @apply text-2xs uppercase py-1 px-2 rounded border border-grey-4 bg-white mr-2 mb-2
} }
.tag.is-type { .tag.is-type {
@apply bg-blue-light border-blue-light text-white @apply bg-blue-1 border-blue-1 text-white
} }
@tailwind utilities; @tailwind utilities;

12
src/components/Application/ApplicationCard.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<div> <div>
<div v-if="display == 'grid'" class="bg-white p-4 border-grey rounded border flex-1"> <div v-if="display == 'grid'" class="bg-white p-4 border-grey-4 rounded border flex-1">
<div class="flex h-full"> <div class="flex h-full">
<div class="flex-1 w-5/6 flex flex-col justify-between"> <div class="flex-1 w-5/6 flex flex-col justify-between">
<div> <div>
<div> <div>
<router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-dark no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link> <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link>
</div> </div>
<div class="truncate text-blue-dark"> <div class="truncate text-blue-3">
<a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a> <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a>
</div> </div>
</div> </div>
@ -22,18 +22,18 @@
</div> </div>
</div> </div>
<div v-if="display == 'list'" class="bg-white p-3 border-grey border-b"> <div v-if="display == 'list'" class="bg-white p-3 border-grey-4 border-b">
<div class="-mx-2"> <div class="-mx-2">
<div class="flex flex-row-reverse items-center justify-between"> <div class="flex flex-row-reverse items-center justify-between">
<div class="flex flex-1 justify-between items-center -mx-2"> <div class="flex flex-1 justify-between items-center -mx-2">
<div class="flex-1 px-2"> <div class="flex-1 px-2">
<router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-dark no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link> <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
</div> </div>
<application-tags :type="application.type" :level="application.level" class="w-1/4 px-2"></application-tags> <application-tags :type="application.type" :level="application.level" class="w-1/4 px-2"></application-tags>
<div class="w-2/5 px-2"> <div class="w-2/5 px-2">
<a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a> <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
</div> </div>
</div> </div>

6
src/components/Application/ApplicationDisplaySwitcher.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<div class="bg-grey-lightest rounded overflow-hidden"> <div class="bg-grey-1 rounded overflow-hidden">
<button type="button" class="p-2 focus:outline-none focus:bg-blue-dark focus:text-white" :class="[mode == 'grid' ? 'bg-blue-light text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')"> <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
<svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__grid"></use></svg> <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__grid"></use></svg>
<span class="visuallyhidden">Grid</span> <span class="visuallyhidden">Grid</span>
</button> </button>
<button type="button" class="p-2 focus:outline-none focus:bg-blue-dark focus:text-white" :class="[mode == 'list' ? 'bg-blue-light text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')"> <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'list' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
<svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__list"></use></svg> <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__list"></use></svg>
<span class="visuallyhidden">List</span> <span class="visuallyhidden">List</span>
</button> </button>

2
src/components/Application/StarToggle.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']"> <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-1 hover:text-orange-2 focus:text-orange-2' : 'text-grey-4 focus:text-orange-2 hover:text-orange-1']">
<span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span> <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
<svg class="h-6 w-6 fill-current -mr-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg> <svg class="h-6 w-6 fill-current -mr-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
</button> </button>

58
src/components/Environment/ActionCards.vue
View file

@ -1,21 +1,21 @@
<template> <template>
<div> <div>
<ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5"> <ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'code'">Code</button></li> <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'code'">Code</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'databases'">Databases</button></li> <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'databases'">Databases</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'files'">Files</button></li> <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'files'">Files</button></li>
</ul> </ul>
<div class="flex flex-wrap -mx-4 -mb-4"> <div class="flex flex-wrap -mx-4 -mb-4">
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey"> <div class="border-b border-grey-4">
<div class="px-3 py-4"> <div class="px-3 py-4">
<div class="flex flex-row-reverse"> <div class="flex flex-row-reverse">
<div class="flex-1"> <div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Code</h2> <h2 class="text-grey-6 text-base mb-1">Code</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}: {{ environment.label }}</div> <div class="text-xs text-grey-6">{{ environment.name }}: {{ environment.label }}</div>
</div> </div>
<div class="mr-3"> <div class="mr-3">
@ -27,15 +27,15 @@
<div> <div>
<ul class="list-reset flex -ml-px"> <ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"> <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg> <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
<span class="block">Deploy</span> <span class="block">Deploy</span>
</button> </button>
</li> </li>
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"> <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg> <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
<span class="block">Switch</span> <span class="block">Switch</span>
</button> </button>
@ -47,14 +47,14 @@
</div> </div>
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey"> <div class="border-b border-grey-4">
<div class="px-3 py-4"> <div class="px-3 py-4">
<div class="flex flex-row-reverse"> <div class="flex flex-row-reverse">
<div class="flex-1"> <div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Databases</h2> <h2 class="text-grey-6 text-base mb-1">Databases</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}</div> <div class="text-xs text-grey-6">{{ environment.name }}</div>
</div> </div>
<div class="mr-3"> <div class="mr-3">
@ -66,27 +66,27 @@
<div> <div>
<ul class="list-reset flex -ml-px"> <ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"> <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
<span class="block">Copy</span> <span class="block">Copy</span>
</button> </button>
</li> </li>
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"> <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg> <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
<span class="block">Back up</span> <span class="block">Back up</span>
</button> </button>
</li> </li>
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button <button
type="button" type="button"
class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block" class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block"
:class="{ :class="{
'text-blue-dark': !isProduction, 'text-blue-3': !isProduction,
'text-grey-dark cursor-not-allowed': isProduction 'text-grey-5 cursor-not-allowed': isProduction
}" }"
:disabled="isProduction" :disabled="isProduction"
> >
@ -101,14 +101,14 @@
</div> </div>
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey"> <div class="border-b border-grey-4">
<div class="px-3 py-4"> <div class="px-3 py-4">
<div class="flex flex-row-reverse"> <div class="flex flex-row-reverse">
<div class="flex-1"> <div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Files</h2> <h2 class="text-grey-6 text-base mb-1">Files</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}</div> <div class="text-xs text-grey-6">{{ environment.name }}</div>
</div> </div>
<div class="mr-3"> <div class="mr-3">
@ -120,8 +120,8 @@
<div> <div>
<ul class="list-reset flex -ml-px"> <ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey"> <li class="w-1/2 flex-1 text-center border-l border-grey-4">
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"> <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
<span class="block">Copy</span> <span class="block">Copy</span>
</button> </button>

18
src/components/Environment/EnvironmentCards.vue
View file

@ -2,42 +2,42 @@
<div class="mb-6"> <div class="mb-6">
<div class="flex flex-wrap -mx-4 -mb-6"> <div class="flex flex-wrap -mx-4 -mb-6">
<div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key"> <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
<div class="border border-grey rounded overflow-hidden"> <div class="border border-grey-4 rounded overflow-hidden">
<div class="bg-white"> <div class="bg-white">
<div class="border-t-4 border-teal p-3"> <div class="border-t-4 border-teal p-3">
<router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-darker hover:text-blue-dark focus:text-blue-dark focus:outline-none mb-1"> <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none mb-1">
<h2>{{ environment.name }}</h2> <h2>{{ environment.name }}</h2>
<svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg> <svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</router-link> </router-link>
<div class="mb-2"> <div class="mb-2">
<a href="#0" class="no-underline hover:underline focus:underline text-grey-darker hover:text-blue-dark focus:text-blue-dark focus:outline-none"> <a href="#0" class="no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none">
{{ environment.url }} {{ environment.url }}
</a> </a>
</div> </div>
<div class="text-grey-darker">{{ environment.label }}</div> <div class="text-grey-6">{{ environment.label }}</div>
</div> </div>
</div> </div>
<div> <div>
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline text-sm w-full text-left"> <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
<span class="flex-1">Code</span> <span class="flex-1">Code</span>
<span class="border-l border-grey p-2"> <span class="border-l border-grey-4 p-2">
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg> <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
</span> </span>
</button> </button>
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline text-sm w-full text-left border-t border-grey"> <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left border-t border-grey-4">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
<span class="flex-1">Databases</span> <span class="flex-1">Databases</span>
<span class="border-l border-grey p-2"> <span class="border-l border-grey-4 p-2">
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg> <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
</span> </span>
</button> </button>
<button type="button" class="flex items-center text-white bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey"> <button type="button" class="flex items-center text-white bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey-4">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
Files Files
</button> </button>

8
src/components/Environment/QuickHelp.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']"> <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
<div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-lighter"> <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-2">
<div class="flex items-center"> <div class="flex items-center">
<svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg> <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
Quick help Quick help
@ -22,15 +22,15 @@
:key="item.subject" :key="item.subject"
type="button" type="button"
class="hover:underline focus:underline mr-6 focus:outline-none" class="hover:underline focus:underline mr-6 focus:outline-none"
:class="[ i === selected ? 'text-grey-darkest' : 'text-blue-dark' ]" :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-3' ]"
@click="selected = i" @click="selected = i"
>{{ item.subject }}</button> >{{ item.subject }}</button>
</div> </div>
<div class="leading-normal"> <div class="leading-normal">
<p class="text-sm text-grey-darker"> <p class="text-sm text-grey-6">
{{ items[selected].text }} {{ items[selected].text }}
<a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">Learn more</a> <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">Learn more</a>
</p> </p>
</div> </div>
</div> </div>

2
src/components/Environment/TaskLog/TaskLog.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="bg-grey-light pb-4 pt-6 px-4"> <div class="bg-grey-3 pb-4 pt-6 px-4">
<h2 class="font-normal text-lg">Task Log</h2> <h2 class="font-normal text-lg">Task Log</h2>
</div> </div>
<div> <div>

10
src/components/Environment/TaskLog/TaskLogItem.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="px-3 py-4 border-b border-grey-light flex" :class="{'bg-yellow-lightest': open}"> <div class="px-3 py-4 border-b border-grey-3 flex" :class="{'bg-yellow-lightest': open}">
<div class="flex-none mr-3"> <div class="flex-none mr-3">
<svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg> <svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg> <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
@ -9,18 +9,18 @@
<div class="flex-1"> <div class="flex-1">
<div class="text-sm font-bold mb-2">{{ task.text }}</div> <div class="text-sm font-bold mb-2">{{ task.text }}</div>
<div class="text-grey-darker text-2xs">{{ task.times.display }}</div> <div class="text-grey-6 text-2xs">{{ task.times.display }}</div>
</div> </div>
<div> <div>
<button type="button" @click="open = !open"> <button type="button" @click="open = !open">
<svg v-if="!open" class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg> <svg v-if="!open" class="h-5 w-5 text-grey-6 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
<svg v-else class="h-5 w-5 text-grey-darker fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg> <svg v-else class="h-5 w-5 text-grey-6 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
</button> </button>
</div> </div>
</div> </div>
<div class="p-4 bg-grey-darker text-white antialiased" v-show="open"> <div class="p-4 bg-grey-6 text-white antialiased" v-show="open">
<div class="lg:flex lg:flex-wrap -mx-4 -mb-4"> <div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
<div class="px-4 mb-4"> <div class="px-4 mb-4">
<div class="text-xs uppercase mb-1">Task ID</div> <div class="text-xs uppercase mb-1">Task ID</div>

2
src/components/Environment/ToggleHelp.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="hidden lg:block"> <div class="hidden lg:block">
<button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')"> <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
<svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg> <svg class="h-5 w-5 mr-1 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
{{ hidden ? 'Show quick help' : 'Hide quick help' }} {{ hidden ? 'Show quick help' : 'Hide quick help' }}
</button> </button>
</div> </div>

2
src/components/HeaderButtons.vue
View file

@ -7,7 +7,7 @@
class="text-xs no-underline hover:underline flex flex-col items-center justify-center" class="text-xs no-underline hover:underline flex flex-col items-center justify-center"
:class="{ :class="{
'text-grey cursor-not-allowed': link.disabled, 'text-grey cursor-not-allowed': link.disabled,
'text-blue-dark': !link.disabled, 'text-blue-3': !link.disabled,
}" }"
:disabled="link.disabled" :disabled="link.disabled"
> >

10
src/components/Navbar.vue
View file

@ -7,20 +7,20 @@
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<nav class="border-t-2 border-transparent flex justify-end md:justify-start"> <nav class="border-t-2 border-transparent flex justify-end md:justify-start">
<a href="#0" class="inline-block text-sm border-b-4 border-blue-dark mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Develop</a> <a href="#0" class="inline-block text-sm border-b-4 border-blue-3 mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Develop</a>
<a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Manage</a> <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Manage</a>
</nav> </nav>
</div> </div>
<div class="hidden md:flex md:items-center"> <div class="hidden md:flex md:items-center">
<div><a class="text-sm text-blue-dark no-underline hover:underline uppercase" href="#0">Help</a></div> <div><a class="text-sm text-blue-3 no-underline hover:underline uppercase" href="#0">Help</a></div>
<div class="ml-6"><button type="button"> <div class="ml-6"><button type="button">
<span class="hidden">Menu</span> <span class="hidden">Menu</span>
<svg class="fill-current text-blue-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg> <svg class="fill-current text-blue-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg>
</button></div> </button></div>
<div class="ml-6"><button type="button"> <div class="ml-6"><button type="button">
<span class="hidden">Activity</span> <span class="hidden">Activity</span>
<svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg> <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg>
</button></div> </button></div>
<div class="ml-6"> <div class="ml-6">
<img class="w-5 h-5 rounded-full" src="https://avatars1.githubusercontent.com/u/339813?s=460&v=4" alt=""> <img class="w-5 h-5 rounded-full" src="https://avatars1.githubusercontent.com/u/339813?s=460&v=4" alt="">

10
src/components/Sidebar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-auto lg:w-56 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll"> <div class="w-auto lg:w-56 bg-grey-3 text-grey-6 antialiased fixed pin-l h-full overflow-y-scroll">
<div> <div>
<ul class="list-reset"> <ul class="list-reset">
<li v-for="link in links" :key="link.title"> <li v-for="link in links" :key="link.title">
@ -7,10 +7,10 @@
href="#0" href="#0"
class="flex items-center no-underline focus:underline px-4 py-2 text-sm" class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
:class="{ :class="{
'bg-grey-darker text-white': link.active, 'bg-grey-6 text-white': link.active,
'border-transparent hover:bg-grey hover:text-blue-dark': !link.active, 'border-transparent hover:bg-grey hover:text-blue-3': !link.active,
'text-grey-dark cursor-not-allowed': link.disabled, 'text-grey-5 cursor-not-allowed': link.disabled,
'text-grey-darker': !link.disabled, 'text-grey-6': !link.disabled,
}" }"
> >
<svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg> <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>

4
src/components/TitleBlock.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="border-b-3 border-grey-light"> <div class="border-b-3 border-grey-3">
<div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-lighter flex justify-between items-center"> <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-2 flex justify-between items-center">
<div class="w-full md:w-auto flex flex-col"> <div class="w-full md:w-auto flex flex-col">
<slot name="left"></slot> <slot name="left"></slot>
</div> </div>

2
src/views/Applications.vue
View file

@ -31,7 +31,7 @@
<div class="w-full"> <div class="w-full">
<form action="#"> <form action="#">
<label for="applications" class="visuallyhidden">Filter applications</label> <label for="applications" class="visuallyhidden">Filter applications</label>
<input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-darker rounded"> <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-4-6 rounded">
</form> </form>
</div> </div>
</div> </div>

30
src/views/Environment.vue
View file

@ -8,11 +8,11 @@
<div class="text-xs mb-3"> <div class="text-xs mb-3">
<ol class="list-reset flex"> <ol class="list-reset flex">
<li class="flex items-center pr-1"> <li class="flex items-center pr-1">
<router-link to="/" class="text-blue-dark no-underline hover:underline mr-1">Applications</router-link> <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg> <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li> </li>
<li class="flex items-center pr-1"> <li class="flex items-center pr-1">
<router-link :to="{ name: 'environments' }" class="text-blue-dark no-underline hover:underline mr-1">{{ application.name }}</router-link> <router-link :to="{ name: 'environments' }" class="text-blue-3 no-underline hover:underline mr-1">{{ application.name }}</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg> <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li> </li>
<li>{{ environment.name }}</li> <li>{{ environment.name }}</li>
@ -21,7 +21,7 @@
<button class="flex flex-1 items-center justify-between md:justify-start"> <button class="flex flex-1 items-center justify-between md:justify-start">
<div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div> <div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div>
<svg class="h-6 w-6 text-blue-dark fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg> <svg class="h-6 w-6 text-blue-3 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
</button> </button>
</template> </template>
@ -48,7 +48,7 @@
</div> </div>
<div class="my-10"> <div class="my-10">
<a :href="environment.url" class="flex items-center text-sm text-blue-dark no-underline hover:underline focus:underline"> <a :href="environment.url" class="flex items-center text-sm text-blue-3 no-underline hover:underline focus:underline">
<svg class="h-6 w-6 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__globe"></use></svg> <svg class="h-6 w-6 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__globe"></use></svg>
{{ environment.url }} {{ environment.url }}
</a> </a>
@ -60,14 +60,14 @@
</div> </div>
<div class="shadow-md overflow-hidden"> <div class="shadow-md overflow-hidden">
<div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Site Health</h2></div> <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Site Health</h2></div>
<div class="bg-white p-4"> <div class="bg-white p-4">
<div class="mb-6"> <div class="mb-6">
<p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p> <p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
</div> </div>
<div class="text-center leading-normal mb-5"> <div class="text-center leading-normal mb-5">
<p class="text-grey-darker"> <p class="text-grey-6">
Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline"> Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
of whether your Drupal site is really up and running. of whether your Drupal site is really up and running.
</p> </p>
@ -81,13 +81,13 @@
</div> </div>
<div class="shadow-md overflow-hidden"> <div class="shadow-md overflow-hidden">
<div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Information</h2></div> <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Information</h2></div>
<div class="bg-white px-4 py-6"> <div class="bg-white px-4 py-6">
<div class="mb-6 relative"> <div class="mb-6 relative">
<div class="text-xs mb-1">Git URL</div> <div class="text-xs mb-1">Git URL</div>
<div class="border border-grey-dark rounded p-3">{{ gitUrl }}</div> <div class="border border-grey-4-5 rounded p-3">{{ gitUrl }}</div>
<div class="absolute pin-t pin-r"> <div class="absolute pin-t pin-r">
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline"> <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
Copy <span class="visuallyhidden">Git URL to your clipboard</span> Copy <span class="visuallyhidden">Git URL to your clipboard</span>
</button> </button>
@ -96,9 +96,9 @@
<div class="mb-6 relative"> <div class="mb-6 relative">
<div class="text-xs mb-1">SSH URL</div> <div class="text-xs mb-1">SSH URL</div>
<div class="border border-grey-dark rounded p-3">{{ sshUrl }}</div> <div class="border border-grey-4-5 rounded p-3">{{ sshUrl }}</div>
<div class="absolute pin-t pin-r"> <div class="absolute pin-t pin-r">
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline"> <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
Copy <span class="visuallyhidden">SSH URL to your clipboard</span> Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
</button> </button>
@ -107,22 +107,22 @@
<div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6"> <div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6"> <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
<div class="mb-1 text-xs text-grey-darker">IP Address</div> <div class="mb-1 text-xs text-grey-6">IP Address</div>
<div>1.2.3.4</div> <div>1.2.3.4</div>
</div> </div>
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6"> <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
<div class="mb-1 text-xs text-grey-darker">Region</div> <div class="mb-1 text-xs text-grey-6">Region</div>
<div>eu-west-1</div> <div>eu-west-1</div>
</div> </div>
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6"> <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
<div class="mb-1 text-xs text-grey-darker">PHP version</div> <div class="mb-1 text-xs text-grey-6">PHP version</div>
<div>7.1</div> <div>7.1</div>
</div> </div>
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6"> <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
<div class="mb-1 text-xs text-grey-darker">Live development mode</div> <div class="mb-1 text-xs text-grey-6">Live development mode</div>
<div>Off</div> <div>Off</div>
</div> </div>
</div> </div>

6
src/views/Environments.vue
View file

@ -8,7 +8,7 @@
<div class="text-xs mb-3"> <div class="text-xs mb-3">
<ol class="list-reset flex"> <ol class="list-reset flex">
<li class="flex items-center pr-1"> <li class="flex items-center pr-1">
<router-link to="/" class="text-blue-dark no-underline hover:underline mr-1">Applications</router-link> <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg> <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li> </li>
<li>{{ application.name }}</li> <li>{{ application.name }}</li>
@ -17,7 +17,7 @@
<button class="flex flex-1 items-center justify-between md:justify-start"> <button class="flex flex-1 items-center justify-between md:justify-start">
<div class="text-2xl font-hairline mr-2">{{ application.name }}</div> <div class="text-2xl font-hairline mr-2">{{ application.name }}</div>
<svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg> <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
</button> </button>
</template> </template>
@ -46,7 +46,7 @@
<div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline"> <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">
<div class="w-full lg:w-1/2 xl:w-1/3"> <div class="w-full lg:w-1/2 xl:w-1/3">
<form action="#"> <form action="#">
<input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-darker rounded"> <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-4-6 rounded">
</form> </form>
</div> </div>