fix: Change input error highlight aesthetics (#239)

Hanziness · May 30, 2022 · 79c95f1 · 79c95f1
1 parent d542cf6
commit 79c95f1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/components/base/inputText.vue b/components/base/inputText.vue
@@ -1,7 +1,7 @@
 <template>
   <input
     v-model="displayValue"
-    :class="['form-input w-full text-right', { 'ring-yellow-600 focus:ring-yellow-600': $v.internalData.$anyError }]"
+    :class="['form-input w-full text-right', { 'border-yellow-300 ring ring-yellow-300 focus:ring-yellow-300': $v.internalData.$anyError }]"
     type="text"
   >
 </template>

diff --git a/components/settings/baseSettingsItem.vue b/components/settings/baseSettingsItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="visible" :class="['transition-all -m-1 p-1 rounded-lg', { 'opacity-50 cursor-default pointer-events-none': disabled, 'ring ring-yellow-200 bg-yellow-100': isError }]" :disabled="disabled" :aria-disabled="disabled">
+  <div v-show="visible" :class="['transition-all -m-1 p-1 rounded-lg', { 'opacity-50 cursor-default pointer-events-none': disabled }]" :disabled="disabled" :aria-disabled="disabled">
     <div class="flex flex-row items-center my-1">
       <div v-if="!!$slots['icon']" class="w-12 text-left">
         <slot name="icon" />
@@ -10,24 +10,24 @@
             {{ $i18n.t(translationKey + '._title') }}
           </slot>
         </div>
-        <div v-if="showDescription" class="text-black text-opacity-75 dark:text-gray-50 dark:text-opacity-75 text-sm leading-snug">
+        <div v-if="showDescription" class="text-sm leading-snug text-black text-opacity-75 dark:text-gray-50 dark:text-opacity-75">
           <slot name="item-subtitle" class="break-words">
             {{ $i18n.t(translationKey + '._description') }}
           </slot>
         </div>
       </div>
       <div class="w-24 text-right">
         <!-- v-if="!!$slots['content-action']"  -->
-        <slot name="content-action" :settingsValue="settingsValue" :errorValue="errorValue" />
+        <slot name="content-action" :settings-value="settingsValue" :error-value="errorValue" />
       </div>
     </div>
 
     <!-- Content to show below the title and description -->
     <div class="flex flex-col w-full">
-      <slot name="content-main" :settingsValue="settingsValue" />
+      <slot name="content-main" :settings-value="settingsValue" />
     </div>
-    <slot name="content-error" :errorValue="errorValue">
-      <div v-show="isError" class="mt-1 text-yellow-700 flex flex-row space-x-1 items-center">
+    <slot name="content-error" :error-value="errorValue">
+      <div v-show="isError" class="flex flex-row items-center gap-1 px-2 py-1 mt-1 text-black bg-yellow-300 rounded-2xl">
         <ErrorIcon />
         <span v-text="errorValue" />
       </div>