feat: cleanup plan summary

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -421,11 +421,11 @@
       "USAGE_BASED_INFO": "Usage-based pricing: Credits are consumed as you use Chatwoot features."
     },
     "PLAN_SUMMARY": {
-      "TITLE": "Plan Summary",
+      "NAME": "Plan Name",
       "PRICE": "Price",
       "PER_MONTH": "{price}/month",
       "RENEWAL_DATE": "Renewal Date",
-      "CREDITS_INCLUDED": "Credits included/month",
+      "CREDITS_INCLUDED": "Captain AI Credits Included",
       "NUMBER_OF_SEATS": "Number of Seats",
       "ADJUST_SEATS_HINT": "Adjust seats to scale your plan",
       "UPDATE": "Update",

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/PlanSummary.vue

@@ -74,28 +74,15 @@ const formatNumber = num => {
 </script>
 
 <template>
-  <div
-    class="p-5 rounded-xl outline outline-1 outline-n-weak bg-n-solid-1 mx-5 mt-5"
-  >
-    <div class="flex items-center gap-2 mb-4">
-      <h3 class="text-base font-semibold text-n-slate-12">
-        {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.TITLE') }}
-      </h3>
-      <span
-        class="px-2 py-1 text-xs font-semibold rounded-md bg-n-blue-3 text-n-blue-11 outline outline-1 outline-n-blue-4"
-      >
-        {{ planName }}
-      </span>
-    </div>
-
-    <div class="grid grid-cols-3 gap-6 mb-4">
+  <div class="rounded-xl mx-5 mt-5">
+    <div class="grid grid-cols-4 gap-6 mb-4">
       <div>
         <p class="text-xs text-n-slate-11 mb-1">
-          {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.PRICE') }}
+          {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.NAME') }}
         </p>
-        <div class="flex items-center gap-1">
+        <div class="items-center gap-1">
           <p class="text-lg font-semibold text-n-slate-12 mb-0">
-            {{ formatPrice(totalPrice) }}
+            {{ planName }}
           </p>
           <p class="text-xs text-n-slate-11 mb-0">
             {{
@@ -106,6 +93,16 @@ const formatNumber = num => {
           </p>
         </div>
       </div>
+      <div>
+        <p class="text-xs text-n-slate-11 mb-1">
+          {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.PRICE') }}
+        </p>
+        <div class="flex items-center gap-1">
+          <p class="text-lg font-semibold text-n-slate-12 mb-0">
+            {{ formatPrice(totalPrice) }}
+          </p>
+        </div>
+      </div>
 
       <div>
         <p class="text-xs text-n-slate-11 mb-1">
@@ -121,7 +118,7 @@ const formatNumber = num => {
           {{ t('BILLING_SETTINGS_V2.PLAN_SUMMARY.CREDITS_INCLUDED') }}
         </p>
         <div class="flex items-center gap-1.5">
-          <Icon icon="i-lucide-zap" class="text-n-amber-9" />
+          <Icon icon="i-lucide-sparkles" class="text-n-amber-9" />
           <p class="text-lg font-semibold text-n-slate-12">
             {{ formatNumber(includedCredits) }}
           </p>
@@ -139,9 +136,7 @@ const formatNumber = num => {
       @update-seats="emit('updateSeats', $event)"
     />
 
-    <div
-      class="flex items-center justify-end gap-2 pt-4 border-t border-n-weak"
-    >
+    <div class="flex items-center justify-end gap-2">
       <Button
         variant="faded"
         color="slate"

app/javascript/dashboard/routes/dashboard/settings/billing-v2/components/SeatManager.vue

@@ -126,13 +126,13 @@ const handleIncreaseSeats = () => {
 
 <template>
   <div
-    class="flex items-center justify-between p-4 rounded-lg bg-n-slate-2 dark:bg-n-solid-2"
+    class="flex items-center justify-between p-2.5 rounded-lg bg-n-slate-1 outline outline-1 outline-n-weak dark:bg-n-solid-1"
   >
     <div class="flex items-center gap-3">
       <div
-        class="flex items-center justify-center w-10 h-10 rounded-lg bg-n-blue-3 dark:bg-n-blue-4"
+        class="flex items-center justify-center size-9 rounded-md bg-n-slate-4"
       >
-        <Icon icon="i-lucide-users" class="text-n-blue-11" />
+        <Icon icon="i-lucide-users" class="text-n-slate-11" />
       </div>
       <div>
         <h6 class="text-sm font-semibold text-n-slate-12">