From 3901cf2859706b8994c3f362ad9ef343a7c74785 Mon Sep 17 00:00:00 2001 From: Bryan Cunningham Date: Wed, 20 Aug 2025 15:06:24 -0400 Subject: [PATCH] [CL-805] [CL-521] anon layout illustrations (#16002) * Add illustrations to anon layout * update ids and fill classes * Add illustrations to 404 page * update svg sizes * update logo size and placement to match loaded state * update anon layout logo size to match loading screens * update 404 logo size and spacing * update svgIcon imports * remove 404 footer * absolutely position svg to fix random positioning issues * update logo placement * add padding to battom of logo container * add back tw-link class * update anon layout padding --- apps/web/src/404.html | 217 ++++++++++++++++-- apps/web/src/app/app.component.html | 190 ++++++++++++++- apps/web/src/index.html | 190 ++++++++++++++- .../anon-layout/anon-layout.component.html | 21 +- .../src/anon-layout/anon-layout.component.ts | 5 + .../src/anon-layout/illustrations/index.ts | 2 + .../illustrations/left-illustration.ts | 5 + .../illustrations/right-illustration.ts | 5 + .../src/navigation/nav-logo.component.html | 4 +- 9 files changed, 610 insertions(+), 29 deletions(-) create mode 100644 libs/components/src/anon-layout/illustrations/index.ts create mode 100644 libs/components/src/anon-layout/illustrations/left-illustration.ts create mode 100644 libs/components/src/anon-layout/illustrations/right-illustration.ts diff --git a/apps/web/src/404.html b/apps/web/src/404.html index 75e4641a0cc..b3b5a5713ca 100644 --- a/apps/web/src/404.html +++ b/apps/web/src/404.html @@ -15,25 +15,206 @@ - - Bitwarden + + Bitwarden +
+
+

Sorry, this page isn't available.

-
-

Sorry, this page isn't available.

+

+ The link you followed may be broken, or the page may have been removed. Try going back to + the previous page or see our + Help Center + for more information. +

+ Go to your web vault +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + `; +
-

- The link you followed may be broken, or the page may have been removed. Try going back to - the previous page or see our - Help Center - for more information. -

- - Go to your web vault -
-
- -
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/apps/web/src/app/app.component.html b/apps/web/src/app/app.component.html index 471d89be1c1..638ad47fe4e 100644 --- a/apps/web/src/app/app.component.html +++ b/apps/web/src/app/app.component.html @@ -2,8 +2,10 @@ -
- Bitwarden +
+
+ Bitwarden +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + `; +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/apps/web/src/index.html b/apps/web/src/index.html index 1c81ae7a4e6..06f7587a123 100644 --- a/apps/web/src/index.html +++ b/apps/web/src/index.html @@ -16,8 +16,10 @@ -
- Bitwarden +
+
+ Bitwarden +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + `; +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/libs/components/src/anon-layout/anon-layout.component.html b/libs/components/src/anon-layout/anon-layout.component.html index e56c14165e4..4be11b607c6 100644 --- a/libs/components/src/anon-layout/anon-layout.component.html +++ b/libs/components/src/anon-layout/anon-layout.component.html @@ -1,5 +1,5 @@
@@ -20,11 +20,11 @@ -

+

{{ title() }}

-

+

{{ title() }}

@@ -33,7 +33,7 @@
@if (hideCardWrapper()) { @@ -62,6 +62,17 @@
{{ version }}
+ +
+ +
+
+ +
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts index 8b002cae7f0..c70ae1a8c90 100644 --- a/libs/components/src/anon-layout/anon-layout.component.ts +++ b/libs/components/src/anon-layout/anon-layout.component.ts @@ -21,6 +21,8 @@ import { AnonLayoutBitwardenShield } from "../icon/logos"; import { SharedModule } from "../shared"; import { TypographyModule } from "../typography"; +import { LeftIllustration, RightIllustration } from "./illustrations"; + export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"; @Component({ @@ -35,6 +37,9 @@ export class AnonLayoutComponent implements OnInit, OnChanges { return ["tw-h-full"]; } + readonly leftIllustration = LeftIllustration; + readonly rightIllustration = RightIllustration; + readonly title = input(); readonly subtitle = input(); readonly icon = model(); diff --git a/libs/components/src/anon-layout/illustrations/index.ts b/libs/components/src/anon-layout/illustrations/index.ts new file mode 100644 index 00000000000..a107eb7cd15 --- /dev/null +++ b/libs/components/src/anon-layout/illustrations/index.ts @@ -0,0 +1,2 @@ +export * from "./left-illustration"; +export * from "./right-illustration"; diff --git a/libs/components/src/anon-layout/illustrations/left-illustration.ts b/libs/components/src/anon-layout/illustrations/left-illustration.ts new file mode 100644 index 00000000000..26fe9f6076b --- /dev/null +++ b/libs/components/src/anon-layout/illustrations/left-illustration.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "../../icon"; + +export const LeftIllustration = svgIcon` + +`; diff --git a/libs/components/src/anon-layout/illustrations/right-illustration.ts b/libs/components/src/anon-layout/illustrations/right-illustration.ts new file mode 100644 index 00000000000..ba3003ee01f --- /dev/null +++ b/libs/components/src/anon-layout/illustrations/right-illustration.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "../../icon"; + +export const RightIllustration = svgIcon` + +`; diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html index fa59724aad5..89507503a41 100644 --- a/libs/components/src/navigation/nav-logo.component.html +++ b/libs/components/src/navigation/nav-logo.component.html @@ -1,9 +1,9 @@