From 89e666c8dbdbf590c9314240e877d8507c1bbaca Mon Sep 17 00:00:00 2001
From: Mohammad Cheikh <moe@turnkey.io>
Date: Mon, 9 Dec 2024 17:05:54 -0500
Subject: [PATCH] updated styling based on dec9 feedback

---
 .../react-components/src/app/dashboard/dashboard.css | 12 ++++++++++++
 examples/react-components/src/app/dashboard/page.tsx |  2 +-
 examples/react-components/src/app/index.css          |  3 +++
 examples/react-components/src/app/page.tsx           |  2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/examples/react-components/src/app/dashboard/dashboard.css b/examples/react-components/src/app/dashboard/dashboard.css
index 3a1e4a46..745b5855 100644
--- a/examples/react-components/src/app/dashboard/dashboard.css
+++ b/examples/react-components/src/app/dashboard/dashboard.css
@@ -483,3 +483,15 @@ button:hover {
   gap: 8px;
   margin: 16px 0;
 }
+
+.sonner-toaster {
+  font-family: "Inter";
+  font-size: 14px;
+  z-index: 9999;
+  pointer-events: none;
+  background-color: var(--Greyscale-20, #f5f7fb);
+}
+
+.sonner-toaster > div {
+  pointer-events: auto;
+}
diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx
index 084c5672..ee572a7c 100644
--- a/examples/react-components/src/app/dashboard/page.tsx
+++ b/examples/react-components/src/app/dashboard/page.tsx
@@ -1104,7 +1104,7 @@ export default function Dashboard() {
       <div>
         <Toaster
           position="bottom-right"
-          toastOptions={{ className: "sonner-toaster" }}
+          toastOptions={{ className: "sonner-toaster", duration: 2500 }}
         />
       </div>
     </main>
diff --git a/examples/react-components/src/app/index.css b/examples/react-components/src/app/index.css
index ea325b3a..71529fbb 100644
--- a/examples/react-components/src/app/index.css
+++ b/examples/react-components/src/app/index.css
@@ -157,8 +157,11 @@ body {
 }
 
 .sonner-toaster {
+  font-family: "Inter";
+  font-size: 14px;
   z-index: 9999;
   pointer-events: none;
+  background-color: var(--Greyscale-20, #f5f7fb);
 }
 
 .sonner-toaster > div {
diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
index 1eaf87a2..e3bb03e8 100644
--- a/examples/react-components/src/app/page.tsx
+++ b/examples/react-components/src/app/page.tsx
@@ -281,7 +281,7 @@ export default function AuthPage() {
       <div>
         <Toaster
           position="bottom-right"
-          toastOptions={{ className: "sonner-toaster" }}
+          toastOptions={{ className: "sonner-toaster", duration: 2500 }}
         />
       </div>
     </main>