feat: Dark Mode (#7471)

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -4,11 +4,11 @@
       :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
     />
-    <form class="row" @submit.prevent="addCustomAttribute">
+    <form class="w-full" @submit.prevent="addCustomAttribute">
       <woot-input
         v-model.trim="attributeName"
         :class="{ error: $v.attributeName.$error }"
-        class="medium-12 columns"
+        class="w-full"
         :error="attributeNameError"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
@@ -16,11 +16,11 @@
       />
       <woot-input
         v-model.trim="attributeValue"
-        class="medium-12 columns"
+        class="w-full"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
       />
-      <div class="modal-footer">
+      <div class="flex justify-end items-center py-2 px-0 gap-2">
         <woot-button
           :is-disabled="$v.attributeName.$invalid || isCreating"
           :is-loading="isCreating"

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -57,52 +57,36 @@ export default {
 
 <style lang="scss" scoped>
 .option-item--user {
-  display: flex;
-  align-items: center;
+  @apply flex items-center;
 }
 .user-identifier {
-  font-size: var(--font-size-mini);
-  margin-left: var(--space-micro);
-  color: var(--s-700);
+  @apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
 }
 .option__user-data {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin-left: var(--space-small);
-  margin-right: var(--space-small);
+  @apply flex flex-col flex-grow ml-2 mr-2;
 }
 .option__body,
 .option__title {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  line-height: 1.2;
-  font-size: var(--font-size-small);
+  @apply flex items-center justify-start leading-[1.2] text-sm;
 }
 .option__body .icon {
-  position: relative;
-  top: 1px;
-  margin-right: var(--space-micro);
+  @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
 }
 .option__title {
-  font-weight: var(--font-weight-medium);
-  margin-bottom: var(--space-micro);
+  @apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
 }
 .option__body {
-  font-size: var(--font-size-mini);
-  color: var(--s-700);
+  @apply text-xs text-slate-700 dark:text-slate-100 mt-1;
 }
 
 .option__user-data .option__body {
   > .phone-icon-wrap,
   > .email-icon-wrap {
-    width: auto;
+    @apply w-auto flex items-center;
   }
 }
 
 .merge-contact--icon {
-  margin-bottom: var(--space-minus-micro);
-  margin-right: var(--space-micro);
+  @apply -mb-0.5 mr-0.5;
 }
 </style>

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -173,62 +173,52 @@ export default {
 
 <style lang="scss" scoped>
 .child-contact-wrap {
-  display: flex;
-  width: 100%;
+  @apply flex w-full;
 }
 .child-contact {
-  flex: 1 0 0;
-  min-width: 0;
+  @apply min-w-0 flex-grow flex-shrink-0;
 }
 .child-arrow {
-  width: var(--space-larger);
-  position: relative;
-  font-size: var(--font-size-default);
-  color: var(--color-border-dark);
+  @apply w-8 relative text-base text-slate-100 dark:text-slate-600;
 }
 .multiselect {
-  margin-bottom: var(--space-small);
+  @apply mb-2;
 }
 .child-contact {
-  margin-top: var(--space-smaller);
+  @apply mt-1;
 }
 .child-arrow::after {
-  content: '';
-  height: var(--space-larger);
-  width: 0;
-  left: var(--space-two);
-  position: absolute;
-  border-left: 1px solid var(--color-border-dark);
+  @apply content-[''] h-12 w-0 left-5 absolute border-l border-solid border-slate-100 dark:border-slate-600;
 }
 
 .child-arrow::before {
-  content: '';
-  height: 0;
-  width: var(--space-normal);
-  left: var(--space-two);
-  top: var(--space-larger);
-  position: absolute;
-  border-bottom: 1px solid var(--color-border-dark);
+  @apply content-[''] h-0 w-4 left-5 top-12 absolute border-b border-solid border-slate-100 dark:border-slate-600;
 }
 
 .up {
-  position: absolute;
-  top: var(--space-minus-smaller);
-  left: var(--space-slab);
+  @apply absolute -top-1 left-3;
 }
 
 .footer {
-  margin-top: var(--space-medium);
-  display: flex;
-  justify-content: flex-end;
+  @apply mt-6 flex justify-end;
 }
 
 /* TDOD: Clean errors in forms style */
 .error .message {
-  margin-top: 0;
+  @apply mt-0;
 }
 
 .label--merge-warning {
-  margin-left: var(--space-small);
+  @apply ml-2;
+}
+
+::v-deep {
+  .multiselect {
+    @apply rounded-md;
+  }
+
+  .multiselect__tags {
+    @apply h-[52px];
+  }
 }
 </style>