1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00

[PM-11000] AnonLayout Icon/Logo theme refactor (#10549)

* update base anon-layout logo/icon

* update ExtensionAnonLayout logo/icon based on theme

* remove hard-coded fill

* remove solarizedDark class

---------

Co-authored-by: Bernd Schoolmann <mail@quexten.com>
This commit is contained in:
rr-bw
2024-08-31 12:26:11 -07:00
committed by GitHub
parent e7d4f8575d
commit c5a267baad
10 changed files with 29 additions and 117 deletions

View File

@@ -5,13 +5,11 @@ import { firstValueFrom } from "rxjs";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { IconModule, Icon } from "../../../../components/src/icon";
import { SharedModule } from "../../../../components/src/shared";
import { TypographyModule } from "../../../../components/src/typography";
import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons";
import { BitwardenShieldPrimary, BitwardenShieldWhite } from "../icons/bitwarden-shield.icon";
import { BitwardenLogo, BitwardenShield } from "../icons";
@Component({
standalone: true,
@@ -34,20 +32,17 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
*/
@Input() maxWidth: "md" | "3xl" = "md";
protected logo: Icon;
protected logo = BitwardenLogo;
protected year = "2024";
protected clientType: ClientType;
protected hostname: string;
protected version: string;
protected theme: string;
protected hideYearAndVersion = false;
constructor(
private environmentService: EnvironmentService,
private platformUtilsService: PlatformUtilsService,
private themeStateService: ThemeStateService,
) {
this.year = new Date().getFullYear().toString();
this.clientType = this.platformUtilsService.getClientType();
@@ -56,41 +51,18 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
async ngOnInit() {
this.maxWidth = this.maxWidth ?? "md";
this.theme = await firstValueFrom(this.themeStateService.selectedTheme$);
if (this.theme === "dark") {
this.logo = BitwardenLogoWhite;
} else {
this.logo = BitwardenLogoPrimary;
}
await this.updateIcon(this.theme);
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
this.version = await this.platformUtilsService.getApplicationVersion();
// If there is no icon input, then use the default icon
if (this.icon == null) {
this.icon = BitwardenShield;
}
}
async ngOnChanges(changes: SimpleChanges) {
if (changes.icon) {
const theme = await firstValueFrom(this.themeStateService.selectedTheme$);
await this.updateIcon(theme);
}
if (changes.maxWidth) {
this.maxWidth = changes.maxWidth.currentValue ?? "md";
}
}
private async updateIcon(theme: string) {
if (this.icon == null) {
if (theme === "dark") {
this.icon = BitwardenShieldWhite;
}
if (theme !== "dark") {
this.icon = BitwardenShieldPrimary;
}
}
}
}