Oliver/presenton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(nextjs): Sonner Colors & Design changed

Browse source
This commit is contained in:
shiva raj badu 2025-07-23 17:58:07 +05:45
parent 7dd95d5443
commit f6ff67714e
No known key found for this signature in database
3 changed files with 155 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
servers/nextjs/app/layout.tsx
View file

@ -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>
);

6
servers/nextjs/components/ui/overlay-loader.tsx
View file

@ -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>

169
servers/nextjs/components/ui/sonner.tsx
View file

@ -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}
/>
</>
)
}