Update AnonLayout BG Colors (#9180)

* update bg color * add tw breakpoint for primary content bg
bitwarden · May 14, 2024 · 3eeafc0 · 3eeafc0
1 parent 94b5768
commit 3eeafc0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 12 deletions.
diff --git a/apps/web/src/app/auth/anon-layout-wrapper.component.ts b/apps/web/src/app/auth/anon-layout-wrapper.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
 
 import { AnonLayoutComponent } from "@bitwarden/auth/angular";
@@ -10,7 +10,7 @@ import { Icon } from "@bitwarden/components";
   templateUrl: "anon-layout-wrapper.component.html",
   imports: [AnonLayoutComponent, RouterModule],
 })
-export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
+export class AnonLayoutWrapperComponent {
   protected pageTitle: string;
   protected pageSubtitle: string;
   protected pageIcon: Icon;
@@ -23,12 +23,4 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.pageSubtitle = this.i18nService.t(this.route.snapshot.firstChild.data["pageSubtitle"]);
     this.pageIcon = this.route.snapshot.firstChild.data["pageIcon"]; // don't translate
   }
-
-  ngOnInit() {
-    document.body.classList.add("layout_frontend");
-  }
-
-  ngOnDestroy() {
-    document.body.classList.remove("layout_frontend");
-  }
 }
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -1,5 +1,5 @@
 <main
-  class="tw-flex tw-min-h-screen tw-w-full tw-mx-auto tw-flex-col tw-gap-9 tw-px-4 tw-pb-4 tw-pt-14 tw-text-main"
+  class="tw-flex tw-min-h-screen tw-w-full tw-mx-auto tw-flex-col tw-gap-9 tw-bg-background-alt tw-px-4 tw-pb-4 tw-pt-14 tw-text-main"
 >
   <div class="tw-text-center">
     <div class="tw-px-8">
@@ -15,7 +15,7 @@ <h1 *ngIf="title" bitTypography="h3" class="tw-mt-8 sm:tw-text-2xl">
   </div>
   <div class="tw-mb-auto tw-mx-auto tw-flex tw-flex-col tw-items-center">
     <div
-      class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
+      class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
     >
       <ng-content></ng-content>
     </div>