Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-25 12:15:18 +01:00
Code Issues Projects Releases Wiki Activity

update account switcher styling for all themes (#7182)

Browse Source
This commit is contained in:
rr-bw 2023-12-12 10:59:03 -08:00 committed by GitHub
parent f0cdcccf81
commit bb096724b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/auth/popup/account-switching/account-switcher.component.html
View File

@ -40,7 +40,7 @@
<div class="tw-grid tw-gap-2"> <div class="tw-grid tw-gap-2">
<button <button
type="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()" (click)="lock()"
[disabled]="currentAccount.status === lockedStatus || !activeUserCanLock" [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
[title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''" [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
@ -50,7 +50,7 @@
</button> </button>
<button <button
type="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()" (click)="logOut()"
> >
<i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i> <i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i>
@ -58,7 +58,7 @@
</button> </button>
<button <button
type="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()" (click)="lockAll()"
> >
<i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i> <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>

19
apps/browser/src/auth/popup/account-switching/account.component.html
View File

@ -1,7 +1,7 @@
<button <button
*ngIf="account.id !== specialAccountAddId" *ngIf="account.id !== specialAccountAddId"
type="button" 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)" (click)="selectAccount(account.id)"
> >
<div class="tw-flex-shrink-0"> <div class="tw-flex-shrink-0">
@ -18,32 +18,35 @@
<span class="tw-sr-only" *ngIf="status.text !== 'active'"> <span class="tw-sr-only" *ngIf="status.text !== 'active'">
{{ "switchToAccount" | i18n }} {{ "switchToAccount" | i18n }}
</span> </span>
<div class="tw-max-w-64 tw-truncate tw-text-main"> <div class="tw-max-w-64 tw-truncate">
{{ account.email }} {{ account.email }}
</div> </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> <span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
{{ account.server }} {{ account.server }}
</div> </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> <span class="tw-sr-only">(</span>
{{ status.text }} {{ status.text }}
<span class="tw-sr-only">)</span> <span class="tw-sr-only">)</span>
</div> </div>
</div> </div>
<div class="tw-ml-auto tw-flex-shrink-0"> <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> </div>
</button> </button>
<button <button
*ngIf="account.id === specialAccountAddId" *ngIf="account.id === specialAccountAddId"
type="button" 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)" (click)="selectAccount(account.id)"
> >
<i class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i> <i class="bwi bwi-plus tw-text-2xl" aria-hidden="true"></i>
<div class="tw-text-main"> <div>
{{ account.name }} {{ account.name }}
</div> </div>
</button> </button>

21
apps/browser/src/popup/scss/box.scss
View File

@ -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");
}
}
}