Convert color schema, begin migrating old classes (finishes grey & red)

This commit is contained in:
Dane Everitt 2019-02-09 14:32:18 -08:00
parent 6c7a5d5bb9
commit 32b43cff9a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
35 changed files with 186 additions and 166 deletions

View file

@ -28,7 +28,7 @@ export default Vue.component('power-buttons', {
v-on:click.prevent="sendPowerAction('start')"
>Start</button>
<div v-else>
<button class="btn btn-red uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
<button class="btn btn-red-500 uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button>
</div>
@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
<div v-else>
<div class="text-center">
<div class="spinner"></div>
<div class="pt-2 text-xs text-grey-light">Connecting to node</div>
<div class="pt-2 text-xs text-neutral-400">Connecting to node</div>
</div>
</div>
</div>

View file

@ -13,7 +13,7 @@ export default Vue.component('progress-bar', {
} else if (this.percent >= 70 && this.percent < 90) {
return "bg-yellow-dark";
} else {
return "bg-red-dark";
return "bg-red-600";
}
},
borderColor: function () {
@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
} else if (this.percent >= 70 && this.percent < 90) {
return "border-yellow-dark";
} else {
return "border-red-dark";
return "border-red-600";
}
}
},
@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
template: `
<div>
<div class="text-right mb-1" v-if="title.length > 0">
<span class="text-grey-dark text-xs uppercase">{{ title }}</span>
<span class="text-neutral-600 text-xs uppercase">{{ title }}</span>
</div>
<div class="w-full border rounded h-4" :class="borderColor">
<div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">

View file

@ -1,7 +1,7 @@
<template>
<div>
<message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
<h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2>
<h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
<div class="mb-6">
<label class="input-label" for="grid-database-name">Database name</label>
<input id="grid-database-name" type="text" class="input" name="database_name" required

View file

@ -1,17 +1,17 @@
<template>
<div class="content-box mb-6 hover:border-grey">
<div class="flex items-center text-grey-darker">
<div class="content-box mb-6 hover:borderneutral-500">
<div class="flex items-center text-neutral-800">
<database-icon class="flex-none text-green"></database-icon>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
<p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
<p>{{database.name}}</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
<p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
<p>{{database.username}}</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
<p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
<p>
<code class="text-sm cursor-pointer" v-on:click="revealPassword">
<span class="select-none" v-if="!database.showPassword">
@ -22,7 +22,7 @@
</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
<p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
<p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
</div>
<div class="flex-none px-4">

View file

@ -1,7 +1,7 @@
<template>
<div>
<h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2>
<p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
<h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
<p class="text-neutral-900 text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
<div class="mt-6">
<label class="input-label">Confirm database name</label>
<input type="text" class="input" v-model="nameConfirmation"/>

View file

@ -89,8 +89,8 @@ export default Vue.component('file-row', {
<icon name="link2" v-else/>
</div>
<div class="flex-1">{{file.name}}</div>
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
<div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div>
</div>
<file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>

View file

@ -35,8 +35,8 @@ export default Vue.component('folder-row', {
<icon name="folder"/>
</div>
<div class="flex-1">{{directory.name}}</div>
<div class="flex-1 text-right text-grey-dark"></div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
<div class="flex-1 text-right text-neutral-600"></div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
<div class="flex-none w-1/6"></div>
</router-link>
</div>