From e786eac87dbec269ed5a99fdcafa7602cd74bea1 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Mon, 9 Sep 2024 18:21:09 +0100
Subject: [PATCH] Resolve the ui changes issues (#10955)

---
 .../change-plan-dialog.component.html         | 29 +++++++++++++------
 apps/web/src/locales/en/messages.json         | 19 +++++++-----
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
index d643c41e0ff..02071f5aa8c 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
@@ -4,7 +4,7 @@
       {{ "upgradeFreeOrganization" | i18n: currentPlanName }}
     </span>
     <div bitDialogContent>
-      <p>{{ "upgradePlan" | i18n }}</p>
+      <p>{{ "upgradePlans" | i18n }}</p>
       <div class="tw-mb-3 tw-flex tw-justify-between">
         <span class="tw-text-lg tw-pr-1 tw-font-bold">{{ "selectAPlan" | i18n }}</span>
         <div class="tw-items-center tw-gap-2">
@@ -52,9 +52,21 @@
             tabindex="0"
           >
             <div class="tw-relative">
-              <div class="tw-px-2 tw-py-4">
+              <div
+                *ngIf="selectableProduct === selectedPlan"
+                class="tw-bg-primary-600 tw-text-center !tw-text-contrast tw-text-sm tw-font-bold tw-py-1 group-hover:tw-bg-primary-700"
+              >
+                {{ "recommended" | i18n }}
+              </div>
+              <div
+                class="tw-px-2 tw-py-4"
+                [ngClass]="{
+                  'tw-py-1': !(selectableProduct === selectedPlan),
+                  'tw-py-0': selectableProduct === selectedPlan,
+                }"
+              >
                 <h3 class="tw-text-lg tw-font-bold">
-                  <span class="tw-uppercase">{{
+                  <span class="tw-capitalize">{{
                     selectableProduct.nameLocalizationKey | i18n
                   }}</span>
                   <span bitBadge variant="secondary" *ngIf="selectableProduct === currentPlan">
@@ -73,9 +85,8 @@
                         ) | currency: "$"
                       }}
                     </b>
+                    <span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
                     <b class="tw-text-sm tw-font-semibold">
-                      /{{ "month" | i18n }}
-                      {{ "includesXMembers" | i18n: selectableProduct.PasswordManager.baseSeats }}
                       <ng-container
                         *ngIf="selectableProduct.PasswordManager.hasAdditionalSeatsOption"
                       >
@@ -108,7 +119,7 @@
                               | currency: "$")
                     }}
                   </b>
-                  <b class="tw-text-sm tw-font-semibold"> /{{ "monthPerMember" | i18n }}</b>
+                  <span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
                 </span>
                 <span *ngIf="selectableProduct.productTier == productTypes.Free"
                   >{{ "freeForever" | i18n }}
@@ -125,7 +136,7 @@
               <p class="tw-text-xs tw-px-2 tw-font-semibold" *ngIf="organization.useSecretsManager">
                 {{ "bitwardenPasswordManager" | i18n }}
               </p>
-              <p class="tw-text-xs tw-px-2">{{ "upgradeEnterpriseMessage" | i18n }}</p>
+              <p class="tw-text-xs tw-px-2">{{ "enterprisePlanUpgradeMessage" | i18n }}</p>
 
               <ul class="bwi-ul tw-text-xs">
                 <li>
@@ -193,13 +204,13 @@
                   *ngIf="selectableProduct.productTier === productTypes.Teams"
                   class="tw-text-xs tw-px-2"
                 >
-                  {{ "upgradeTeamsMessage" | i18n }}
+                  {{ "teamsPlanUpgradeMessage" | i18n }}
                 </p>
                 <p
                   *ngIf="selectableProduct.productTier === productTypes.Families"
                   class="tw-text-xs tw-px-2"
                 >
-                  {{ "upgradeFamilyMessage" | i18n }}
+                  {{ "familyPlanUpgradeMessage" | i18n }}
                 </p>
                 <ul
                   class="bwi-ul tw-text-xs"
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 53ab34478a3..6834e350155 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -4035,6 +4035,9 @@
   "selected": {
     "message": "Selected"
   },
+  "recommended": {
+    "message": "Recommended"
+  },
   "ownership": {
     "message": "Ownership"
   },
@@ -8980,8 +8983,8 @@
       }
     }
   },
-  "upgradePlan": {
-    "message": "Upgrade your plan to invite more members and gain access to additional Bitwarden features"
+  "upgradePlans": {
+    "message": "Upgrade your plan to invite members and experience powerful security features."
   },
   "upgradeDiscount": {
     "message": "Save $AMOUNT$%",
@@ -8992,11 +8995,11 @@
       }
     }
   },
-  "upgradeEnterpriseMessage": {
-    "message": "Advanced capabilities for larger businesses"
+  "enterprisePlanUpgradeMessage": {
+    "message": "Advanced capabilities for larger organizations"
   },
-  "upgradeTeamsMessage": {
-    "message": "Businesses looking for powerful security"
+  "teamsPlanUpgradeMessage": {
+    "message": "Resilient protection for growing teams"
   },
   "teamsInviteMessage": {
     "message": "Invite unlimited members"
@@ -9007,8 +9010,8 @@
   "syncGroupsAndUsersFromDirectory": {
     "message": "Sync groups and users from a directory"
   },
-  "upgradeFamilyMessage": {
-    "message": "Share with families and friends"
+  "familyPlanUpgradeMessage": {
+    "message": "Secure your family logins"
   },
   "accessToPremiumFeatures": {
     "message": "Access to Premium features"