feat: Dark Mode (#7471)

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="medium-12 columns">
+  <div class="w-full">
     <textarea
       v-model="processedString"
       rows="4"
@@ -119,55 +119,40 @@ export default {
 
 <style scoped lang="scss">
 .template__variables-container {
-  padding: var(--space-one);
+  @apply p-2.5;
 }
 
 .variables-label {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-one);
+  @apply text-sm font-semibold mb-2.5;
 }
 
 .template__variable-item {
-  align-items: center;
-  display: flex;
-  margin-bottom: var(--space-one);
+  @apply items-center flex mb-2.5;
 
   .label {
-    font-size: var(--font-size-mini);
+    @apply text-xs;
   }
 
   .variable-input {
-    flex: 1;
-    font-size: var(--font-size-small);
-    margin-left: var(--space-one);
+    @apply flex-1 text-sm ml-2.5;
   }
 
   .variable-label {
-    background-color: var(--s-75);
-    border-radius: var(--border-radius-normal);
-    display: inline-block;
-    font-size: var(--font-size-mini);
-    padding: var(--space-one) var(--space-medium);
+    @apply bg-slate-75 dark:bg-slate-700 text-slate-700 dark:text-slate-100 inline-block rounded-md text-xs py-2.5 px-6;
   }
 }
 
 footer {
-  display: flex;
-  justify-content: flex-end;
+  @apply flex justify-end;
 
   button {
-    margin-left: var(--space-one);
+    @apply ml-2.5;
   }
 }
 .error {
-  background-color: var(--r-100);
-  border-radius: var(--border-radius-normal);
-  color: var(--r-800);
-  padding: var(--space-one);
-  text-align: center;
+  @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
 }
 .template-input {
-  background-color: var(--s-25);
+  @apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="medium-12 columns">
+  <div class="w-full">
     <div class="templates__list-search">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
@@ -96,61 +96,35 @@ export default {
 
 <style scoped lang="scss">
 .flex-between {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--space-one);
+  @apply flex justify-between mb-2.5;
 }
 
 .templates__list-search {
-  align-items: center;
-  background-color: var(--s-25);
-  border-radius: var(--border-radius-medium);
-  border: 1px solid var(--s-100);
-  display: flex;
-  margin-bottom: var(--space-one);
-  padding: 0 var(--space-one);
+  @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
 
   .search-icon {
-    color: var(--s-400);
+    @apply text-slate-400 dark:text-slate-300;
   }
 
   .templates__search-input {
-    background-color: transparent;
-    border: var(--space-large);
-    font-size: var(--font-size-mini);
-    height: unset;
-    margin: var(--space-zero);
+    @apply bg-transparent border-0 text-xs h-auto m-0;
   }
 }
 .template__list-container {
-  background-color: var(--s-25);
-  border-radius: var(--border-radius-medium);
-  max-height: 18.75rem;
-  overflow-y: auto;
-  padding: var(--space-one);
+  @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
 
   .template__list-item {
-    border-radius: var(--border-radius-medium);
-    cursor: pointer;
-    display: block;
-    padding: var(--space-one);
-    text-align: left;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--w-50);
-    }
+    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-600;
 
     .label-title {
-      font-size: var(--font-size-small);
+      @apply text-sm;
     }
 
     .label-category {
-      margin-top: var(--space-two);
+      @apply mt-5;
 
       span {
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-bold);
+        @apply text-sm font-semibold;
       }
     }
 
@@ -161,13 +135,10 @@ export default {
 }
 
 .strong {
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-bold);
+  @apply text-xs font-semibold;
 }
 
 hr {
-  border-bottom: 1px solid var(--s-100);
-  margin: var(--space-one) auto;
-  max-width: 95%;
+  @apply border-b border-solid border-slate-100 dark:border-slate-700 my-2.5 mx-auto max-w-[95%];
 }
 </style>