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

[PM-8307] AnonLayout Design Changes (#10166)

Browse Source 
* update logo, padding, and add hideFooter property and hideLogo input

* typography and icon adjustments

* add story with hidden logo input

* handle updating the icon

* update storybook docs

* update border radius

* update icon colors to use tw classes

* update storybook docs

* handle default icon

* make hideFooter an input

* update icon sizing

* update icon sizing
This commit is contained in:
rr-bw
2024-07-30 13:48:51 -05:00
committed by GitHub
parent d915bd8c86
commit 18ef51449f
6 changed files with 106 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
libs/auth/src/angular/anon-layout/anon-layout.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { firstValueFrom } from "rxjs";
import { ClientType } from "@bitwarden/common/enums";
@@ -10,7 +10,8 @@ import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-stat
import { IconModule, Icon } from "../../../../components/src/icon";
import { SharedModule } from "../../../../components/src/shared";
import { TypographyModule } from "../../../../components/src/typography";
import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons/bitwarden-logo.icon";
import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons";
import { BitwardenShieldPrimary, BitwardenShieldWhite } from "../icons/bitwarden-shield.icon";
@Component({
standalone: true,
@@ -18,11 +19,13 @@ import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons/bitwarden-log
templateUrl: "./anon-layout.component.html",
imports: [IconModule, CommonModule, TypographyModule, SharedModule],
})
export class AnonLayoutComponent {
export class AnonLayoutComponent implements OnInit, OnChanges {
@Input() title: string;
@Input() subtitle: string;
@Input() icon: Icon;
@Input() showReadonlyHostname: boolean;
@Input() hideLogo: boolean = false;
@Input() hideFooter: boolean = false;
/**
* Max width of the layout content
*
@@ -38,7 +41,7 @@ export class AnonLayoutComponent {
protected version: string;
protected theme: string;
protected showYearAndVersion = true;
protected hideYearAndVersion = false;
constructor(
private environmentService: EnvironmentService,
@@ -47,13 +50,12 @@ export class AnonLayoutComponent {
) {
this.year = new Date().getFullYear().toString();
this.clientType = this.platformUtilsService.getClientType();
this.showYearAndVersion = this.clientType === ClientType.Web;
this.hideYearAndVersion = this.clientType !== ClientType.Web;
}
async ngOnInit() {
this.maxWidth = this.maxWidth ?? "md";
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
this.version = await this.platformUtilsService.getApplicationVersion();
this.theme = await firstValueFrom(this.themeStateService.selectedTheme$);
if (this.theme === "dark") {
@@ -61,5 +63,29 @@ export class AnonLayoutComponent {
} else {
this.logo = BitwardenLogoPrimary;
}
await this.updateIcon(this.theme);
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
this.version = await this.platformUtilsService.getApplicationVersion();
}
async ngOnChanges(changes: SimpleChanges) {
if (changes.icon) {
const theme = await firstValueFrom(this.themeStateService.selectedTheme$);
await this.updateIcon(theme);
}
}
private async updateIcon(theme: string) {
if (this.icon == null) {
if (theme === "dark") {
this.icon = BitwardenShieldWhite;
}
if (theme !== "dark") {
this.icon = BitwardenShieldPrimary;
}
}
}
}