StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

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

4
resources/assets/scripts/components/auth/ForgotPassword.ts
View file

@ -69,7 +69,7 @@ export default Vue.component('forgot-password', {
v-on:input="updateEmail($event)"
/>
<label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
<p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
</div>
</div>
<div>
@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
<router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
aria-label="Go to login"
:to="{ name: 'login' }"
>

2
resources/assets/scripts/components/auth/LoginForm.ts
View file

@ -102,7 +102,7 @@ export default Vue.component('login-form', {
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
<router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
:to="{ name: 'forgot-password' }">
{{ $t('auth.forgot_password.label') }}
</router-link>

4
resources/assets/scripts/components/auth/ResetPassword.ts
View file

@ -88,7 +88,7 @@ export default Vue.component('reset-password', {
v-model="password"
/>
<label for="grid-password">{{ $t('strings.password') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.password_requirements') }}</p>
<p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
<router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
:to="{ name: 'login' }"
>
{{ $t('auth.go_to_login') }}

4
resources/assets/scripts/components/auth/TwoFactorForm.ts
View file

@ -60,7 +60,7 @@ export default Vue.component('two-factor-form', {
v-model="code"
/>
<label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p>
<p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
</div>
</div>
<div>
@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
<router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
:to="{ name: 'login' }"
>
Back to Login

2
resources/assets/scripts/components/core/Modal.ts
View file

@ -34,7 +34,7 @@ export default Vue.component('modal', {
<div class="modal-container" @click.stop>
<div v-on:click="close">
<icon name="x"
class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
class="absolute pin-r pin-t m-2 textneutral-500scursor-pointer"
aria-label="Close modal"
role="button"
/>

6
resources/assets/scripts/components/core/Navigation.ts
View file

@ -101,7 +101,7 @@ export default Vue.component('navigation', {
<a href="#">
<div class="flex items-center">
<div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span>
<span class="text-sm text-neutral-800">Loading...</span>
</div>
<div class="flex-none">
<span class="spinner spinner-relative"></span>
@ -113,8 +113,8 @@ export default Vue.component('navigation', {
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
<div class="flex items-center">
<div class="flex-1">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
<span class="font-bold text-neutral-900">{{ server.name }}</span><br />
<span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div>
<div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span>

4
resources/assets/scripts/components/dashboard/ServerBox.ts
View file

@ -171,12 +171,12 @@ export default Vue.component('server-box', {
{{ server.name }}
</h2>
</router-link>
<div class="text-grey-darker font-normal text-sm">
<div class="text-neutral-800 font-normal text-sm">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
<div class="absolute pin-b pin-l p-4 w-full">
<span class="font-semibold text-indigo">{{ server.node }}</span>
<span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
<span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
</div>
</div>
</div>

2
resources/assets/scripts/components/dashboard/account/ChangePassword.ts
View file

@ -53,7 +53,7 @@ export default Vue.component('change-password', {
<div id="change-password-container" :class>
<form method="post" v-on:submit.prevent="submitForm">
<div class="content-box">
<h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2>
<h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.password.title') }}</h2>
<div class="mt-6">
<label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
<input id="grid-password-current" name="current_password" type="password" class="input" required

6
resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
View file

@ -128,7 +128,7 @@ export default Vue.component('two-factor-authentication', {
<span class="spinner spinner-xl text-blue"></span>
</div>
<div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
<h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
<div class="mt-6">
<label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label>
<input id="grid-two-factor-token-disable" type="number" class="input"
@ -151,14 +151,14 @@ export default Vue.component('two-factor-authentication', {
</div>
</div>
<div id="container-enable-two-factor" v-else v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
<h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
<div class="flex mt-6">
<div class="flex-none w-full sm:w-1/2 text-center">
<div class="h-48">
<img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48">
</div>
<div>
<p class="text-xs text-grey-darker mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
<p class="text-xs text-neutral-800 mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
<p class="text-xs"><code>{{response.secret}}</code></p>
</div>
</div>

2
resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
View file

@ -51,7 +51,7 @@ export default Vue.component('update-email', {
<div id="update-email-container" :class>
<form method="post" v-on:submit.prevent="submitForm">
<div class="content-box">
<h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.email.title') }}</h2>
<h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.email.title') }}</h2>
<div>
<label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label>
<input id="grid-email" name="email" type="email" class="input" required

44
resources/assets/scripts/components/server/Server.ts
View file

@ -82,32 +82,28 @@ export default Vue.component('server', {
<div class="mr-6">
<div class="p-6 text-center bg-white rounded shadow">
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
<span class="text-grey-dark text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
<span class="text-neutral-600 text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
</div>
</div>
<div class="mt-6 sidenav mr-6">
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
Console
</router-link>
<router-link :to="{ name: 'server-files' }">
File Manager
</router-link>
<!--<router-link :to="{ name: 'server-subusers' }">-->
<!--<icon name="users" class="h-4"></icon> Subusers-->
<!--</router-link>-->
<!--<router-link :to="{ name: 'server-schedules' }">-->
<!--<icon name="calendar" class="h-4"></icon> Schedules-->
<!--</router-link>-->
<router-link :to="{ name: 'server-databases' }">
Databases
</router-link>
<!--<router-link :to="{ name: 'server-allocations' }">-->
<!--<icon name="globe" class="h-4"></icon> Allocations-->
<!--</router-link>-->
<!--<router-link :to="{ name: 'server-settings' }">-->
<!--<icon name="settings" class="h-4"></icon> Settings-->
<!--</router-link>-->
<div class="sidenav mt-6 mr-6">
<ul>
<li>
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
Console
</router-link>
</li>
<li>
<router-link :to="{ name: 'server-files' }">
File Manager
</router-link>
</li>
<li>
<router-link :to="{ name: 'server-databases' }">
Databases
</router-link>
</li>
</ul>
</div>
</div>
<div class="h-full w-full">

4
resources/assets/scripts/components/server/components/PowerButtons.ts
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>

6
resources/assets/scripts/components/server/components/ProgressBar.ts
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">

2
resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
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

12
resources/assets/scripts/components/server/components/database/DatabaseRow.vue
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">

4
resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
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"/>

4
resources/assets/scripts/components/server/components/filemanager/FileRow.ts
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"/>

4
resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
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>

4
resources/assets/scripts/components/server/subpages/Console.ts
View file

@ -162,12 +162,12 @@ export default Vue.component('server-console', {
<div class="animate fadein shadow-md">
<div class="text-xs font-mono">
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
<div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
<div class="mb-2 text-neutral-400" ref="terminal" v-if="connected"></div>
<div v-else>
<div class="spinner spinner-xl mt-24"></div>
</div>
</div>
<div class="rounded-b bg-grey-darkest text-white flex">
<div class="rounded-b bg-neutral-900 text-white flex">
<div class="flex-no-shrink p-2">
<span class="font-bold">$</span>
</div>

4
resources/assets/scripts/components/server/subpages/Databases.ts
View file

@ -92,8 +92,8 @@ export default Vue.component('server-databases', {
<div class="animate fadein" v-else>
<div class="content-box mb-6" v-if="!databases.length">
<div class="flex items-center">
<icon name="database" class="flex-none text-grey-darker"></icon>
<div class="flex-1 px-4 text-grey-darker">
<icon name="database" class="flex-none text-neutral-800"></icon>
<div class="flex-1 px-4 text-neutral-800">
<p>You have no databases.</p>
</div>
</div>

2
resources/assets/scripts/components/server/subpages/FileManager.ts
View file

@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
<div class="alert error" v-text="errorMessage"></div>
</div>
<div v-else-if="!directories.length && !files.length">
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
<p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
</div>
<div class="filemanager" v-else>
<div class="header">