[SM-557] Use bitTypography for headers (#4839)

* Use bitTypography

* Remove tw-text-xl from menu items

apps/web/src/app/shared/shared.module.ts

@@ -23,10 +23,11 @@ import {
   LinkModule,
   MenuModule,
   MultiSelectModule,
+  RadioButtonModule,
   TableModule,
   TabsModule,
-  RadioButtonModule,
   ToggleGroupModule,
+  TypographyModule,
 } from "@bitwarden/components";
 
 // Register the locales for the application
@@ -67,10 +68,11 @@ import "./locales";
     LinkModule,
     MenuModule,
     MultiSelectModule,
+    RadioButtonModule,
     TableModule,
     TabsModule,
-    RadioButtonModule,
     ToggleGroupModule,
+    TypographyModule,
 
     // Web specific
   ],
@@ -100,10 +102,11 @@ import "./locales";
     LinkModule,
     MenuModule,
     MultiSelectModule,
+    RadioButtonModule,
     TableModule,
     TabsModule,
-    RadioButtonModule,
     ToggleGroupModule,
+    TypographyModule,
 
     // Web specific
   ],

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html

@@ -36,7 +36,7 @@
 
   <div class="tw-mt-6 tw-flex tw-flex-col tw-gap-6">
     <sm-section>
-      <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "projects" | i18n }}</h2>
+      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "projects" | i18n }}</h2>
       <sm-projects-list
         (newProjectEvent)="openNewProjectDialog()"
         (editProjectEvent)="openEditProject($event)"
@@ -49,7 +49,7 @@
       </div>
     </sm-section>
     <sm-section>
-      <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "secrets" | i18n }}</h2>
+      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "secrets" | i18n }}</h2>
       <sm-secrets-list
         baseRoute="secrets"
         (deleteSecretsEvent)="openDeleteSecret($event)"

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html

@@ -56,7 +56,7 @@
         />
       </td>
       <td bitCell class="tw-w-0 tw-pr-0">
-        <i class="bwi bwi-wrench tw-text-xl tw-text-muted" aria-hidden="true"></i>
+        <i class="bwi bwi-wrench tw-text-muted" aria-hidden="true"></i>
       </td>
       <td bitCell class="tw-break-all">
         <a bitLink [routerLink]="serviceAccount.id">
@@ -80,11 +80,11 @@
       </td>
       <bit-menu #serviceAccountMenu>
         <a type="button" bitMenuItem [routerLink]="serviceAccount.id">
-          <i class="bwi bwi-fw bwi-eye tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
           {{ "viewServiceAccount" | i18n }}
         </a>
         <button type="button" bitMenuItem>
-          <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
           <span class="tw-text-danger">
             {{ "deleteServiceAccount" | i18n }}
           </span>
@@ -96,7 +96,7 @@
 
 <bit-menu #tableMenu>
   <button type="button" bitMenuItem (click)="bulkDeleteServiceAccounts()">
-    <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
     <span class="tw-text-danger">
       {{ "deleteServiceAccounts" | i18n }}
     </span>

bitwarden_license/bit-web/src/app/secrets-manager/shared/access-policies/access-selector.component.html

@@ -27,7 +27,7 @@
       <ng-container *ngIf="rows?.length > 0; else empty">
         <tr bitRow *ngFor="let row of rows">
           <td bitCell class="tw-w-0 tw-pr-0">
-            <i class="bwi {{ row.icon }} tw-text-xl tw-text-muted" aria-hidden="true"></i>
+            <i class="bwi {{ row.icon }} tw-text-muted" aria-hidden="true"></i>
           </td>
           <td bitCell>{{ row.name }}</td>
           <td bitCell *ngIf="row.type == 'serviceAccount'">

bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html

@@ -14,7 +14,9 @@
       </div>
       <h1
         *ngIf="titleContainer.childElementCount === 0"
-        class="tw-m-0 tw-mr-2 tw-truncate tw-text-3xl tw-font-semibold tw-leading-10"
+        bitTypography="h1"
+        noMargin
+        class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
         [title]="title || (routeData.titleId | i18n)"
       >
         <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>

bitwarden_license/bit-web/src/app/secrets-manager/shared/new-menu.component.html

@@ -10,15 +10,15 @@
 
 <bit-menu #newMenu>
   <button type="button" bitMenuItem (click)="openProjectDialog()">
-    <i class="bwi bwi-fw bwi-sitemap tw-text-xl" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
     {{ "project" | i18n }}
   </button>
   <button type="button" bitMenuItem (click)="openSecretDialog()">
-    <i class="bwi bwi-fw bwi-key tw-text-xl" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
     {{ "secret" | i18n }}
   </button>
   <button type="button" bitMenuItem (click)="openServiceAccountDialog()">
-    <i class="bwi bwi-fw bwi-wrench tw-text-xl" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-wrench" aria-hidden="true"></i>
     {{ "serviceAccount" | i18n }}
   </button>
 </bit-menu>

bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html

@@ -56,7 +56,7 @@
       </td>
       <td bitCell>
         <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
-          <i class="bwi bwi-collection tw-text-xl tw-text-muted" aria-hidden="true"></i>
+          <i class="bwi bwi-collection tw-text-muted" aria-hidden="true"></i>
           <a bitLink [routerLink]="['/sm', project.organizationId, 'projects', project.id]">{{
             project.name
           }}</a>
@@ -75,15 +75,15 @@
       </td>
       <bit-menu #projectMenu>
         <button type="button" bitMenuItem (click)="editProjectEvent.emit(project.id)">
-          <i class="bwi bwi-fw bwi-pencil tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
           {{ "editProject" | i18n }}
         </button>
         <a bitMenuItem [routerLink]="['/sm', project.organizationId, 'projects', project.id]">
-          <i class="bwi bwi-fw bwi-eye tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
           {{ "viewProject" | i18n }}
         </a>
         <button type="button" bitMenuItem (click)="deleteProject(project.id)">
-          <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
           <span class="tw-text-danger">{{ "deleteProject" | i18n }}</span>
         </button>
       </bit-menu>
@@ -93,7 +93,7 @@
 
 <bit-menu #tableMenu>
   <button type="button" bitMenuItem (click)="bulkDeleteProjects()">
-    <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
     <span class="tw-text-danger">{{ "deleteProjects" | i18n }}</span>
   </button>
 </bit-menu>

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -63,7 +63,7 @@
       </td>
       <td bitCell>
         <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
-          <i class="bwi bwi-key tw-text-xl tw-text-muted" aria-hidden="true"></i>
+          <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
           <button type="button" bitLink (click)="editSecretEvent.emit(secret.id)">
             {{ secret.name }}
           </button>
@@ -94,15 +94,15 @@
 
       <bit-menu #secretMenu>
         <button type="button" bitMenuItem (click)="editSecretEvent.emit(secret.id)" *ngIf="!trash">
-          <i class="bwi bwi-fw bwi-pencil tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
           {{ "editSecret" | i18n }}
         </button>
         <button type="button" bitMenuItem (click)="copySecretNameEvent.emit(secret.id)">
-          <i class="bwi bwi-fw bwi-clone tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
           {{ "copySecretName" | i18n }}
         </button>
         <button type="button" bitMenuItem (click)="copySecretValueEvent.emit(secret.id)">
-          <i class="bwi bwi-fw bwi-clone tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
           {{ "copySecretValue" | i18n }}
         </button>
         <button
@@ -111,11 +111,11 @@
           (click)="restoreSecretsEvent.emit([secret.id])"
           *ngIf="trash"
         >
-          <i class="bwi bwi-fw bwi-refresh tw-text-xl" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
           {{ "restoreSecret" | i18n }}
         </button>
         <button type="button" bitMenuItem (click)="deleteSecretsEvent.emit([secret.id])">
-          <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
           <span class="tw-text-danger">{{ "deleteSecret" | i18n }}</span>
         </button>
       </bit-menu>
@@ -125,11 +125,11 @@
 
 <bit-menu #tableMenu>
   <button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">
-    <i class="bwi bwi-fw bwi-refresh tw-text-xl" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
     <span>{{ "restoreSelected" | i18n }}</span>
   </button>
   <button type="button" bitMenuItem (click)="bulkDeleteSecrets()">
-    <i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
+    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
     <span class="tw-text-danger">{{ "deleteSecrets" | i18n }}</span>
   </button>
 </bit-menu>

libs/components/src/typography/typography.directive.ts

@@ -1,26 +1,45 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Directive, HostBinding, Input } from "@angular/core";
 
 type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
 
 const styles: Record<TypographyType, string[]> = {
-  h1: ["tw-text-3xl", "tw-font-semibold", "tw-mb-2"],
+  h1: ["tw-text-3xl", "tw-font-semibold"],
-  h2: ["tw-text-2xl", "tw-font-semibold", "tw-mb-2"],
+  h2: ["tw-text-2xl", "tw-font-semibold"],
-  h3: ["tw-text-xl", "tw-font-semibold", "tw-mb-2"],
+  h3: ["tw-text-xl", "tw-font-semibold"],
-  h4: ["tw-text-lg", "tw-font-semibold", "tw-mb-2"],
+  h4: ["tw-text-lg", "tw-font-semibold"],
-  h5: ["tw-text-base", "tw-font-semibold", "tw-mb-2"],
+  h5: ["tw-text-base", "tw-font-semibold"],
-  h6: ["tw-text-sm", "tw-font-semibold", "tw-mb-2"],
+  h6: ["tw-text-sm", "tw-font-semibold"],
   body1: ["tw-text-base"],
   body2: ["tw-text-sm"],
   helper: ["tw-text-xs"],
 };
 
+const margins: Record<TypographyType, string[]> = {
+  h1: ["tw-mb-2"],
+  h2: ["tw-mb-2"],
+  h3: ["tw-mb-2"],
+  h4: ["tw-mb-2"],
+  h5: ["tw-mb-2"],
+  h6: ["tw-mb-2"],
+  body1: [],
+  body2: [],
+  helper: [],
+};
+
 @Directive({
   selector: "[bitTypography]",
 })
 export class TypographyDirective {
   @Input("bitTypography") bitTypography: TypographyType;
 
+  private _margin = true;
+  @Input()
+  set noMargin(value: boolean | "") {
+    this._margin = !coerceBooleanProperty(value);
+  }
+
   @HostBinding("class") get classList() {
-    return styles[this.bitTypography];
+    return styles[this.bitTypography].concat(this._margin ? margins[this.bitTypography] : []);
   }
 }