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

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"

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
+    <bit-banner id="free-trial-banner" icon="bwi-billing" bannerType="premium" [showClose]="false">
-      id="free-trial-banner"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-      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"

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
+    <bit-banner *ngIf="organization.isProviderUser" [showClose]="false">
-      *ngIf="organization.isProviderUser"
-      [showClose]="false"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-    >
       {{ "accessingUsingProvider" | i18n: organization.providerName }}
     </bit-banner>
     <app-tax-id-warning

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"

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"

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"

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"

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
+        <bit-banner id="tax-id-warning-banner" bannerType="warning" (onClose)="trackDismissal()">
-          id="tax-id-warning-banner"
-          class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-          bannerType="warning"
-          (onClose)="trackDismissal()"
-        >
           {{ view.message }}
           <a
             bitLink

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,

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)"

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"

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");

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 -->

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">
+    <bit-banner bannerType="info"> Kitchen Sink test zone </bit-banner>
-      Kitchen Sink test zone
-    </bit-banner>
 
     <p class="tw-mt-4">
       <bit-breadcrumbs>