From f6ff67714e891e565df865bb1fa454e5f9061d01 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Wed, 23 Jul 2025 17:58:07 +0545
Subject: [PATCH] refactor(nextjs): Sonner Colors & Design changed

---
 servers/nextjs/app/layout.tsx                 |   4 +-
 .../nextjs/components/ui/overlay-loader.tsx   |   6 -
 servers/nextjs/components/ui/sonner.tsx       | 169 ++++++++++++++++--
 3 files changed, 155 insertions(+), 24 deletions(-)

diff --git a/servers/nextjs/app/layout.tsx b/servers/nextjs/app/layout.tsx
index 7002cb00..a90f163d 100644
--- a/servers/nextjs/app/layout.tsx
+++ b/servers/nextjs/app/layout.tsx
@@ -4,7 +4,7 @@ import { Roboto, Instrument_Sans } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
 import { LayoutProvider } from "./(presentation-generator)/context/LayoutContext";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 
 
 const inter = localFont({
@@ -91,7 +91,7 @@ export default function RootLayout({
             {children}
           </LayoutProvider>
         </Providers>
-        <Toaster position="top-center" richColors={true} />
+        <Toaster position="top-center" />
       </body>
     </html>
   );
diff --git a/servers/nextjs/components/ui/overlay-loader.tsx b/servers/nextjs/components/ui/overlay-loader.tsx
index f64995d9..58a98a6e 100644
--- a/servers/nextjs/components/ui/overlay-loader.tsx
+++ b/servers/nextjs/components/ui/overlay-loader.tsx
@@ -76,13 +76,7 @@ export const OverlayLoader = ({
                         </p>
                         {extra_info && <p className="text-white/80 text-xs text-center font-semibold font-inter">{extra_info}</p>}
                     </>
-                    // <div className="flex flex-col items-center gap-4">
-                    //     <div className="relative">
-                    //         <div className="absolute inset-0 bg-gradient-to-r from-[#9034EA] to-[#5146E5] blur-xl opacity-20" />
-                    //         <Loader text={text} />
-                    //     </div>
 
-                    // </div>
                 )}
             </div>
         </div>
diff --git a/servers/nextjs/components/ui/sonner.tsx b/servers/nextjs/components/ui/sonner.tsx
index 452f4d9f..ab735da6 100644
--- a/servers/nextjs/components/ui/sonner.tsx
+++ b/servers/nextjs/components/ui/sonner.tsx
@@ -9,22 +9,159 @@ const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
   return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
+    <>
+      <style jsx global>{`
+        /* Base toast styling */
+        [data-sonner-toast] {
+          border-radius: 12px !important;
+          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+          backdrop-filter: blur(8px) !important;
+        }
+        /* Success Toast */
+        [data-sonner-toast][data-type="success"] {
+          background: rgb(248 250 252) !important; /* slate-50 */
+          border: 1px solid rgb(28, 138, 68) !important; /* green-500 border */
+          border-left: 4px solid rgb(28, 138, 68) !important; /* green-500 left accent */
+        }
+        [data-sonner-toast][data-type="success"] [data-title] {
+          color: rgb(15 23 42) !important; /* slate-900 */
+          font-weight: 600 !important;
+        }
+        [data-sonner-toast][data-type="success"] [data-description] {
+          color: rgb(71 85 105) !important; /* slate-600 */
+        }
+
+        /* Error Toast */
+        [data-sonner-toast][data-type="error"] {
+          background: rgb(248 250 252) !important; /* slate-50 */
+          border: 1px solid rgb(186, 48, 48) !important; /* red-500 border */
+          border-left: 4px solid rgb(186, 48, 48) !important; /* red-500 left accent */
+        }
+        [data-sonner-toast][data-type="error"] [data-title] {
+          color: rgb(15 23 42) !important; /* slate-900 */
+          font-weight: 600 !important;
+        }
+        [data-sonner-toast][data-type="error"] [data-description] {
+          color: rgb(71 85 105) !important; /* slate-600 */
+        }
+
+        /* Info Toast */
+        [data-sonner-toast][data-type="info"] {
+          background: rgb(248 250 252) !important; /* slate-50 */
+          border: 1px solid rgb(59 130 246) !important; /* blue-500 border */
+          border-left: 4px solid rgb(59 130 246) !important; /* blue-500 left accent */
+        }
+        [data-sonner-toast][data-type="info"] [data-title] {
+          color: rgb(15 23 42) !important; /* slate-900 */
+          font-weight: 600 !important;
+        }
+        [data-sonner-toast][data-type="info"] [data-description] {
+          color: rgb(71 85 105) !important; /* slate-600 */
+        }
+
+        /* Warning Toast */
+        [data-sonner-toast][data-type="warning"] {
+          background: rgb(248 250 252) !important; /* slate-50 */
+          border: 1px solid rgb(245 158 11) !important; /* amber-500 border */
+          border-left: 4px solid rgb(245 158 11) !important; /* amber-500 left accent */
+        }
+        [data-sonner-toast][data-type="warning"] [data-title] {
+          color: rgb(15 23 42) !important; /* slate-900 */
+          font-weight: 600 !important;
+        }
+        [data-sonner-toast][data-type="warning"] [data-description] {
+          color: rgb(71 85 105) !important; /* slate-600 */
+        }
+
+        /* Loading Toast */
+        [data-sonner-toast][data-type="loading"] {
+          background: rgb(248 250 252) !important; /* slate-50 */
+          border: 1px solid rgb(139 92 246) !important; /* violet-500 border */
+          border-left: 4px solid rgb(139 92 246) !important; /* violet-500 left accent */
+        }
+        [data-sonner-toast][data-type="loading"] [data-title] {
+          color: rgb(15 23 42) !important; /* slate-900 */
+          font-weight: 600 !important;
+        }
+        [data-sonner-toast][data-type="loading"] [data-description] {
+          color: rgb(71 85 105) !important; /* slate-600 */
+        }
+
+        /* Dark mode */
+        .dark [data-sonner-toast][data-type="success"] {
+          background: rgb(15 23 42) !important; /* slate-900 */
+          border: 1px solid rgb(34 197 94) !important;
+          border-left: 4px solid rgb(34 197 94) !important;
+        }
+        .dark [data-sonner-toast][data-type="success"] [data-title] {
+          color: rgb(248 250 252) !important; /* slate-50 */
+        }
+        .dark [data-sonner-toast][data-type="success"] [data-description] {
+          color: rgb(148 163 184) !important; /* slate-400 */
+        }
+
+        .dark [data-sonner-toast][data-type="error"] {
+          background: rgb(15 23 42) !important; /* slate-900 */
+          border: 1px solid rgb(239 68 68) !important;
+          border-left: 4px solid rgb(239 68 68) !important;
+        }
+        .dark [data-sonner-toast][data-type="error"] [data-title] {
+          color: rgb(248 250 252) !important; /* slate-50 */
+        }
+        .dark [data-sonner-toast][data-type="error"] [data-description] {
+          color: rgb(148 163 184) !important; /* slate-400 */
+        }
+
+        .dark [data-sonner-toast][data-type="info"] {
+          background: rgb(15 23 42) !important; /* slate-900 */
+          border: 1px solid rgb(59 130 246) !important;
+          border-left: 4px solid rgb(59 130 246) !important;
+        }
+        .dark [data-sonner-toast][data-type="info"] [data-title] {
+          color: rgb(248 250 252) !important; /* slate-50 */
+        }
+        .dark [data-sonner-toast][data-type="info"] [data-description] {
+          color: rgb(148 163 184) !important; /* slate-400 */
+        }
+
+        .dark [data-sonner-toast][data-type="warning"] {
+          background: rgb(15 23 42) !important; /* slate-900 */
+          border: 1px solid rgb(245 158 11) !important;
+          border-left: 4px solid rgb(245 158 11) !important;
+        }
+        .dark [data-sonner-toast][data-type="warning"] [data-title] {
+          color: rgb(248 250 252) !important; /* slate-50 */
+        }
+        .dark [data-sonner-toast][data-type="warning"] [data-description] {
+          color: rgb(148 163 184) !important; /* slate-400 */
+        }
+
+        .dark [data-sonner-toast][data-type="loading"] {
+          background: rgb(15 23 42) !important; /* slate-900 */
+          border: 1px solid rgb(139 92 246) !important;
+          border-left: 4px solid rgb(139 92 246) !important;
+        }
+        .dark [data-sonner-toast][data-type="loading"] [data-title] {
+          color: rgb(248 250 252) !important; /* slate-50 */
+        }
+        .dark [data-sonner-toast][data-type="loading"] [data-description] {
+          color: rgb(148 163 184) !important; /* slate-400 */
+        }
+      `}</style>
+      <Sonner
+        theme={theme as ToasterProps["theme"]}
+        className="toaster group"
+        toastOptions={{
+          classNames: {
+            toast: "group toast",
+            description: "group-[.toast]:text-muted-foreground",
+            actionButton: "group-[.toast]:bg-slate-900 group-[.toast]:text-white hover:group-[.toast]:bg-slate-800 group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5",
+            cancelButton: "group-[.toast]:bg-slate-200 group-[.toast]:text-slate-700 hover:group-[.toast]:bg-slate-300 group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5",
+          },
+        }}
+        {...props}
+      />
+    </>
   )
 }