From bbf9157ec0b233065f3871a384910c16c9fa5b4d Mon Sep 17 00:00:00 2001
From: Kyle Denney <4227399+kdenney@users.noreply.github.com>
Date: Tue, 9 Dec 2025 09:27:37 -0600
Subject: [PATCH] [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                   | 3 +++
 apps/desktop/src/locales/en/messages.json                    | 3 +++
 .../components/premium-badge/premium-badge.component.ts      | 5 +++--
 .../components/premium-badge/premium-badge.stories.ts        | 2 +-
 .../login-credentials/login-credentials-view.component.html  | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index e3b7c69e163..a5c204ffc99 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
   }
 }
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 92e350fab90..4c3833e28c3 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/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"
   }
 }
diff --git a/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts b/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
index 8890584186d..2ae9c801eec 100644
--- a/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
+++ b/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],
diff --git a/libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts b/libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
index bf50d16d3c4..f6e45dbd5e1 100644
--- a/libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
+++ b/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",
             });
           },
         },
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index be33f7a5562..2566752813c 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/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>