changed input styles

frontend/components/global/Input.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 type Props = {
     variant?: "solid" | "outlined";
     disabled?: boolean;
@@ -12,7 +11,7 @@ type Props = {
 // props
 
 const props = withDefaults(defineProps<Props>(), {
-    variant: "solid"
+    variant: "solid",
 });
 const { variant, message, error, disabled } = toRefs(props);
 
@@ -28,15 +27,15 @@ const inputRef = ref<HTMLInputElement | null>(null);
 
 const classes = computed(() => {
     return [
-        "flex items-center justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3 rounded-100",
+        "flex items-center text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100",
         {
             "input-solid": variant.value === "solid",
             "input-outlined": variant.value === "outlined",
             "input-effects": !error.value,
             [variant.value === "solid"
                 ? "input-solid-error"
-                : "input-outlined-error"]: error.value
-        }
+                : "input-outlined-error"]: error.value,
+        },
     ];
 });
 
@@ -45,7 +44,6 @@ const classes = computed(() => {
 const onInput = (e: any) => {
     emit("update:modelValue", e.target.value);
 };
-
 </script>
 
 <template>
@@ -56,7 +54,7 @@ const onInput = (e: any) => {
             :value="modelValue"
             @input="onInput"
             ref="inputRef"
-            class="outline-none flex-1"
+            class="outline-none flex-1 text-sm placeholder-slate-400"
             :placeholder="placeholder"
         />