chore: Update buttons in conversation screens - 2 (#11134)

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

@@ -12,7 +12,12 @@ import { ref, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     template: {
       type: Object,
@@ -114,78 +119,47 @@ export default {
       readonly
       class="template-input"
     />
-    <div v-if="variables" class="template__variables-container">
-      <p class="variables-label">
+    <div v-if="variables" class="p-2.5">
+      <p class="text-sm font-semibold mb-2.5">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
       </p>
       <div
         v-for="(variable, key) in processedParams"
         :key="key"
-        class="template__variable-item"
+        class="items-center flex mb-2.5"
       >
-        <span class="variable-label">
+        <span
+          class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+        >
           {{ key }}
         </span>
         <woot-input
           v-model="processedParams[key]"
           type="text"
-          class="variable-input"
+          class="flex-1 text-sm ml-2.5"
           :styles="{ marginBottom: 0 }"
         />
       </div>
-      <p v-if="v$.$dirty && v$.$invalid" class="error">
+      <p
+        v-if="v$.$dirty && v$.$invalid"
+        class="bg-n-ruby-9/20 rounded-md text-n-ruby-9 p-2.5 text-center"
+      >
         {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
       </p>
     </div>
-    <footer>
-      <woot-button variant="smooth" @click="resetTemplate">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
-      </woot-button>
-      <woot-button type="button" @click="sendMessage">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL') }}
-      </woot-button>
+    <footer class="flex justify-end gap-2">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
+        @click="resetTemplate"
+      />
+      <NextButton
+        type="button"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+        @click="sendMessage"
+      />
     </footer>
   </div>
 </template>
-
-<style scoped lang="scss">
-.template__variables-container {
-  @apply p-2.5;
-}
-
-.variables-label {
-  @apply text-sm font-semibold mb-2.5;
-}
-
-.template__variable-item {
-  @apply items-center flex mb-2.5;
-
-  .label {
-    @apply text-xs;
-  }
-
-  .variable-input {
-    @apply flex-1 text-sm ml-2.5;
-  }
-
-  .variable-label {
-    @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 {
-  @apply flex justify-end;
-
-  button {
-    @apply ml-2.5;
-  }
-}
-
-.error {
-  @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
-}
-
-.template-input {
-  @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

@@ -43,48 +43,56 @@ export default {
 
 <template>
   <div class="w-full">
-    <div class="gap-1 templates__list-search">
-      <fluent-icon icon="search" class="search-icon" size="16" />
+    <div
+      class="gap-1 bg-n-alpha-black2 items-center flex mb-2.5 py-0 px-2.5 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus-within:outline-n-brand dark:focus-within:outline-n-brand"
+    >
+      <fluent-icon icon="search" class="text-n-slate-12" size="16" />
       <input
         v-model="query"
         type="search"
         :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
-        class="templates__search-input"
+        class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
       />
     </div>
-    <div class="template__list-container">
+    <div
+      class="bg-n-background outline-n-container outline outline-1 rounded-lg max-h-[18.75rem] overflow-y-auto p-2.5"
+    >
       <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
         <button
-          class="template__list-item"
+          class="rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
           @click="$emit('onSelect', template)"
         >
           <div>
             <div class="flex items-center justify-between mb-2.5">
-              <p class="label-title">
+              <p class="text-sm">
                 {{ template.name }}
               </p>
               <span
-                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+                class="inline-block px-2 py-1 text-xs leading-none bg-n-slate-3 rounded-lg cursor-default text-n-slate-12"
               >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
             </div>
             <div>
-              <p class="strong">
+              <p class="font-medium">
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
               </p>
               <p class="label-body">{{ getTemplatebody(template) }}</p>
             </div>
-            <div class="label-category">
-              <p class="strong">
+            <div class="mt-5">
+              <p class="font-medium">
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
               </p>
               <p>{{ template.category }}</p>
             </div>
           </div>
         </button>
-        <hr v-if="i != filteredTemplateMessages.length - 1" :key="`hr-${i}`" />
+        <hr
+          v-if="i != filteredTemplateMessages.length - 1"
+          :key="`hr-${i}`"
+          class="border-b border-solid border-n-weak my-2.5 mx-auto max-w-[95%]"
+        />
       </div>
       <div v-if="!filteredTemplateMessages.length">
         <p>
@@ -97,46 +105,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.templates__list-search {
-  @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 {
-    @apply text-slate-400 dark:text-slate-300;
-  }
-
-  .templates__search-input {
-    @apply bg-transparent border-0 text-xs h-9 m-0;
-  }
-}
-.template__list-container {
-  @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
-
-  .template__list-item {
-    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-800;
-
-    .label-title {
-      @apply text-sm;
-    }
-
-    .label-category {
-      @apply mt-5;
-
-      span {
-        @apply text-sm font-semibold;
-      }
-    }
-
-    .label-body {
-      font-family: monospace;
-    }
-  }
-}
-
-.strong {
-  @apply text-xs font-semibold;
-}
-
-hr {
-  @apply border-b border-solid border-slate-100 dark:border-slate-700 my-2.5 mx-auto max-w-[95%];
+.label-body {
+  font-family: monospace;
 }
 </style>