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

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
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,21 @@
<template>
<div>
<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 == '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 == '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 == '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-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-4' : 'bg-blue-3']" @click="active = 'files'">Files</button></li>
</ul>
<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="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-b border-grey">
<div class="border-b border-grey-4">
<div class="px-3 py-4">
<div class="flex flex-row-reverse">
<div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Code</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}: {{ environment.label }}</div>
<h2 class="text-grey-6 text-base mb-1">Code</h2>
<div class="text-xs text-grey-6">{{ environment.name }}: {{ environment.label }}</div>
</div>
<div class="mr-3">
@ -27,15 +27,15 @@
<div>
<ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey">
<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">
<li class="w-1/2 flex-1 text-center border-l border-grey-4">
<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>
<span class="block">Deploy</span>
</button>
</li>
<li class="w-1/2 flex-1 text-center border-l border-grey">
<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">
<li class="w-1/2 flex-1 text-center border-l border-grey-4">
<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>
<span class="block">Switch</span>
</button>
@ -47,14 +47,14 @@
</div>
<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-b border-grey">
<div class="border-b border-grey-4">
<div class="px-3 py-4">
<div class="flex flex-row-reverse">
<div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Databases</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}</div>
<h2 class="text-grey-6 text-base mb-1">Databases</h2>
<div class="text-xs text-grey-6">{{ environment.name }}</div>
</div>
<div class="mr-3">
@ -66,27 +66,27 @@
<div>
<ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey">
<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">
<li class="w-1/2 flex-1 text-center border-l border-grey-4">
<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>
<span class="block">Copy</span>
</button>
</li>
<li class="w-1/2 flex-1 text-center border-l border-grey">
<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">
<li class="w-1/2 flex-1 text-center border-l border-grey-4">
<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>
<span class="block">Back up</span>
</button>
</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-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="{
'text-blue-dark': !isProduction,
'text-grey-dark cursor-not-allowed': isProduction
'text-blue-3': !isProduction,
'text-grey-5 cursor-not-allowed': isProduction
}"
:disabled="isProduction"
>
@ -101,14 +101,14 @@
</div>
<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-b border-grey">
<div class="border-b border-grey-4">
<div class="px-3 py-4">
<div class="flex flex-row-reverse">
<div class="flex-1">
<h2 class="text-grey-darker text-base mb-1">Files</h2>
<div class="text-xs text-grey-darker">{{ environment.name }}</div>
<h2 class="text-grey-6 text-base mb-1">Files</h2>
<div class="text-xs text-grey-6">{{ environment.name }}</div>
</div>
<div class="mr-3">
@ -120,8 +120,8 @@
<div>
<ul class="list-reset flex -ml-px">
<li class="w-1/2 flex-1 text-center border-l border-grey">
<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">
<li class="w-1/2 flex-1 text-center border-l border-grey-4">
<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>
<span class="block">Copy</span>
</button>

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

@ -2,42 +2,42 @@
<div class="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 class="border border-grey rounded overflow-hidden">
<div class="border border-grey-4 rounded overflow-hidden">
<div class="bg-white">
<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>
<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>
<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 }}
</a>
</div>
<div class="text-grey-darker">{{ environment.label }}</div>
<div class="text-grey-6">{{ environment.label }}</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>
<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>
</span>
</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>
<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>
</span>
</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>
Files
</button>

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

@ -1,6 +1,6 @@
<template>
<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">
<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
@ -22,15 +22,15 @@
:key="item.subject"
type="button"
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"
>{{ item.subject }}</button>
</div>
<div class="leading-normal">
<p class="text-sm text-grey-darker">
<p class="text-sm text-grey-6">
{{ 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>
</div>
</div>

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

@ -1,6 +1,6 @@
<template>
<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>
</div>
<div>

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

@ -1,6 +1,6 @@
<template>
<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">
<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>
@ -9,18 +9,18 @@
<div class="flex-1">
<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>
<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-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-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-6 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
</button>
</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="px-4 mb-4">
<div class="text-xs uppercase mb-1">Task ID</div>

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

@ -1,7 +1,7 @@
<template>
<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')">
<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' }}
</button>
</div>