fix disabled input dark mode (#622)

Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Nov 21, 2024 · 5870c44 · 5870c44
1 parent 9bd069f
commit 5870c44
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 12 deletions.
diff --git a/client/components/forms/CodeInput.client.vue b/client/components/forms/CodeInput.client.vue
@@ -14,7 +14,7 @@
         theme.CodeInput.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
     >

diff --git a/client/components/forms/DateInput.vue b/client/components/forms/DateInput.vue
@@ -152,7 +152,7 @@ const updateModelValue = () => {
 const inputClasses = computed(() => {
   const classes = [props.theme.DateInput.input, props.theme.DateInput.borderRadius]
   if (props.disabled) {
-    classes.push('!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200')
+    classes.push('!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800')
   }
   if (input.hasError.value) {
 

diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
@@ -17,7 +17,7 @@
         theme.default.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
     >
@@ -34,7 +34,7 @@
             theme.FlatSelectInput.fontSize,
             theme.FlatSelectInput.option,
             {
-              '!cursor-not-allowed !bg-gray-200': disableOptions.includes(option[optionKey]),
+              '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disableOptions.includes(option[optionKey]),
             },
           ]"
           @click="onSelect(option[optionKey])"

diff --git a/client/components/forms/MentionInput.vue b/client/components/forms/MentionInput.vue
@@ -23,7 +23,7 @@
           theme.default.fontSize,
           {
             '!ring-red-500 !ring-2 !border-transparent': hasError,
-            '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+            '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
           },
           'pr-12'
         ]"

diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
@@ -65,7 +65,7 @@
           theme.PhoneInput.borderRadius,
           {
             '!ring-red-500 !ring-2': hasError,
-            '!cursor-not-allowed !bg-gray-200': disabled,
+            '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
           },
         ]"
         :placeholder="placeholder"

diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
@@ -9,7 +9,7 @@
       :class="[
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,

diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
@@ -14,7 +14,7 @@
         theme.SignatureInput.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
       class="flex flex-wrap items-center justify-center gap-4"
@@ -50,7 +50,7 @@
         theme.SignatureInput.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
       height="150px"

diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
@@ -16,7 +16,7 @@
         theme.default.fontSize,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
       class="resize-y block"

diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
@@ -20,7 +20,7 @@
         theme.default.fontSize,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
         },
       ]"
       :name="name"

diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
@@ -12,7 +12,7 @@
         theme.SelectInput.borderRadius,
         { 
           '!ring-red-500 !ring-2 !border-transparent': hasError, 
-          '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
           'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError
         },
         inputClass