Convert color schema, begin migrating old classes (finishes grey & red)
This commit is contained in:
parent
6c7a5d5bb9
commit
32b43cff9a
35 changed files with 186 additions and 166 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"/>
|
||||
|
|
|
@ -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"/>
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue