chore: Update element background colors

Update the background colors of various elements in the app to improve visual consistency. This includes adding new CSS variables for background colors and applying them to specific components.
Perdolique · Aug 24, 2024 · afcbebd · afcbebd
1 parent 3a7ad7c
commit afcbebd
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 26 deletions.
diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss
@@ -96,4 +96,9 @@
   // Extra small inputs
   --input-extra-small-height: 1.5rem;
   --input-extra-small-border-radius: 0.5rem;
+
+   // Other elements
+   --element-color-background: ghostwhite;
+   --element-color-background-hover: #f0fafb;
+   --element-color-background-active: #d8f2f5;
 }
diff --git a/app/components/PerdSearch/DefaultOption.vue b/app/components/PerdSearch/DefaultOption.vue
@@ -37,20 +37,5 @@
     align-items: center;
     height: var(--input-height);
     padding: 0 var(--input-spacing-horizontal);
-    transition: background-color 0.15s ease-out;
-    cursor: pointer;
-
-    &:hover {
-      background-color: color-mix(in srgb, var(--input-color-main) 15%, transparent)
-    }
-
-    &:global(.empty) {
-      color: var(--input-color-placeholder);
-
-      &:hover {
-        background-color: initial;
-        cursor: initial;
-      }
-    }
   }
 </style>
diff --git a/app/components/PerdSearch/PerdSearch.vue b/app/components/PerdSearch/PerdSearch.vue
@@ -35,6 +35,7 @@
           v-for="(option, index) in options"
           :key="index"
           @click="handleOptionClick"
+          :class="$style.option"
         >
           <slot name="option" :option="option">
             <DefaultOption
@@ -274,4 +275,14 @@
       border-color: var(--input-color-focus);
     }
   }
+
+  .option {
+    background-color: var(--element-color-background);
+    cursor: pointer;
+    transition: background-color 0.15s ease-out;
+
+    &:hover {
+      background-color: var(--element-color-background-hover);
+    }
+  }
 </style>
diff --git a/app/components/PerdSearch/SearchOptionAdd.vue b/app/components/PerdSearch/SearchOptionAdd.vue
@@ -24,12 +24,6 @@
     column-gap: var(--spacing-16);
     justify-content: space-between;
     padding: 0 var(--input-spacing-horizontal);
-    cursor: pointer;
-    transition: background-color 0.15s ease-out;
-
-    &:hover {
-      background-color: var(--input-color-hover-bg);
-    }
   }
 
   .name {

diff --git a/app/components/checklists/ChecklistItem.vue b/app/components/checklists/ChecklistItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[$style.component, { checkMode }]"
+    :class="[$style.component, { checkMode, toggled: isToggled }]"
     @click="onItemClick"
   >
     <PerdToggle
@@ -48,7 +48,14 @@
   const { removeItem } = useChecklistStore()
   const isViewMode = computed(() => props.checkMode === false)
   const { state: toggledState } = useChecklistToggle(props.checklistId)
-  const isToggled = computed(() => toggledState.value[props.item.id] ?? false)
+
+  const isToggled = computed(() => {
+    if (props.checkMode) {
+      return toggledState.value[props.item.id] ?? false
+    }
+
+    return false
+  })
 
   async function handleRemoveClick() {
     await removeItem(props.checklistId, props.item.id)
@@ -69,7 +76,7 @@
     column-gap: var(--spacing-12);
     align-items: center;
     padding: 0 var(--spacing-12);
-    background-color: var(--color-blue-100);
+    background-color: var(--element-color-background);
     border: 1px solid var(--color-blue-300);
     border-radius: var(--border-radius-12);
     font-size: var(--font-size-16);
@@ -81,7 +88,15 @@
       transition: background-color var(--transition-time-quick) ease-out;
 
       &:hover {
-        background-color: var(--color-blue-200);
+        background-color: var(--element-color-background-hover);
+      }
+    }
+
+    &:global(.toggled) {
+      background-color: var(--element-color-background-active);
+
+      &:hover {
+        background-color: var(--element-color-background-active);
       }
     }
   }

diff --git a/app/components/checklists/ChecklistsItem.vue b/app/components/checklists/ChecklistsItem.vue
@@ -24,6 +24,7 @@
     display: flex;
     align-items: center;
     height: 60px;
+    background-color: var(--element-color-background);
     padding: 0 var(--spacing-16);
     border: 1px solid var(--input-color-main);
     border-radius: var(--border-radius-16);

diff --git a/app/components/equipment/EmptyContent.vue b/app/components/equipment/EmptyContent.vue
@@ -19,5 +19,6 @@
     column-gap: var(--spacing-8);
     padding: var(--spacing-32);
     color: var(--input-color-main);
+    background-color: var(--element-color-background);
   }
 </style>
diff --git a/app/components/equipment/EquipmentTable.vue b/app/components/equipment/EquipmentTable.vue
@@ -108,10 +108,11 @@
     height: 48px;
 
     .body > & {
+      background-color: var(--element-color-background);
       transition: background-color 0.2s ease-out;
 
       &:hover {
-        background-color: #e5e5e5;
+        background-color: var(--element-color-background-hover);
       }
     }
   }