feat: Dark Mode (#7471)

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="dropdown-search-wrap">
-    <div class="dropdown-title-container">
-      <h4 class="text-block-title">
+  <div class="flex flex-col w-full max-h-[12.5rem]">
+    <div class="flex items-center justify-center mb-1">
+      <h4
+        class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
+      >
         {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
       </h4>
       <hotkey>L</hotkey>
     </div>
-    <div class="search-wrap">
+    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -16,8 +18,10 @@
         :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
       />
     </div>
-    <div class="list-wrap">
-      <div class="list">
+    <div
+      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
+    >
+      <div class="w-full">
         <woot-dropdown-menu>
           <label-dropdown-item
             v-for="label in filteredActiveLabels"
@@ -28,10 +32,16 @@
             @click="onAddRemove(label)"
           />
         </woot-dropdown-menu>
-        <div v-if="noResult" class="no-result">
+        <div
+          v-if="noResult"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+        >
           {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
         </div>
-        <div v-if="allowCreation && shouldShowCreate" class="new-label">
+        <div
+          v-if="allowCreation && shouldShowCreate"
+          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+        >
           <woot-button
             size="small"
             variant="clear"
@@ -171,88 +181,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dropdown-title-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-smaller);
-
-  .text-block-title {
-    flex-grow: 1;
-    margin: 0;
-  }
-
-  .hotkey {
-    flex-shrink: 0;
-  }
+.hotkey {
+  @apply flex-shrink-0;
 }
 
-.dropdown-search-wrap {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-height: 12.5rem;
+.search-input {
+  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
+}
 
-  .search-wrap {
-    margin-bottom: var(--space-small);
-    flex: 0 0 auto;
-    max-height: var(--space-large);
+.button-new-label {
+  @apply whitespace-nowrap text-ellipsis overflow-hidden items-center;
 
-    .search-input {
-      margin: 0;
-      width: 100%;
-      border: 1px solid transparent;
-      height: var(--space-large);
-      font-size: var(--font-size-small);
-      padding: var(--space-small);
-      background-color: var(--color-background);
-    }
-
-    input:focus {
-      outline: 1px solid var(--color-border-dark);
-    }
-  }
-
-  .list-wrap {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    overflow: auto;
-
-    .list {
-      width: 100%;
-    }
-
-    .no-result {
-      display: flex;
-      justify-content: center;
-      color: var(--s-700);
-      padding: var(--space-normal) var(--space-one);
-      font-weight: var(--font-weight-medium);
-      font-size: var(--font-size-mini);
-    }
-
-    .new-label {
-      display: flex;
-      padding-top: var(--space-smaller);
-      border-top: 1px solid var(--s-100);
-
-      .button-new-label {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        align-items: center;
-
-        .icon {
-          min-width: 0;
-        }
-      }
-
-      .search-term {
-        color: var(--s-700);
-      }
-    }
+  .icon {
+    @apply min-w-0;
   }
 }
 </style>

app/javascript/shared/components/ui/label/LabelDropdownItem.vue

@@ -47,54 +47,38 @@ export default {
 
 <style lang="scss" scoped>
 .item-wrap {
-  display: flex;
+  @apply flex;
 
   ::v-deep .button__content {
-    width: 100%;
+    @apply w-full;
   }
 
   .button-wrap {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+    @apply flex justify-between w-full;
 
     &.active {
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      color: var(--w-700);
+      @apply flex font-semibold text-woot-700 dark:text-woot-600;
     }
 
     .name-label-wrap {
-      display: flex;
-      min-width: 0;
-      width: 100%;
+      @apply flex min-w-0 w-full;
 
       .label-color--display {
-        margin-right: var(--space-small);
+        @apply mr-2 rtl:mr-0 rtl:ml-2;
       }
 
       .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.1;
-        padding-right: var(--space-small);
+        @apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
       }
 
       .icon {
-        font-size: var(--font-size-small);
+        @apply text-sm;
       }
     }
   }
 
   .label-color--display {
-    border-radius: var(--border-radius-normal);
-    height: var(--space-slab);
-    margin-right: var(--space-smaller);
-    margin-top: var(--space-micro);
-    min-width: var(--space-slab);
-    width: var(--space-slab);
-    border: 1px solid var(--color-border-light);
+    @apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
   }
 }
 </style>