From 715364de1d186484e114e34aece577c747bfa833 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sat, 5 Sep 2020 15:31:10 -0400
Subject: [PATCH] fix: login screen UI on dark mode

---
 client/components/login.vue | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/client/components/login.vue b/client/components/login.vue
index 5c216df2..0b3c27b2 100644
--- a/client/components/login.vue
+++ b/client/components/login.vue
@@ -7,7 +7,7 @@
             v-avatar(tile, size='34')
               v-img(:src='logoUrl')
           .login-title
-            .text-h6 {{ siteTitle }}
+            .text-h6.grey--text.text--darken-4 {{ siteTitle }}
         v-alert.mb-0(
           v-model='errorShown'
           transition='slide-y-reverse-transition'
@@ -25,7 +25,7 @@
           .login-subtitle
             .text-subtitle-1 Select Authentication Provider
           .login-list
-            v-list.elevation-1.radius-7(nav)
+            v-list.elevation-1.radius-7(nav, light)
               v-list-item-group(v-model='selectedStrategyKey')
                 v-list-item(
                   v-for='(stg, idx) of filteredStrategies'
@@ -47,18 +47,21 @@
               flat
               prepend-inner-icon='mdi-clipboard-account'
               background-color='white'
+              color='blue darken-2'
               hide-details
               ref='iptEmail'
               v-model='username'
               :placeholder='isUsernameEmail ? $t(`auth:fields.email`) : $t(`auth:fields.username`)'
               :type='isUsernameEmail ? `email` : `text`'
               :autocomplete='isUsernameEmail ? `email` : `username`'
+              light
               )
             v-text-field.mt-2(
               solo
               flat
               prepend-inner-icon='mdi-form-textbox-password'
               background-color='white'
+              color='blue darken-2'
               hide-details
               ref='iptPassword'
               v-model='password'
@@ -68,11 +71,12 @@
               :placeholder='$t("auth:fields.password")'
               autocomplete='current-password'
               @keyup.enter='login'
+              light
             )
             v-btn.mt-2.text-none(
               width='100%'
               large
-              color='primary'
+              color='blue darken-2'
               dark
               @click='login'
               :loading='isLoading'
@@ -105,17 +109,19 @@
               flat
               prepend-inner-icon='mdi-clipboard-account'
               background-color='white'
+              color='blue darken-2'
               hide-details
               ref='iptForgotPwdEmail'
               v-model='username'
               :placeholder='$t(`auth:fields.email`)'
               type='email'
               autocomplete='email'
+              light
               )
             v-btn.mt-2.text-none(
               width='100%'
               large
-              color='primary'
+              color='blue darken-2'
               dark
               @click='forgotPasswordSubmit'
               :loading='isLoading'
@@ -141,11 +147,13 @@
               flat
               prepend-inner-icon='mdi-form-textbox-password'
               background-color='white'
+              color='blue darken-2'
               hide-details
               ref='iptNewPassword'
               v-model='newPassword'
               :placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)'
               autocomplete='new-password'
+              light
               )
               password-strength(slot='progress', v-model='newPassword')
             v-text-field.mt-2(
@@ -154,16 +162,18 @@
               flat
               prepend-inner-icon='mdi-form-textbox-password'
               background-color='white'
+              color='blue darken-2'
               hide-details
               v-model='newPasswordVerify'
               :placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)'
               autocomplete='new-password'
               @keyup.enter='changePassword'
+              light
             )
             v-btn.mt-2.text-none(
               width='100%'
               large
-              color='primary'
+              color='blue darken-2'
               dark
               @click='changePassword'
               :loading='isLoading'
@@ -174,24 +184,26 @@
     //-------------------------------------------------
     v-dialog(v-model='isTFAShown', max-width='500', persistent)
       v-card
-        .login-tfa.text-center.pa-5
+        .login-tfa.text-center.pa-5.grey--text.text--darken-3
           img(src='_assets/svg/icon-pin-pad.svg')
           .subtitle-2 Enter the security code generated from your trusted device:
           v-text-field.login-tfa-field.mt-2(
             solo
             flat
             background-color='white'
+            color='blue darken-2'
             hide-details
             ref='iptTFA'
             v-model='securityCode'
             :placeholder='$t("auth:tfa.placeholder")'
             autocomplete='one-time-code'
             @keyup.enter='verifySecurityCode(false)'
+            light
           )
           v-btn.mt-2.text-none(
             width='100%'
             large
-            color='primary'
+            color='blue darken-2'
             dark
             @click='verifySecurityCode(false)'
             :loading='isLoading'
@@ -202,7 +214,7 @@
     //-------------------------------------------------
     v-dialog(v-model='isTFASetupShown', max-width='600', persistent)
       v-card
-        .login-tfa.text-center.pa-5
+        .login-tfa.text-center.pa-5.grey--text.text--darken-3
           .subtitle-1.primary--text Your administrator has required Two-Factor Authentication (2FA) to be enabled on your account.
           v-divider.my-5
           .subtitle-2 1) Scan the QR code below from your mobile 2FA application:
@@ -213,17 +225,19 @@
             solo
             flat
             background-color='white'
+            color='blue darken-2'
             hide-details
             ref='iptTFASetup'
             v-model='securityCode'
             :placeholder='$t("auth:tfa.placeholder")'
             autocomplete='one-time-code'
             @keyup.enter='verifySecurityCode(true)'
+            light
           )
           v-btn.mt-2.text-none(
             width='100%'
             large
-            color='primary'
+            color='blue darken-2'
             dark
             @click='verifySecurityCode(true)'
             :loading='isLoading'
@@ -737,6 +751,7 @@ export default {
       padding: 12px;
       font-size: 13px;
       text-align: center;
+      color: mc('grey', '900');
     }
 
     &-list {