updated styling based on dec9 feedback

tkhq · Dec 9, 2024 · 89e666c · 89e666c
1 parent 07a03af
commit 89e666c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>