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

Author: DaneEveritt

resources/assets/index.html

@@ -10,7 +10,7 @@
 <div id="pterodactyl">
     <router-view></router-view>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-right text-grey-dark text-xs">
+        <p class="text-right text-neutral-600 text-xs">
         </p>
     </div>
 </div>

resources/assets/scripts/components/auth/ForgotPassword.ts

@@ -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' }"
                 >

resources/assets/scripts/components/auth/LoginForm.ts

@@ -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>

resources/assets/scripts/components/auth/ResetPassword.ts

@@ -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') }}

resources/assets/scripts/components/auth/TwoFactorForm.ts

@@ -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

resources/assets/scripts/components/core/Modal.ts

@@ -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"
                         />

resources/assets/scripts/components/core/Navigation.ts

@@ -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>

resources/assets/scripts/components/dashboard/ServerBox.ts

@@ -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>

resources/assets/scripts/components/dashboard/account/ChangePassword.ts

@@ -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

resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts

@@ -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>