[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.
bitwarden · Aug 26, 2024 · 9152c32 · 9152c32
1 parent bfc49c4
commit 9152c32
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 17 deletions.
diff --git a/apps/web/src/404.html b/apps/web/src/404.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="tw-h-full">
+<html lang="en" class="tw-h-full theme_light">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -16,9 +16,9 @@
   </head>
 
   <body class="tw-min-h-screen !tw-min-w-0 tw-text-center tw-bg-background-alt tw-flex tw-flex-col">
-    <main class="tw-max-w-3xl tw-mx-auto tw-mb-8 tw-px-2">
-      <img src="images/logo.svg" width="200px" class="tw-py-16" alt="Bitwarden" />
+    <img class="new-logo-themed tw-m-8" alt="Bitwarden" />
 
+    <main class="tw-max-w-3xl tw-mx-auto tw-px-2 tw-my-4">
       <h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
 
       <p class="tw-py-9 tw-mb-0">

diff --git a/apps/web/src/images/logo-white.svg b/apps/web/src/images/logo-white.svg
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=1010" />
     <meta name="theme-color" content="#175DDC" />
 
-    <title page-title>Bitwarden Web Vault</title>
+    <title page-title>Bitwarden Web vault</title>
 
     <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png" />
@@ -15,16 +15,14 @@
   </head>
   <body class="layout_frontend">
     <app-root>
-      <div class="mt-5 d-flex justify-content-center">
-        <div>
-          <img class="mb-4 logo logo-themed" alt="Bitwarden" />
-          <p class="text-center">
-            <i
-              class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
-              title="Loading"
-              aria-hidden="true"
-            ></i>
-          </p>
+      <div class="tw-p-8 tw-flex">
+        <img class="new-logo-themed" alt="Bitwarden" />
+        <div class="spinner-container tw-justify-center">
+          <i
+            class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
+            title="Loading"
+            aria-hidden="true"
+          ></i>
         </div>
       </div>
     </app-root>

diff --git 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
@@ -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 }"
 >
-  <bit-icon *ngIf="!hideLogo" [icon]="logo" class="tw-max-w-36"></bit-icon>
+  <bit-icon *ngIf="!hideLogo" [icon]="logo" class="tw-w-[128px] [&>*]:tw-align-top"></bit-icon>
 
   <div class="tw-text-center">
     <div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">