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

Change gray classes

Browse source 
To match Tailwind 1.0
This commit is contained in:
Oliver Davies 2019-04-09 02:27:14 +01:00
parent f443d5892b
commit e0e95a0e97
21 changed files with 66 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/AppBreadcrumb.vue
View file

@ -3,7 +3,7 @@
<ul class="flex -ml-3">
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="text-grey-700 uppercase text-sm">Organisation</span>
<span class="text-gray-700 uppercase text-sm">Organisation</span>
<span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
<router-link v-else :to="{name: 'applications'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedOrganisation"></router-link>
</div>
@ -12,7 +12,7 @@
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="text-grey-700 uppercase text-sm">Application</span>
<span class="text-gray-700 uppercase text-sm">Application</span>
<span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
<router-link v-else :to="{name: 'environments'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedApplication"></router-link>
</div>
@ -21,7 +21,7 @@
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="text-grey-700 uppercase text-sm">Environment</span>
<span class="text-gray-700 uppercase text-sm">Environment</span>
<span class="font-bold block mb-1">{{ selectedEnvironment || '--' }}</span>
</div>
</li>

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

@ -1,6 +1,6 @@
<template>
<div>
<div v-if="display == 'grid'" class="bg-white p-4 border-grey-400 rounded-sm border flex-1 shadow">
<div v-if="display == 'grid'" class="bg-white p-4 border-gray-400 rounded-sm border flex-1 shadow">
<div class="flex h-full">
<div class="flex-1 w-5/6 flex flex-col justify-between">
<div>
@ -22,7 +22,7 @@
</div>
</div>
<div v-if="display == 'list'" class="bg-white p-3 border-grey-400 border-b">
<div v-if="display == 'list'" class="bg-white p-3 border-gray-400 border-b">
<div class="-mx-2">
<div class="flex flex-row-reverse items-center justify-between">
<div class="flex flex-1 justify-between items-center -mx-2">

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

@ -1,12 +1,12 @@
<template>
<div>
<div class="bg-grey-100 rounded overflow-hidden">
<button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
<div class="bg-gray-100 rounded overflow-hidden">
<button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-100 text-white' : 'text-gray-700']" @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>
<span class="visuallyhidden">Grid</span>
</button>
<button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'list' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
<button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'list' ? 'bg-blue-100 text-white' : 'text-gray-700']" @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>
<span class="visuallyhidden">List</span>
</button>

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

@ -18,7 +18,7 @@ export default {
<style scoped>
.tag {
@apply text-2xs py-1 px-2 rounded uppercase border border-grey-400 bg-white mr-2 mb-2
@apply text-2xs py-1 px-2 rounded uppercase border border-gray-400 bg-white mr-2 mb-2
}
.tag[data-type="drupal"] {

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

@ -1,5 +1,5 @@
<template>
<button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-100 hover:text-orange-200 focus:text-orange-200' : 'text-grey-400 focus:text-orange-200 hover:text-orange-100']">
<button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-100 hover:text-orange-200 focus:text-orange-200' : 'text-gray-400 focus:text-orange-200 hover:text-orange-100']">
<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>
</button>

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

@ -1,12 +1,12 @@
<template>
<div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
<div class="border border-gray-400 rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal">
<div class="border-b border-grey-400">
<div class="border-b border-gray-400">
<div class="px-3 py-4">
<div class="flex flex-row-reverse">
<div class="flex-1">
<h2 class="text-grey-600 text-base mb-1">{{ title }}</h2>
<div class="text-xs text-grey-600">{{ description }}</div>
<h2 class="text-gray-600 text-base mb-1">{{ title }}</h2>
<div class="text-xs text-gray-600">{{ description }}</div>
</div>
<div class="mr-3">

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

@ -1,5 +1,5 @@
<template>
<button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
<button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-gray-200 focus:bg-gray-200 focus:outline-none block">
<slot></slot>
<span class="block" v-text="label"></span>
</button>

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

@ -47,7 +47,7 @@
<li class="button-list-item">
<action-card-button label="Restore" :disabled="isProduction" :class="{
'text-blue-300': !isProduction,
'text-grey-500 cursor-not-allowed': isProduction
'text-gray-500 cursor-not-allowed': isProduction
}">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
</action-card-button>
@ -110,6 +110,6 @@ export default {
}
.button-list-item {
@apply w-1/2 flex-1 text-center border-l border-grey-400
@apply w-1/2 flex-1 text-center border-l border-gray-400
}
</style>

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

@ -2,21 +2,21 @@
<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-400 rounded overflow-hidden shadow">
<div class="border border-gray-400 rounded overflow-hidden shadow">
<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-600 hover:text-blue-300 focus:text-blue-300 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-gray-600 hover:text-blue-300 focus:text-blue-300 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-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
<a href="#0" class="no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
{{ environment.url }}
</a>
</div>
<div class="text-grey-600">{{ environment.label }}</div>
<div class="text-gray-600">{{ environment.label }}</div>
</div>
</div>
@ -24,20 +24,20 @@
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1">
<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-400 p-2">
<span class="border-l border-gray-400 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-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-grey-400">
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-gray-400">
<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-400 p-2">
<span class="border-l border-gray-400 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-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-grey-400">
<button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-gray-400">
<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>

6
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-200">
<div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-gray-200">
<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,13 +22,13 @@
:key="item.subject"
type="button"
class="hover:underline focus:underline mr-6 focus:outline-none"
:class="[ i === selected ? 'text-grey-700' : 'text-blue-300' ]"
:class="[ i === selected ? 'text-gray-700' : 'text-blue-300' ]"
@click="selected = i"
>{{ item.subject }}</button>
</div>
<div class="leading-normal">
<p class="text-sm text-grey-600">
<p class="text-sm text-gray-600">
{{ items[selected].text }}
<a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">Learn more</a>
</p>

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

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

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

@ -1,26 +1,26 @@
<template>
<div>
<div class="px-3 py-4 border-b border-grey-300 flex" :class="{'bg-yellow-lightest': open}">
<div class="px-3 py-4 border-b border-gray-300 flex" :class="{'bg-yellow-lightest': open}">
<div class="flex-none mr-3">
<svg v-if="task.loading" class="h-5 w-5 text-grey-500 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="task.loading" class="h-5 w-5 text-gray-500 fill-current rotates" 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-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
</div>
<div class="flex-1">
<div class="text-sm font-bold mb-2">{{ task.text }}</div>
<div class="text-grey-600 text-2xs">{{ task.times.display }}</div>
<div class="text-gray-600 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-600 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-600 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-gray-600 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
<svg v-else class="h-5 w-5 text-gray-600 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-600 text-white antialiased" v-show="open">
<div class="p-4 bg-gray-600 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/HeaderButtons.vue
View file

@ -6,7 +6,7 @@
type="button"
class="text-xs no-underline hover:underline flex flex-col items-center justify-center"
:class="{
'text-grey cursor-not-allowed': link.disabled,
'text-gray-400 cursor-not-allowed': link.disabled,
'text-blue-300': !link.disabled,
}"
:disabled="link.disabled"

10
src/components/Sidebar.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-auto lg:w-56 bg-grey-300 text-grey-400 antialiased fixed left-0 h-full overflow-y-scroll z-30">
<div class="w-auto lg:w-56 bg-gray-300 text-gray-400 antialiased fixed left-0 h-full overflow-y-scroll z-30">
<div>
<ul class="list-reset">
<li v-for="link in links" :key="link.title">
@ -7,10 +7,10 @@
href="#0"
class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
:class="{
'bg-grey-600 text-white hover:text-white': link.active,
'border-transparent hover:bg-grey-400': !link.active,
'text-grey-500 cursor-not-allowed': link.disabled,
'text-grey-600 hover:text-blue-300': !link.disabled && !link.active,
'bg-gray-600 text-white hover:text-white': link.active,
'border-transparent hover:bg-gray-400': !link.active,
'text-gray-500 cursor-not-allowed': link.disabled,
'text-gray-600 hover:text-blue-300': !link.disabled && !link.active,
}"
>
<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>
<div class="border-b-3 border-grey-300">
<div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-200 flex justify-between items-center">
<div class="border-b-3 border-gray-300">
<div class="bg-white px-4 lg:px-6 py-5 border-t border-gray-200 flex justify-between items-center">
<div class="w-full md:w-auto flex flex-col">
<app-breadcrumb :application="application" :environment="environment"></app-breadcrumb>
</div>