fix(core): unify and improve form-field colors

simonwep · Sep 21, 2023 · f9a6466 · f9a6466
1 parent 6d34ad8
commit f9a6466
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 12 deletions.
diff --git a/src/app/components/base/file-picker/FilePicker.vue b/src/app/components/base/file-picker/FilePicker.vue
@@ -41,7 +41,7 @@ const pick = () => {
   display: flex;
   align-items: center;
   background: var(--input-field-background);
-  padding: 10px 15px;
+  padding: 8px 12px;
   border-radius: var(--border-radius-m);
   cursor: pointer;
   border: 1px dashed var(--input-field-border);

diff --git a/src/app/components/base/form/CheckBoxField.vue b/src/app/components/base/form/CheckBoxField.vue
@@ -49,6 +49,7 @@ const inputId = uuid();
 .input {
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .box {

diff --git a/src/app/components/base/form/TextField.vue b/src/app/components/base/form/TextField.vue
@@ -91,12 +91,12 @@ const passwordBarColor = computed(() => {
 
 .inputBox {
   background: var(--input-field-background);
+  border: 1px dashed var(--input-field-border);
   border-radius: var(--border-radius-m);
   height: 30px;
-  padding: 0 8px;
+  padding: 8px 12px;
   display: flex;
   align-items: center;
-  border: 1px solid transparent;
   transition: all var(--input-field-transition);
 
   .input {
@@ -115,14 +115,13 @@ const passwordBarColor = computed(() => {
   }
 
   &:hover:not(:focus-within) {
+    border: 1px dashed var(--input-field-hover-border);
     background: var(--input-field-hover-background);
-    border: 1px solid var(--input-field-hover-border);
   }
 
   &:focus-within {
+    border: 1px dashed var(--input-field-focus-border);
     background: var(--input-field-focus-background);
-    border: 1px solid var(--input-field-focus-border);
-    box-shadow: var(--input-field-focus-box-shadow);
   }
 }
 

diff --git a/src/app/pages/navigation/tools/import/ImportButton.vue b/src/app/pages/navigation/tools/import/ImportButton.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { DefineComponent, ref, shallowRef } from 'vue';
+import { DefineComponent, ref, shallowRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
 import ContextMenuButton from '@components/base/context-menu/ContextMenuButton.vue';
@@ -38,7 +38,6 @@ const visible = ref(false);
 const { t } = useI18n();
 
 const close = () => {
-  steps.value?.reset();
   visible.value = false;
 };
 
@@ -47,6 +46,8 @@ const next = (component: any) => {
   screen.value = component;
   steps.value?.next();
 };
+
+watch(visible, () => steps.value?.reset());
 </script>
 
 <style lang="scss" module>

diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
@@ -118,7 +118,7 @@
   --input-field-transition: var(--transition-s);
   --input-field-font-size: var(--font-size-xs);
   --input-field-caret-color: #a6aab7;
-  --input-field-border: var(--c-dimmed);
+  --input-field-border: #54516d;
   --input-field-placeholder: #5d6275;
   --input-field-background: var(--app-background);
 

diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
@@ -18,7 +18,7 @@
   --c-text-light-accent: #b8bbcc;
   --c-text-light-muted: #d2d2da;
 
-  --c-dimmed: #bec9d4;
+  --c-dimmed: #dfe4e9;
   --c-dimmed-hover: #a2a9b4;
   --c-dimmed-text: var(--c-text-light);
   --c-dimmed-text-hover: var(--c-dimmed-text);
@@ -118,9 +118,9 @@
   --input-field-transition: var(--transition-s);
   --input-field-font-size: var(--font-size-xs);
   --input-field-caret-color: #2d3036;
-  --input-field-border: var(--c-dimmed);
+  --input-field-border: #bec9d4;
   --input-field-placeholder: var(--c-dimmed-pure);
-  --input-field-background: var(--app-background);
+  --input-field-background: #efeff3;
 
   --input-field-hover-border: var(--c-dimmed-hover);
   --input-field-hover-background: var(--input-field-background);