[CL-718] nav updates (#15226)

* add basic new nav item styling

* update alt-3 bg color

* add x padding to item

* remove copy left in error

* style app switcher to match nav items

* adding new button hover colors

* add new logo lockups

* use new logos in web vault

* fix color and svg fills

* use set height for nav items

* optimize SVGs

* move if logic

* use rem for icon size

* move shield logo

* use shield svg for collapsed icon

* remove unused eslint disable directive

* run prettier

* remove variables

* update logo hover styles

* use more standard flow control syntax

* update admin console logo svg

* add new hover variables

* use class instead of fill

* use variable for logo hover

* remove unnecessary container

* use hover variable for nav switcher

* use correct variables for fill colors

* update hover state to use variable left in error

* give icon width to preserve text alignment

* remove tree story as functionality no longer supported

* remove nested styles helper

* remove obsolete afterContentInit

* remove tree example from layout story

* remove tree example from secondary layout story

* remove tree example from kitchen sink story

* Fix interaction test

* remove remaining references to tree variant

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -27,12 +27,11 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { getById } from "@bitwarden/common/platform/misc";
-import { BannerModule, IconModule } from "@bitwarden/components";
+import { BannerModule, IconModule, AdminConsoleLogo } from "@bitwarden/components";
 
 import { FreeFamiliesPolicyService } from "../../../billing/services/free-families-policy.service";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
 import { WebLayoutModule } from "../../../layouts/web-layout.module";
-import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
 @Component({
   selector: "app-organization-layout",

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html

@@ -16,43 +16,45 @@
     >
       <span class="tw-text-xs !tw-text-alt2 tw-p-2 tw-pb-0">{{ "moreFromBitwarden" | i18n }}</span>
       <ng-container *ngFor="let more of moreProducts">
-        <!-- <a> for when the marketing route is external -->
-        <a
-          *ngIf="more.marketingRoute.external"
-          [href]="more.marketingRoute.route"
-          target="_blank"
-          rel="noreferrer"
-          class="tw-flex tw-py-2 tw-px-4 tw-font-semibold !tw-text-alt2 !tw-no-underline hover:tw-bg-primary-300/60 [&>:not(.bwi)]:hover:tw-underline"
-        >
-          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
-          <div>
-            {{ more.otherProductOverrides?.name ?? more.name }}
-            <div
-              *ngIf="more.otherProductOverrides?.supportingText"
-              class="tw-text-xs tw-font-normal"
-            >
-              {{ more.otherProductOverrides.supportingText }}
+        <div class="tw-ps-2 tw-pe-2">
+          <!-- <a> for when the marketing route is external -->
+          <a
+            *ngIf="more.marketingRoute.external"
+            [href]="more.marketingRoute.route"
+            target="_blank"
+            rel="noreferrer"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+          >
+            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
+            <div>
+              {{ more.otherProductOverrides?.name ?? more.name }}
+              <div
+                *ngIf="more.otherProductOverrides?.supportingText"
+                class="tw-text-xs tw-font-normal"
+              >
+                {{ more.otherProductOverrides.supportingText }}
+              </div>
             </div>
-          </div>
-        </a>
-        <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
-        <a
-          *ngIf="!more.marketingRoute.external"
-          [routerLink]="more.marketingRoute.route"
-          rel="noreferrer"
-          class="tw-flex tw-py-2 tw-px-4 tw-font-semibold !tw-text-alt2 !tw-no-underline hover:tw-bg-primary-300/60 [&>:not(.bwi)]:hover:tw-underline"
-        >
-          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
-          <div>
-            {{ more.otherProductOverrides?.name ?? more.name }}
-            <div
-              *ngIf="more.otherProductOverrides?.supportingText"
-              class="tw-text-xs tw-font-normal"
-            >
-              {{ more.otherProductOverrides.supportingText }}
+          </a>
+          <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
+          <a
+            *ngIf="!more.marketingRoute.external"
+            [routerLink]="more.marketingRoute.route"
+            rel="noreferrer"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+          >
+            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
+            <div>
+              {{ more.otherProductOverrides?.name ?? more.name }}
+              <div
+                *ngIf="more.otherProductOverrides?.supportingText"
+                class="tw-text-xs tw-font-normal"
+              >
+                {{ more.otherProductOverrides.supportingText }}
+              </div>
             </div>
-          </div>
-        </a>
+          </a>
+        </div>
       </ng-container>
     </section>
   </ng-container>

apps/web/src/app/layouts/user-layout.component.ts

@@ -9,11 +9,10 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { IconModule } from "@bitwarden/components";
+import { IconModule, PasswordManagerLogo } from "@bitwarden/components";
 
 import { BillingFreeFamiliesNavItemComponent } from "../billing/shared/billing-free-families-nav-item.component";
 
-import { PasswordManagerLogo } from "./password-manager-logo";
 import { WebLayoutModule } from "./web-layout.module";
 
 @Component({