[BEEEP] [PM-10117] Migrate index.html #10286

Hinton · 2024-07-26T12:11:20Z

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-10117

📔 Objective

Migrate the index.html to use tailwind instead of bootstrap styling.

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.

📸 Screenshots

Screen.Recording.2024-07-26.at.14.00.16.mov

⏰ Reminders before review

Contributor guidelines followed
All formatters and local linters executed and passed
Written new unit and / or integration tests where applicable
Protected functional changes with optionality (feature flags)
Used internationalization (i18n) for all UI strings
CI builds passed
Communicated to DevOps any deployment requirements
Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

👍 (:+1:) or similar for great changes
📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
❓ (:question:) for questions
🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
🎨 (:art:) for suggestions / improvements
❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
⛏ (:pick:) for minor or nitpick changes

codecov · 2024-07-26T12:18:45Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 32.78%. Comparing base (6e04fba) to head (53eb52d).
Report is 95 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #10286   +/-   ##
=======================================
  Coverage   32.78%   32.78%           
=======================================
  Files        2665     2665           
  Lines       81354    81354           
  Branches    15320    15320           
=======================================
  Hits        26668    26668           
  Misses      52647    52647           
  Partials     2039     2039

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-07-26T12:20:59Z

Checkmarx One – Scan Summary & Details – 4ca14c78-2b14-4188-ac7a-40c1883197e3

New Issues

Issue	Source File / Package	Checkmarx Insight
Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/billing/organizations/adjust-subscription.component.html: 10	Attack Vector
Angular_Improper_Type_Pipe_Usage	/apps/web/src/app/billing/organizations/adjust-subscription.component.html: 49	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 924	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 878	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 796	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 535	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 596	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 746	Attack Vector
Client_Privacy_Violation	/apps/browser/src/background/main.background.ts: 746	Attack Vector

…ndex # Conflicts: # apps/web/src/scss/tailwind.css

…ndex # Conflicts: # libs/auth/src/angular/anon-layout/anon-layout.component.html # libs/auth/src/angular/anon-layout/anon-layout.component.ts # libs/auth/src/angular/icons/index.ts

vleague2 · 2024-08-12T13:52:43Z

apps/web/src/404.html

@@ -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" />


❓ I think all content is supposed to be in a landmark so I think it should be in main?

We could do that, but I would need to move. the classes to a div to maintain the design.

vleague2 · 2024-08-12T13:53:31Z

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>


❓ Why leave Web as title case?

To keep it consistent to other places. The Angular apps uses lowercase.

vleague2 · 2024-08-12T13:58:36Z

apps/web/src/scss/tailwind.css

+  /**
+   * Logo, used both in loading and on "frontend" pages.
+   */
+  img.new-logo-themed {


❓ Do we need the word "new" in this class name? (Only because eventually it won't be new, but we probably won't go update this class)

Because logo-themed is already taken. 😢

rr-bw

This looks great on web, but will break the logo on Desktop and I believe Browser when the email verification FF is turned on. Here is a screenshot on the /signup page on Desktop, which you get to by clicking "Create account" on the login page.

…ndex

Hinton · 2024-08-13T16:55:26Z

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>


This was needed to ensure consistency between the loading page and angular.

Hinton · 2024-08-13T16:55:55Z

@rr-bw I rolledback the changes to annon-layout.

vleague2

Reminder to approve UI tests!

Hinton added 8 commits July 15, 2024 12:32

Migrate the 404 page

df48cde

Update title and add alt text to logo

ff15e4e

Change button to secondary

8d5d714

Change header to h1

07f885c

Document purpose of @components

1ada029

Merge branch 'main' of github.com:bitwarden/clients into ps/migrate-404

11f585b

Migrate index.html

78fc95e

Add some comments

9591e43

Hinton changed the title ~~[BEEEP] [PM-10117] Migrate the 404 page~~ [BEEEP] [PM-10117] Migrate index.html Jul 26, 2024

Base automatically changed from ps/migrate-404 to main July 30, 2024 10:25

An error occurred while trying to automatically change base from ps/migrate-404 to main July 30, 2024 10:25

Merge branch 'main' of github.com:bitwarden/clients into ps/migrate-i…

1a24167

…ndex # Conflicts: # apps/web/src/scss/tailwind.css

Hinton marked this pull request as ready for review July 30, 2024 10:36

Hinton requested a review from a team as a code owner July 30, 2024 10:36

Hinton requested review from jlf0dev, a team and vleague2 July 30, 2024 10:36

Hinton added 2 commits July 30, 2024 22:13

Merge branch 'main' of github.com:bitwarden/clients into ps/migrate-i…

413b3f9

…ndex # Conflicts: # libs/auth/src/angular/anon-layout/anon-layout.component.html # libs/auth/src/angular/anon-layout/anon-layout.component.ts # libs/auth/src/angular/icons/index.ts

Move logo for 404

895c431

willmartian self-assigned this Aug 2, 2024

jlf0dev requested review from rr-bw and removed request for jlf0dev August 9, 2024 14:59

vleague2 reviewed Aug 12, 2024

View reviewed changes

rr-bw requested changes Aug 12, 2024

View reviewed changes

Hinton added 2 commits August 13, 2024 13:22

Merge branch 'main' of github.com:bitwarden/clients into ps/migrate-i…

98691d4

…ndex

Revert anon-layout changes

49ed828

Hinton commented Aug 13, 2024

View reviewed changes

Hinton requested a review from vleague2 August 13, 2024 16:55

Hinton requested a review from rr-bw August 13, 2024 16:55

Merge branch 'main' into ps/migrate-index

53eb52d

rr-bw approved these changes Aug 15, 2024

View reviewed changes

vleague2 approved these changes Aug 20, 2024

View reviewed changes

Hinton merged commit 9152c32 into main Aug 26, 2024
66 checks passed

Hinton deleted the ps/migrate-index branch August 26, 2024 16:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BEEEP] [PM-10117] Migrate index.html #10286

[BEEEP] [PM-10117] Migrate index.html #10286

Hinton commented Jul 26, 2024 •

edited

Loading

codecov bot commented Jul 26, 2024 •

edited

Loading

github-actions bot commented Jul 26, 2024 •

edited

Loading

vleague2 Aug 12, 2024

Hinton Aug 12, 2024

vleague2 Aug 12, 2024

Hinton Aug 12, 2024

vleague2 Aug 12, 2024

Hinton Aug 12, 2024

rr-bw left a comment

Hinton Aug 13, 2024

Hinton commented Aug 13, 2024

vleague2 left a comment

[BEEEP] [PM-10117] Migrate index.html #10286

[BEEEP] [PM-10117] Migrate index.html #10286

Conversation

Hinton commented Jul 26, 2024 • edited Loading

🎟️ Tracking

📔 Objective

📸 Screenshots

⏰ Reminders before review

🦮 Reviewer guidelines

codecov bot commented Jul 26, 2024 • edited Loading

Codecov Report

github-actions bot commented Jul 26, 2024 • edited Loading

New Issues

vleague2 Aug 12, 2024

Choose a reason for hiding this comment

Hinton Aug 12, 2024

Choose a reason for hiding this comment

vleague2 Aug 12, 2024

Choose a reason for hiding this comment

Hinton Aug 12, 2024

Choose a reason for hiding this comment

vleague2 Aug 12, 2024

Choose a reason for hiding this comment

Hinton Aug 12, 2024

Choose a reason for hiding this comment

rr-bw left a comment

Choose a reason for hiding this comment

Hinton Aug 13, 2024

Choose a reason for hiding this comment

Hinton commented Aug 13, 2024

vleague2 left a comment

Choose a reason for hiding this comment

Hinton commented Jul 26, 2024 •

edited

Loading

codecov bot commented Jul 26, 2024 •

edited

Loading

github-actions bot commented Jul 26, 2024 •

edited

Loading