Merge pull request #679 from Adamant-im/feat/ui-bug-light-theme

Feat/UI bugs light theme
Adamant-im · Nov 26, 2024 · d58e314 · d58e314
2 parents 9c3cb3b + b469aa1
commit d58e314
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 14 deletions.
diff --git a/src/components/DelegatesTable/DelegateVoteCheckbox.vue b/src/components/DelegatesTable/DelegateVoteCheckbox.vue
@@ -78,28 +78,35 @@ export default {
   &__icon {
     font-size: 24px !important;
     height: 24px !important;
-
-    &--good {
-      color: map-get($adm-colors, 'good');
-    }
-
-    &--danger {
-      color: map-get($adm-colors, 'danger');
-    }
   }
 }
 
+/** Themes **/
 .v-theme--light {
   .delegate-vote-checkbox {
     &__icon {
       color: map-get($adm-colors, 'muted');
+      &--good {
+        color: map-get($adm-colors, 'good');
+      }
+
+      &--danger {
+        color: map-get($adm-colors, 'danger');
+      }
     }
   }
 }
 
-.dark {
+.v-theme--dark {
   .delegate-vote-checkbox {
     &__icon {
+      &--good {
+        color: map-get($adm-colors, 'good');
+      }
+      
+      &--danger {
+        color: map-get($adm-colors, 'danger');
+      }
     }
   }
 }

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-form ref="form" class="login-form" @submit.prevent="submit">
+  <v-form ref="form" :class="classes.root" @submit.prevent="submit">
     <v-row no-gutters>
       <slot>
         <v-text-field
           v-model="passphrase"
           :label="$t('login.password_label')"
           autocomplete="current-password"
+          :class="classes.textField"
           class="text-center"
-          color="white"
           :type="showPassphrase ? 'text' : 'password'"
           variant="underlined"
         >
@@ -60,6 +60,12 @@ import { useRouter } from 'vue-router'
 import { isAxiosError } from 'axios'
 import { isAllNodesOfflineError, isAllNodesDisabledError } from '@/lib/nodes/utils/errors'
 
+const className = 'login-form'
+const classes = {
+  root: className,
+  textField: `${className}__textfield`
+}
+
 export default defineComponent({
   props: {
     modelValue: {
@@ -73,7 +79,6 @@ export default defineComponent({
     const store = useStore()
     const { t } = useI18n()
     const showSpinner = ref(false)
-
     const showPassphrase = ref(false)
     const togglePassphraseVisibility = () => {
       showPassphrase.value = !showPassphrase.value
@@ -133,6 +138,7 @@ export default defineComponent({
       showSpinner,
       passphrase,
       showPassphrase,
+      classes,
       togglePassphraseVisibility,
       submit,
       freeze,
@@ -142,3 +148,25 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+@import 'vuetify/settings';
+@import '@/assets/styles/settings/_colors.scss';
+
+/** Themes **/
+.v-theme--light {
+  .login-form {
+    &__textfield {
+      color: map-get($adm-colors, 'regular');
+    }
+  }
+}
+.v-theme--dark {
+  .login-form {
+    &__textfield {
+      color: map-get($shades, 'white');
+    }
+  }
+}
+
+</style>
diff --git a/src/components/nodes/components/NodesTableHead.vue b/src/components/nodes/components/NodesTableHead.vue
@@ -60,6 +60,7 @@ export default {
 
 <style lang="scss">
 @import 'vuetify/settings';
+@import '@/assets/styles/settings/_colors.scss';
 
 .nodes-table-head {
   &__th {
@@ -76,4 +77,20 @@ export default {
     width: 104px;
   }
 }
+
+/** Themes **/
+.v-theme--light {
+  .nodes-table-head {
+    &__th, &__label {
+      color: map-get($adm-colors, 'regular');
+    }
+  }
+}
+.v-theme--dark {
+  .nodes-table-head {
+    &__th, &__label {
+      color: map-get($adm-colors, 'white');
+    }
+  }
+}
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -180,7 +180,7 @@
     "label": "Type",
     "host": "Host",
     "inactive": "Inactive",
-    "sync": "Sync",
+    "sync": "Syncing",
     "ms": "ms",
     "nodeLabelDescription": "Support decentralization and enhance privacy level—<a target=\"_blank\" href=\"https://medium.com/adamant-im/how-to-run-your-adamant-node-on-ubuntu-990e391e8fcc\">run your own ADAMANT node</a>. To add your nodes to the list, you need <a target=\"_blank\" href=\"https://github.com/Adamant-im/adamant-im/\">to deploy web application on separate domain</a>. This limitation refers to Content Security Policy (CSP).",
     "offline": "Offline",

diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -229,7 +229,8 @@ export default defineComponent({
   .login-page {
     &__icon,
     &__title,
-    &__subtitle {
+    &__subtitle,
+    &__settings-button {
       color: map-get($adm-colors, 'regular');
     }
   }