From 9152c3203fd56dd74e442e8bb68e384d0d22a732 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Mon, 26 Aug 2024 18:15:09 +0200 Subject: [PATCH] [BEEEP] [PM-10117] Migrate index.html (#10286) Migrate the index.html to use tailwind instead of bootstrap * Extracted some more global styles to override the bootstrap styles for layout frontend. We should revisit this when we remove bootstrap. * Removed Angular specific logo for anon pages. Now uses the same css class as loading page to prevent duplicated assets. --- apps/web/src/404.html | 6 +-- apps/web/src/images/logo-white.svg | 6 +++ apps/web/src/index.html | 20 +++++----- apps/web/src/scss/tailwind.css | 40 ++++++++++++++++++- .../anon-layout/anon-layout.component.html | 2 +- 5 files changed, 57 insertions(+), 17 deletions(-) create mode 100644 apps/web/src/images/logo-white.svg diff --git a/apps/web/src/404.html b/apps/web/src/404.html index 0c11f6680d..817bfe3098 100644 --- a/apps/web/src/404.html +++ b/apps/web/src/404.html @@ -1,5 +1,5 @@ - + @@ -16,9 +16,9 @@ -
- Bitwarden + Bitwarden +

Sorry, this page isn't available.

diff --git a/apps/web/src/images/logo-white.svg b/apps/web/src/images/logo-white.svg new file mode 100644 index 0000000000..d9ffdd8e33 --- /dev/null +++ b/apps/web/src/images/logo-white.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/apps/web/src/index.html b/apps/web/src/index.html index c3a2c03ed9..ce1a955b88 100644 --- a/apps/web/src/index.html +++ b/apps/web/src/index.html @@ -5,7 +5,7 @@ - Bitwarden Web Vault + Bitwarden Web vault @@ -15,16 +15,14 @@ -

-
- -

- -

+
+ Bitwarden +
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css index 9c64be6308..1ac7b15401 100644 --- a/apps/web/src/scss/tailwind.css +++ b/apps/web/src/scss/tailwind.css @@ -5,9 +5,14 @@ @import "../../../../libs/components/src/tw-theme.css"; /* - * Duplicated styling from Angular components. + * Web specific global styling. * - * For use in non Angular pages like the 404 and connectors. + * Be mindful of what is added here. Generally use Tailwind classes directly in Angular components. + * + * Some valid scenarios for adding styles here: + * + * - Duplicated styling for CL components used in non Angular pages like connectors and 404. + * - Shared styles like Logo. */ @layer components { .tw-h1 { @@ -24,4 +29,35 @@ @apply tw-bg-transparent tw-border-text-muted hover:tw-bg-text-muted hover:tw-border-text-muted hover:!tw-text-contrast disabled:tw-bg-transparent disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60 disabled:tw-cursor-not-allowed; @apply tw-text-muted !important; } + + /** + * Loading page + */ + body.layout_frontend { + /* We apply the background color here since body classes are dynamically added and removed */ + @apply tw-bg-background-alt !important; + + /* Spinner requires fixed height and width to appear centered */ + .spinner-container { + @apply tw-fixed tw-inset-2/4 -tw-translate-x-1/2 -tw-translate-y-1/2; + + height: 42px; + width: 42px; + } + } + + /** + * Logo, used both in loading and on "frontend" pages. + */ + img.new-logo-themed { + @apply tw-block; + + width: 128px; + } + .theme_light img.new-logo-themed { + content: url("../images/logo.svg"); + } + .theme_dark img.new-logo-themed { + content: url("../images/logo-white.svg"); + } } diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html index bd3de51c46..082edf4063 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.component.html +++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html @@ -2,7 +2,7 @@ class="tw-flex tw-min-h-screen tw-w-full tw-mx-auto tw-flex-col tw-gap-7 tw-bg-background-alt tw-px-8 tw-pb-4 tw-text-main" [ngClass]="{ 'tw-pt-0': decreaseTopPadding, 'tw-pt-8': !decreaseTopPadding }" > - +