[Cl-726] layout spacing updates (#15979)

2025-12-06 00:13:28 +00:00 · 2025-09-19 11:32:30 -04:00
parent 792f7e9c55
commit cf929edb9c
14 changed files with 12 additions and 37 deletions
--- a/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html
@@ -12,7 +12,6 @@
 <ng-container *ngIf="freeTrialWhenWarningsServiceDisabled$ | async as freeTrial">
  <bit-banner
    id="free-trial-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
    icon="bwi-billing"
    bannerType="premium"
    [showClose]="false"
@@ -33,7 +32,6 @@
 <ng-container *ngIf="resellerWarningWhenWarningsServiceDisabled$ | async as resellerWarning">
  <bit-banner
    id="reseller-warning-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
    icon="bwi-billing"
    bannerType="info"
    [showClose]="false"
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.html
@@ -20,13 +20,7 @@

  @let freeTrial = freeTrialWhenWarningsServiceDisabled$ | async;
  @if (!refreshing && freeTrial?.shownBanner) {
-    <bit-banner
-      id="free-trial-banner"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-      icon="bwi-billing"
-      bannerType="premium"
-      [showClose]="false"
-    >
+    <bit-banner id="free-trial-banner" icon="bwi-billing" bannerType="premium" [showClose]="false">
      {{ freeTrial.message }}
      <a
        bitLink
@@ -44,7 +38,6 @@
  @if (!refreshing && resellerWarning) {
    <bit-banner
      id="reseller-warning-banner"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
      icon="bwi-billing"
      bannerType="info"
      [showClose]="false"
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
@@ -140,11 +140,7 @@
  </app-side-nav>

  <ng-container *ngIf="organization$ | async as organization">
-    <bit-banner
-      *ngIf="organization.isProviderUser"
-      [showClose]="false"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-    >
+    <bit-banner *ngIf="organization.isProviderUser" [showClose]="false">
      {{ "accessingUsingProvider" | i18n: organization.providerName }}
    </bit-banner>
    <app-tax-id-warning
--- a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
+++ b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
@@ -1,6 +1,5 @@
 <bit-banner
  id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="premium"
  icon="bwi-billing"
  [showClose]="false"
--- a/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts
+++ b/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts
@@ -16,7 +16,6 @@ import { OrganizationFreeTrialWarning } from "../types";
    @if (warning) {
      <bit-banner
        id="free-trial-banner"
-        class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
        icon="bwi-billing"
        bannerType="premium"
        [showClose]="false"
--- a/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts
+++ b/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts
@@ -16,7 +16,6 @@ import { OrganizationResellerRenewalWarning } from "../types";
    @if (warning) {
      <bit-banner
        id="reseller-warning-banner"
-        class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
        icon="bwi-billing"
        bannerType="info"
        [showClose]="false"
--- a/apps/web/src/app/billing/shared/payment-method.component.html
+++ b/apps/web/src/app/billing/shared/payment-method.component.html
@@ -1,6 +1,5 @@
 <bit-banner
  id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="premium"
  icon="bwi-billing"
  [showClose]="false"
--- a/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts
+++ b/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts
@@ -90,12 +90,7 @@ type GetWarning$ = () => Observable<TaxIdWarningType | null>;
      @let view = view$ | async;

      @if (view) {
-        <bit-banner
-          id="tax-id-warning-banner"
-          class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-          bannerType="warning"
-          (onClose)="trackDismissal()"
-        >
+        <bit-banner id="tax-id-warning-banner" bannerType="warning" (onClose)="trackDismissal()">
          {{ view.message }}
          <a
            bitLink
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -1,6 +1,6 @@
 <header
  *ngIf="routeData$ | async as routeData"
-  class="-tw-m-6 tw-mb-3 tw-flex tw-flex-col tw-p-6"
+  class="-tw-mt-6 -tw-mx-8 tw-mb-3 tw-flex tw-flex-col tw-py-6 tw-px-8"
  [ngClass]="{
    'tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-bg-background-alt tw-pb-0':
      tabsContainer.childElementCount !== 0,
--- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
@@ -1,6 +1,5 @@
 <bit-banner
  id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="premium"
  icon="bwi-billing"
  [showClose]="false"
@@ -20,7 +19,6 @@

 <bit-banner
  id="update-browser-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="warning"
  *ngIf="visibleBanners.includes(VisibleVaultBanner.OutdatedBrowser)"
  (onClose)="dismissBanner(VisibleVaultBanner.OutdatedBrowser)"
@@ -39,7 +37,6 @@

 <bit-banner
  id="kdf-settings-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="warning"
  *ngIf="visibleBanners.includes(VisibleVaultBanner.KDFSettings)"
  (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
@@ -52,7 +49,6 @@

 <bit-banner
  id="pending-auth-request-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="info"
  icon="bwi-info-circle"
  *ngIf="visibleBanners.includes(VisibleVaultBanner.PendingAuthRequest)"
@@ -67,14 +63,12 @@
 <app-verify-email
  id="verify-email-banner"
  *ngIf="visibleBanners.includes(VisibleVaultBanner.VerifyEmail)"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  (onDismiss)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
  (onVerified)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
 ></app-verify-email>

 <bit-banner
  id="premium-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="premium"
  *ngIf="premiumBannerVisible$ | async"
  (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
--- a/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
@@ -1,7 +1,6 @@
 <ng-container *ngIf="freeTrial$ | async as freeTrial">
  <bit-banner
    id="update-browser-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
    bannerType="premium"
    icon="bwi-billing"
    [showClose]="false"
--- a/libs/components/src/banner/banner.component.ts
+++ b/libs/components/src/banner/banner.component.ts
@@ -27,6 +27,11 @@ const defaultIcon: Record<BannerType, string> = {
  selector: "bit-banner",
  templateUrl: "./banner.component.html",
  imports: [CommonModule, IconButtonModule, I18nPipe],
+  host: {
+    // Account for bit-layout's padding
+    class:
+      "tw-flex tw-flex-col [bit-layout_&]:-tw-mx-8 [bit-layout_&]:-tw-my-6 [bit-layout_&]:tw-pb-6",
+  },
 })
 export class BannerComponent implements OnInit {
  readonly bannerType = input<BannerType>("info");
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -23,8 +23,9 @@
      [id]="mainContentId"
      tabindex="-1"
      bitScrollLayoutHost
-      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ms-0 tw-ms-16"
+      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 md:tw-ms-0 tw-ms-16"
    >
+      <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
      <ng-content></ng-content>

      <!-- overlay backdrop for side-nav -->
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
@@ -89,9 +89,7 @@ class KitchenSinkDialog {
  selector: "bit-tab-main",
  imports: [KitchenSinkSharedModule, KitchenSinkTable, KitchenSinkToggleList, KitchenSinkForm],
  template: `
-    <bit-banner bannerType="info" class="-tw-m-6 tw-flex tw-flex-col tw-pb-6">
-      Kitchen Sink test zone
-    </bit-banner>
+    <bit-banner bannerType="info"> Kitchen Sink test zone </bit-banner>

    <p class="tw-mt-4">
      <bit-breadcrumbs>