From 3c4a950636b08c1d82f7a4df3ea36c004fe86393 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Wed, 4 Sep 2024 11:37:50 -0400
Subject: [PATCH] [CL-257] update banner component styles (#10766)

---
 .../web/src/app/auth/settings/verify-email.component.html | 2 +-
 .../vault-banners/vault-banners.component.html            | 6 +++---
 .../providers/providers-layout.component.html             | 2 +-
 libs/components/src/banner/banner.component.html          | 4 ++--
 libs/components/src/banner/banner.component.ts            | 8 ++++----
 libs/components/src/banner/banner.mdx                     | 3 ++-
 libs/components/src/banner/banner.stories.ts              | 2 +-
 7 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/auth/settings/verify-email.component.html b/apps/web/src/app/auth/settings/verify-email.component.html
index 60f7e52b9a2..a691c30695c 100644
--- a/apps/web/src/app/auth/settings/verify-email.component.html
+++ b/apps/web/src/app/auth/settings/verify-email.component.html
@@ -3,7 +3,7 @@
   <button
     id="sendBtn"
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     bitButton
     type="button"
     buttonType="unstyled"
diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
index bcbe424b469..63b099faf3d 100644
--- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
@@ -8,7 +8,7 @@
   {{ "updateBrowserDesc" | i18n }}
   <a
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     target="_blank"
     href="https://browser-update.org/update-browser.html"
     rel="noreferrer noopener"
@@ -25,7 +25,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
 >
   {{ "lowKDFIterationsBanner" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/security/security-keys">
+  <a bitLink linkType="secondary" routerLink="/settings/security/security-keys">
     {{ "changeKDFSettings" | i18n }}
   </a>
 </bit-banner>
@@ -46,7 +46,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
 >
   {{ "premiumUpgradeUnlockFeatures" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/subscription/premium">
+  <a bitLink linkType="secondary" routerLink="/settings/subscription/premium">
     {{ "goPremium" | i18n }}
   </a>
 </bit-banner>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
index 5f9b3f66bc5..dd2b7210aa5 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
@@ -50,7 +50,7 @@
     <a
       href="https://bitwarden.com/contact/"
       bitLink
-      linkType="contrast"
+      linkType="secondary"
       target="_blank"
       rel="noreferrer"
     >
diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index 865aacd410a..6c1375293b5 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-contrast tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
+  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
@@ -12,7 +12,7 @@
     *ngIf="showClose"
     type="button"
     bitIconButton="bwi-close"
-    buttonType="contrast"
+    buttonType="main"
     size="default"
     (click)="onClose.emit()"
     [attr.title]="'close' | i18n"
diff --git a/libs/components/src/banner/banner.component.ts b/libs/components/src/banner/banner.component.ts
index 099fa11fa4d..a8805768b44 100644
--- a/libs/components/src/banner/banner.component.ts
+++ b/libs/components/src/banner/banner.component.ts
@@ -28,13 +28,13 @@ export class BannerComponent implements OnInit {
   get bannerClass() {
     switch (this.bannerType) {
       case "danger":
-        return "tw-bg-danger-600";
+        return "tw-bg-danger-100 tw-border-b-danger-700";
       case "info":
-        return "tw-bg-info-600";
+        return "tw-bg-info-100 tw-border-b-info-700";
       case "premium":
-        return "tw-bg-success-600";
+        return "tw-bg-success-100 tw-border-b-success-700";
       case "warning":
-        return "tw-bg-warning-600";
+        return "tw-bg-warning-100 tw-border-b-warning-700";
     }
   }
 }
diff --git a/libs/components/src/banner/banner.mdx b/libs/components/src/banner/banner.mdx
index 9f6aeb2aa7c..d5b6a3b5279 100644
--- a/libs/components/src/banner/banner.mdx
+++ b/libs/components/src/banner/banner.mdx
@@ -15,7 +15,8 @@ persist across all pages a user navigates to.
 - Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
   effectiveness may decrease if too many are used.
 - Avoid stacking multiple banners.
-- Banners support a button link (text button).
+- Banners can contain a button or anchor that uses the `bitLink` directive with
+  `linkType="secondary"`.
 
 <Primary />
 
diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts
index 26bbe30f63f..c75d8b7034a 100644
--- a/libs/components/src/banner/banner.stories.ts
+++ b/libs/components/src/banner/banner.stories.ts
@@ -53,7 +53,7 @@ export const Premium: Story = {
     template: `
       <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
-        <button bitLink linkType="contrast">Button</button>
+        <button bitLink linkType="secondary">Button</button>
       </bit-banner>
       `,
   }),