From bb096724b24ee6e31fdd5b21555fd216450cc362 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:59:03 -0800
Subject: [PATCH] update account switcher styling for all themes (#7182)

---
 .../account-switcher.component.html           |  6 +++---
 .../account-switching/account.component.html  | 19 ++++++++++-------
 apps/browser/src/popup/scss/box.scss          | 21 +++++++++++++++++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
index f742187014..364ee07fba 100644
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
@@ -40,7 +40,7 @@
       <div class="tw-grid tw-gap-2">
         <button
           type="button"
-          class="tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-bg-background tw-p-3 hover:tw-bg-background-alt disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60"
+          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3 disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60"
           (click)="lock()"
           [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
           [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
@@ -50,7 +50,7 @@
         </button>
         <button
           type="button"
-          class="tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-bg-background tw-p-3 hover:tw-bg-background-alt"
+          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
           (click)="logOut()"
         >
           <i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i>
@@ -58,7 +58,7 @@
         </button>
         <button
           type="button"
-          class="tw-mt-2 tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-bg-background tw-p-3 hover:tw-bg-background-alt"
+          class="account-switcher-row tw-mt-2 tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
           (click)="lockAll()"
         >
           <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
diff --git a/apps/browser/src/auth/popup/account-switching/account.component.html b/apps/browser/src/auth/popup/account-switching/account.component.html
index 52edeabc7b..0912c71b06 100644
--- a/apps/browser/src/auth/popup/account-switching/account.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account.component.html
@@ -1,7 +1,7 @@
 <button
   *ngIf="account.id !== specialAccountAddId"
   type="button"
-  class="tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-bg-background tw-p-3 hover:tw-bg-background-alt"
+  class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
   (click)="selectAccount(account.id)"
 >
   <div class="tw-flex-shrink-0">
@@ -18,32 +18,35 @@
     <span class="tw-sr-only" *ngIf="status.text !== 'active'">
       {{ "switchToAccount" | i18n }}
     </span>
-    <div class="tw-max-w-64 tw-truncate tw-text-main">
+    <div class="tw-max-w-64 tw-truncate">
       {{ account.email }}
     </div>
-    <div class="tw-max-w-64 tw-truncate tw-text-sm tw-text-muted">
+    <div class="account-switcher-row-details tw-max-w-64 tw-truncate tw-text-sm">
       <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
       {{ account.server }}
     </div>
-    <div class="tw-text-sm tw-italic tw-text-muted" [attr.aria-hidden]="status.text === 'active'">
+    <div
+      class="account-switcher-row-details tw-text-sm tw-italic"
+      [attr.aria-hidden]="status.text === 'active'"
+    >
       <span class="tw-sr-only">(</span>
       {{ status.text }}
       <span class="tw-sr-only">)</span>
     </div>
   </div>
   <div class="tw-ml-auto tw-flex-shrink-0">
-    <i class="bwi tw-text-2xl tw-text-main" [ngClass]="status.icon" aria-hidden="true"></i>
+    <i class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
   </div>
 </button>
 
 <button
   *ngIf="account.id === specialAccountAddId"
   type="button"
-  class="tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-bg-background tw-p-3 hover:tw-bg-background-alt"
+  class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
   (click)="selectAccount(account.id)"
 >
-  <i class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
-  <div class="tw-text-main">
+  <i class="bwi bwi-plus tw-text-2xl" aria-hidden="true"></i>
+  <div>
     {{ account.name }}
   </div>
 </button>
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index c026c78088..d98c29176d 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -767,3 +767,24 @@ form {
     }
   }
 }
+
+.account-switcher-row {
+  @include themify($themes) {
+    color: themed("textColor");
+    background-color: themed("boxBackgroundColor");
+  }
+
+  &:hover,
+  &:focus,
+  &.active {
+    @include themify($themes) {
+      background-color: themed("listItemBackgroundHoverColor");
+    }
+  }
+
+  &-details {
+    @include themify($themes) {
+      color: themed("mutedColor");
+    }
+  }
+}