CL-252/update toast (#10996)

apps/browser/src/popup/app.module.ts

@@ -104,7 +104,7 @@ import "../platform/popup/locales";
       maxOpened: 2,
       autoDismiss: true,
       closeButton: true,
-      positionClass: "toast-bottom-full-width",
+      positionClass: "toast-top-full-width",
     }),
     BrowserAnimationsModule,
     BrowserModule,

libs/components/src/toast/toast.component.html

@@ -1,5 +1,5 @@
 <div
-  class="tw-mb-1 tw-min-w-[--bit-toast-width] tw-text-contrast tw-flex tw-flex-col tw-justify-between tw-rounded-md tw-pointer-events-auto tw-cursor-default {{
+  class="tw-mb-1 tw-min-w-[--bit-toast-width] tw-text-main tw-flex tw-flex-col tw-justify-between tw-rounded-md tw-pointer-events-auto tw-cursor-default tw-overflow-hidden tw-shadow-lg {{
     bgColor
   }}"
 >
@@ -8,17 +8,22 @@
     <div>
       <span class="tw-sr-only">{{ variant | i18n }}</span>
       <p *ngIf="title" data-testid="toast-title" class="tw-font-semibold tw-mb-0">{{ title }}</p>
-      <p *ngFor="let m of messageArray" data-testid="toast-message" class="tw-mb-2 last:tw-mb-0">
+      <p
+        bitTypography="body2"
+        *ngFor="let m of messageArray"
+        data-testid="toast-message"
+        class="tw-mb-2 last:tw-mb-0"
+      >
         {{ m }}
       </p>
     </div>
     <button
       class="tw-ml-auto"
       bitIconButton="bwi-close"
-      buttonType="contrast"
+      buttonType="main"
       type="button"
       (click)="this.onClose.emit()"
     ></button>
   </div>
-  <div class="tw-h-1 tw-w-full tw-bg-text-contrast/70" [style.width]="progressWidth + '%'"></div>
+  <div class="tw-h-1 tw-w-full tw-bg-text-main/30" [style.width]="progressWidth + '%'"></div>
 </div>

libs/components/src/toast/toast.component.ts

@@ -2,25 +2,26 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
 
 export type ToastVariant = "success" | "error" | "info" | "warning";
 
 const variants: Record<ToastVariant, { icon: string; bgColor: string }> = {
   success: {
-    icon: "bwi-check",
-    bgColor: "tw-bg-success-600",
+    icon: "bwi-check-circle",
+    bgColor: "tw-bg-success-100",
   },
   error: {
     icon: "bwi-error",
-    bgColor: "tw-bg-danger-600",
+    bgColor: "tw-bg-danger-100",
   },
   info: {
     icon: "bwi-info-circle",
-    bgColor: "tw-bg-info-600",
+    bgColor: "tw-bg-info-100",
   },
   warning: {
     icon: "bwi-exclamation-triangle",
-    bgColor: "tw-bg-warning-600",
+    bgColor: "tw-bg-warning-100",
   },
 };
 
@@ -28,7 +29,7 @@ const variants: Record<ToastVariant, { icon: string; bgColor: string }> = {
   selector: "bit-toast",
   templateUrl: "toast.component.html",
   standalone: true,
-  imports: [SharedModule, IconButtonModule],
+  imports: [SharedModule, IconButtonModule, TypographyModule],
 })
 export class ToastComponent {
   @Input() variant: ToastVariant = "info";

libs/components/src/toast/toast.tokens.css

@@ -1,4 +1,5 @@
 :root {
   --bit-toast-width: 19rem;
   --bit-toast-width-full: 96%;
+  --bit-toast-top: 4.3rem;
 }

libs/components/src/toast/toastr.css

@@ -21,3 +21,7 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.toast-container.toast-top-full-width {
+  top: var(--bit-toast-top);
+}