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>