[PM-9314] AnonLayout Logo updates

[rr-bw]

🎟️ Tracking

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

📔 Objective

Updates the AnonLayout logo be tw-fill-text-alt2 on dark theme. It will remain as tw-fill-primary-600 on light theme.

📸 Screenshots

https://github.com/bitwarden/clients/assets/102181210/7c614558-09ac-408e-80bf-26d4fcbf1f71

⏰ 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[bot]]

Codecov Report

Attention: Patch coverage is 0% with 11 lines in your changes missing coverage. Please review.

Project coverage is 29.63%. Comparing base (794da48) to head (87ceb23). Report is 78 commits behind head on main.

Files	Patch %	Lines
...h/src/angular/anon-layout/anon-layout.component.ts	0.00%	7 Missing :warning:
...uth/src/angular/anon-layout/anon-layout.stories.ts	0.00%	2 Missing :warning:
libs/auth/src/angular/icons/bitwarden-logo.icon.ts	0.00%	2 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9849      +/-   ##
==========================================
+ Coverage   29.30%   29.63%   +0.32%     
==========================================
  Files        2528     2551      +23     
  Lines       73813    74660     +847     
  Branches    13781    13964     +183     
==========================================
+ Hits        21634    22127     +493     
- Misses      50554    50871     +317     
- Partials     1625     1662      +37     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

Checkmarx One – Scan Summary & Details – 665c85ca-1e91-4d3f-9124-8552322b8aba

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Unpinned Actions Full Length Commit SHA	/build-cli.yml: 406	Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps...

Fixed Issues

Severity	Issue	Source File / Package
	Unpinned Actions Full Length Commit SHA	/build-cli.yml: 402
	Unsafe_Use_Of_Target_blank	/apps/web/src/app/auth/settings/two-factor-authenticator.component.html: 58
	Unsafe_Use_Of_Target_blank	/apps/web/src/app/auth/settings/two-factor-authenticator.component.html: 45

[rr-bw]

Storybook does not reflect the change, I'm guessing that may be because the Theme service is not available in Storybook. @rr-bw can you confirm this is expected?

Yes, that's correct. As I think about this more, would it be better to create a new css variable / tailwind class for icon color? It would be much easier to just put a tw-fill-icon-main (for example) on the icon, instead of creating two separate icons with different classes (as I'm doing currently in this PR).

And I assume we will also want the other icons on AnonLayout to be white as well on a dark theme (lock icon, for example). Otherwise we get a white Bitwarden logo and a blue lock icon. We probably don't want to create two separate icons for each icon we use in AnonLayout.

A new variable would look something like:

• tw-theme.css
  • add --color-icon-main: 23 93 220 under :root {...}
  • add --color-icon-main: 255 255 255 under .theme_dark {...}
• tailwind.config.base.js
  • add

     icon: {
        main: rgba("--color-icon-main"),
     },
    

This would allow me to remove the ThemeStateService entirely.

[danielleflinn]

@rr-bw I don't see us using this color treatment for anything except the logo treatment. For the lock it is ok to keep it primary-600 since it isn't one of our brand elements.

The other thought I had was maybe we just hard code the hex variables into these logo assets since they are part of the brand. That way if primary-600 is changed from the current #17CDD (which we are doing in the Design System redesign), the logo itself remains colored with the approved marketing hex code.

[rr-bw]

@danielleflinn Ok, I hardcoded the marketing brand colors, using #FFF on dark theme and #175DDC on light theme.

[rr-bw]

After a conversation with @danielleflinn, I also added a brief note in the Storybook Docs about AnonLayout usage. The note clarifies that while AnonLayout is primarily used for unauthenticated pages, there will be a few exceptions (Unlock page and View Send page).

[danielleflinn]

Thanks @rr-bw looks great!