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>