From 81e93c57a79d585fa05ec853cf4f56e92f617c20 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 22 Jan 2025 16:48:59 +0530
Subject: [PATCH] feat: update paywall modal with new color

---
 .../settings/components/BasePaywallModal.vue  | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue
index 36a6b3b8e..e2b552d52 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue
@@ -1,4 +1,7 @@
 <script setup>
+import Icon from 'next/icon/Icon.vue';
+import ButtonV4 from 'next/button/Button.vue';
+
 defineProps({
   featurePrefix: {
     type: String,
@@ -23,56 +26,44 @@ const emit = defineEmits(['upgrade']);
 
 <template>
   <div
-    class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
+    class="flex flex-col max-w-md px-6 py-6 border shadow bg-n-solid-1 rounded-xl border-n-weak"
   >
     <div class="flex items-center w-full gap-2 mb-4">
       <span
-        class="flex items-center justify-center w-6 h-6 rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+        class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
       >
-        <fluent-icon
-          size="14"
-          class="flex-shrink-0 text-woot-500 dark:text-woot-500"
-          icon="lock-closed"
+        <Icon
+          class="flex-shrink-0 text-n-brand size-[14px]"
+          icon="i-lucide-lock-keyhole"
         />
       </span>
-      <span class="text-base font-medium text-slate-900 dark:text-white">
+      <span class="text-base font-medium text-n-slate-12">
         {{ $t(`${featurePrefix}.PAYWALL.TITLE`) }}
       </span>
     </div>
     <p
-      class="text-sm font-normal"
+      class="text-sm font-normal text-n-slate-11"
       v-html="$t(`${featurePrefix}.${i18nKey}.AVAILABLE_ON`)"
     />
-    <p class="text-sm font-normal">
+    <p class="text-sm font-normal text-n-slate-11">
       {{ $t(`${featurePrefix}.${i18nKey}.UPGRADE_PROMPT`) }}
       <span v-if="!isOnChatwootCloud && !isSuperAdmin">
         {{ $t(`${featurePrefix}.ENTERPRISE_PAYWALL.ASK_ADMIN`) }}
       </span>
     </p>
     <template v-if="isOnChatwootCloud">
-      <woot-button
-        color-scheme="primary"
-        class="w-full mt-2 text-center rounded-xl"
-        size="expanded"
-        is-expanded
-        @click="emit('upgrade')"
-      >
+      <ButtonV4 blue solid md @click="emit('upgrade')">
         {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}
-      </woot-button>
-      <span class="mt-2 text-xs tracking-tight text-center">
+      </ButtonV4>
+      <span class="mt-2 text-xs tracking-tight text-center text-n-slate-11">
         {{ $t(`${featurePrefix}.PAYWALL.CANCEL_ANYTIME`) }}
       </span>
     </template>
     <template v-else-if="isSuperAdmin">
       <a href="/super_admin" class="block w-full">
-        <woot-button
-          color-scheme="primary"
-          class="w-full mt-2 text-center rounded-xl"
-          size="expanded"
-          is-expanded
-        >
+        <ButtonV4 solid blue md class="w-full">
           {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}
-        </woot-button>
+        </ButtonV4>
       </a>
     </template>
   </div>