bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

9
libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts
View File

@@ -15,8 +15,6 @@ import {
Environment,
} from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { ButtonModule } from "@bitwarden/components";
// FIXME: remove `/apps` import from `/libs`
@@ -40,7 +38,6 @@ const decorators = (options: {
applicationVersion?: string;
clientType?: ClientType;
hostName?: string;
themeType?: ThemeType;
}) => {
return [
componentWrapperDecorator(
@@ -84,12 +81,6 @@ const decorators = (options: {
getClientType: () => options.clientType || ClientType.Web,
} as Partial<PlatformUtilsService>,
},
{
provide: ThemeStateService,
useValue: {
selectedTheme$: of(options.themeType || ThemeType.Light),
} as Partial<ThemeStateService>,
},
],
}),
applicationConfig({

42
libs/auth/src/angular/anon-layout/anon-layout.component.ts
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;
}
}
}
}

9
libs/auth/src/angular/anon-layout/anon-layout.stories.ts
View File

@@ -1,11 +1,10 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
import { BehaviorSubject } from "rxjs";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { ButtonModule } from "../../../../components/src/button";
import { I18nMockService } from "../../../../components/src/utils/i18n-mock.service";
@@ -47,12 +46,6 @@ export default {
}).asObservable(),
},
},
{
provide: ThemeStateService,
useValue: {
selectedTheme$: of("light"),
},
},
],
}),
],