simplify toast styling hook

microsoft · Feb 12, 2024 · 60790f4 · 60790f4
1 parent c78e6a2
commit 60790f4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -38,7 +38,7 @@ export const App = () => {
                     ...makeToast("success", "🎓", 2000),
                     hideIcon: true,
                     hideDismissBtn: true,
-                    textContainerClass: "app-large-toast",
+                    className: "app-large-toast",
                 });
 
                 setInited(true);

diff --git a/teachertool/src/components/Toasts.tsx b/teachertool/src/components/Toasts.tsx
@@ -44,15 +44,15 @@ const ToastNotification: React.FC<IToastNotificationProps> = ({ toast }) => {
     }, [sliderActive]);
 
     return (
-        <div className={classList(css["toast"], css[toast.type])}>
+        <div className={classList(css["toast"], css[toast.type], toast.className)}>
             <div className={css["toast-content"]}>
                 {!toast.hideIcon && (
                     <div className={classList(css["icon-container"], css[toast.type])}>
                         {toast.icon ?? icons[toast.type]}
                     </div>
                 )}
-                <div className={classList(css["text-container"], "tt-toast-text-container", toast.textContainerClass)}>
-                    {toast.text && <div className={classList(css["text"], "tt-toast-text")}>{toast.text}</div>}
+                <div className={css["text-container"]}>
+                    {toast.text && <div className={css["text"]}>{toast.text}</div>}
                     {toast.detail && <div className={css["detail"]}>{toast.detail}</div>}
                     {toast.jsx && <div>{toast.jsx}</div>}
                 </div>

diff --git a/teachertool/src/types/index.ts b/teachertool/src/types/index.ts
@@ -14,7 +14,7 @@ export type Toast = {
     showSpinner?: boolean; // if true, will show a spinner icon
     hideIcon?: boolean; // if true, will hide the type-specific icon
     icon?: string; // if provided, will override the type-specific icon
-    textContainerClass?: string; // if provided, will be appended to the text container class list
+    className?: string; // if provided, will be appended to the toast's class list
 };
 
 export type ToastWithId = Toast & {