From aac44f930eb6d45709b69dbb8e2806fff9d6bf9e Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 18 Jan 2025 00:34:46 +0100
Subject: [PATCH] fix(style): consistent input colors

---
 front/src/components/ui/Input.vue          | 27 ++++++++++++++--------
 front/src/components/ui/Pills.vue          |  2 +-
 front/src/components/ui/button/Options.vue |  1 -
 front/src/components/ui/input.scss         | 17 +++++++-------
 front/src/style/colors.scss                |  2 +-
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index ed443c01c..d3edb9afd 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -7,16 +7,23 @@ import { color } from "~/composables/color.ts";
 import Button from "~/components/ui/Button.vue"
 import Layout from "~/components/ui/Layout.vue"
 
-const { icon, placeholder, ...restProps } = defineProps<{
-  icon?: string,
-  placeholder?: string,
-  password?: true,
-  search?: true,
-  numeric?: true,
-  label?: string,
+const props = withDefaults(
+  defineProps<{
+    icon?: string;
+    placeholder?: string;
+    password?: true;
+    search?: true;
+    numeric?: true;
+    label?: string;
+    autofocus?: boolean;
+    raised?: boolean;
+  }>(),
+  {
+    raised: false, // Default value
+  }
+);
 
-  autofocus? : boolean
-}>()
+const { icon, placeholder, ...restProps } = props;
 
 // TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
 // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
@@ -60,7 +67,7 @@ const model = defineModel<string|number>()
     </span>
 
     <input
-    v-bind="{...$attrs, ...attributes, ...color({}, ['default', 'raised', 'solid', 'secondary'])()}"
+    v-bind="{...$attrs, ...attributes, ...color(props, ['solid', 'default', 'secondary'])()}"
     v-model="model"
     ref="input"
     :placeholder="placeholder"
diff --git a/front/src/components/ui/Pills.vue b/front/src/components/ui/Pills.vue
index e74799df5..37521bb7d 100644
--- a/front/src/components/ui/Pills.vue
+++ b/front/src/components/ui/Pills.vue
@@ -65,7 +65,7 @@ const deselectPill = (value:string) =>
     <!-- List of Pills -->
 
     <Layout flex gap-8
-      v-bind="color({}, ['solid', 'default', 'raised'])()"
+      v-bind="color({}, ['solid', 'default', 'secondary'])()"
       :class="$style.list"
     >
       <Pill outline raised
diff --git a/front/src/components/ui/button/Options.vue b/front/src/components/ui/button/Options.vue
index a7263542e..9b3f539be 100644
--- a/front/src/components/ui/button/Options.vue
+++ b/front/src/components/ui/button/Options.vue
@@ -7,7 +7,6 @@ import Button from '../Button.vue'
     icon="bi-three-dots-vertical"
     class="options-button"
     secondary
-    raised
     round
   />
 </template>
diff --git a/front/src/components/ui/input.scss b/front/src/components/ui/input.scss
index 1c0f9ff58..5b7ded67e 100644
--- a/front/src/components/ui/input.scss
+++ b/front/src/components/ui/input.scss
@@ -6,21 +6,22 @@
   --padding: 16px;
 
   > input {
-    background-color: var(--fw-bg-color);
-    box-shadow: inset 0 0 0 4px var(--fw-border-color);
-    outline: none;
-    border:none;
+    border: none !important;
     width: 100%;
-    padding: 9px 16px;
-    padding: calc(var(--padding-v) - 1px) var(--padding) calc(var(--padding-v) + 1px) var(--padding);
-
+    padding: 10px 16px;
     font-size: 14px;
     font-family: $font-main;
     line-height: 28px;
-    border: none;
     border-radius: var(--fw-border-radius);
     cursor: text;
 
+    @include light-theme {
+        &.raised {
+          background-color: #ffffff;
+          border-color: var(--border-color);
+        }
+    }
+
     &:hover {
       box-shadow: inset 0 0 0 4px var(--border-color);
     }
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 680c1198d..07b805557 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -130,7 +130,7 @@
   .secondary {
     --color: var(--fw-gray-700);
     --background-color: var(--fw-gray-200);
-    --border-color:var(--fw-gray-700);
+    --border-color:var(--fw-gray-300);
 
     --hover-color:var(--fw-gray-800);
     --hover-background-color:var(--fw-gray-300);