[PM-24581] new styling for premium badge (#17793)

* [PM-24581] new styling for premium badge

* stories file

* translations for browser and desktop

* design review feedback

* color fixes, thanks claude

apps/browser/src/_locales/en/messages.json

@@ -5934,5 +5934,8 @@
   },
   "sessionTimeoutSettingsSetUnlockMethodToChangeTimeoutAction": {
     "message": "Set an unlock method to change your timeout action"
+  },
+  "upgrade": {
+    "message": "Upgrade"
   }
 }

apps/desktop/src/locales/en/messages.json

@@ -4380,5 +4380,8 @@
   },
   "sessionTimeoutSettingsSetUnlockMethodToChangeTimeoutAction": {
     "message": "Set an unlock method to change your timeout action"
+  },
+  "upgrade": {
+    "message": "Upgrade"
   }
 }

libs/angular/src/billing/components/premium-badge/premium-badge.component.ts

@@ -14,10 +14,11 @@ import { BadgeModule } from "@bitwarden/components";
       type="button"
       *appNotPremium
       bitBadge
-      variant="success"
+      [variant]="'primary'"
+      class="!tw-text-primary-600 !tw-border-primary-600"
       (click)="promptForPremium($event)"
     >
-      {{ "premium" | i18n }}
+      <i class="bwi bwi-premium tw-pe-1"></i>{{ "upgrade" | i18n }}
     </button>
   `,
   imports: [BadgeModule, JslibModule],

libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts

@@ -29,7 +29,7 @@ export default {
           provide: I18nService,
           useFactory: () => {
             return new I18nMockService({
-              premium: "Premium",
+              upgrade: "Upgrade",
             });
           },
         },

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -122,7 +122,7 @@
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.totp">
       <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
-        <div class="tw-flex tw-items-center tw-gap-3">
+        <div class="tw-flex tw-items-center tw-gap-2">
           {{ "verificationCodeTotp" | i18n }}
           <app-premium-badge [organizationId]="cipher.organizationId"></app-premium-badge>
         </div>