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

refactor: Update Sonner design & links updates

Browse source
This commit is contained in:
shiva raj badu 2026-03-28 00:49:31 +05:45
parent fe94efbe82
commit c6ad9de46b
No known key found for this signature in database
4 changed files with 165 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
electron/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
View file

@ -58,7 +58,7 @@ const DashboardPage: React.FC = () => {
<Link
href="/generate"
href="/upload"
className="inline-flex items-center gap-2 rounded-xl px-4 py-2.5 text-black text-sm font-semibold font-syne shadow-sm hover:shadow-md"
aria-label="Create new presentation"
style={{
@ -71,21 +71,7 @@ const DashboardPage: React.FC = () => {
<span className="md:hidden">New</span>
<ChevronRight className="w-4 h-4" />
</Link>
{/* {
<Link
href="/theme?tab=new-theme"
className="inline-flex items-center font-inter font-normal gap-2 rounded-xl px-4 py-2.5 text-black text-sm shadow-sm hover:shadow-md"
aria-label="Create new themes"
style={{
borderRadius: "48px",
background: "linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)",
}}
>
<span className="hidden md:inline">New Themes</span>
<span className="md:hidden">New</span>
<ChevronRight className="w-4 h-4" />
</Link>
} */}
</div>
</div>
</div>

6
electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
View file

@ -35,7 +35,7 @@ export const CustomTemplateCard = React.memo(function CustomTemplateCard({ templ
<img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
<span className="text-xs font-syne absolute top-2 flex gap-1 capitalize items-center left-2 rounded-[100px] px-2.5 py-1 bg-[#3A3A3AF5] text-white font-semibold z-40">
Layouts- {totalLayouts}
{totalLayouts} {totalLayouts === 1 ? 'Layout' : 'Layouts'}
</span>
<div className="p-5">
@ -206,10 +206,6 @@ const LayoutPreview = () => {
Templates
</h3>
<div className="flex gap-2.5 max-sm:w-full max-md:justify-center max-sm:flex-wrap">
<Link
href="/custom-template"
className="inline-flex items-center font-syne font-semibold gap-2 rounded-xl px-4 py-2.5 text-black text-sm shadow-sm hover:shadow-md"

2
electron/servers/nextjs/app/(presentation-generator)/outline/components/TemplateSelection.tsx
View file

@ -49,7 +49,7 @@ const BuiltInTemplateCard = memo(({ template, isSelected, onSelect }: {
onClick={handleClick}
>
<span className="text-xs font-syne absolute top-2 flex gap-1 capitalize items-center left-2 rounded-[100px] px-2.5 py-1 bg-[#3A3A3AF5] text-white font-semibold z-40">
Layouts- {template.layouts.length}
{template.layouts.length} {template.layouts.length === 1 ? 'Layout' : 'Layouts'}
</span>
<img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
<div className="p-5">

275
electron/servers/nextjs/components/ui/sonner.tsx
View file

@ -1,162 +1,209 @@
"use client"
import { useTheme } from "next-themes"
import type React from "react"
import { BadgeCheck, Loader2, ShieldAlert } from "lucide-react"
import { Toaster as Sonner } from "sonner"
type ToasterProps = React.ComponentProps<typeof Sonner>
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
const Toaster = ({ icons, ...props }: ToasterProps) => {
const defaultIcons: NonNullable<ToasterProps["icons"]> = {
success: <BadgeCheck aria-hidden="true" />,
error: <ShieldAlert aria-hidden="true" />,
info: <ShieldAlert aria-hidden="true" />,
warning: <ShieldAlert aria-hidden="true" />,
loading: <Loader2 aria-hidden="true" className="animate-spin" />,
close: <span aria-hidden="true">Got it!</span>,
}
return (
<>
<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: 500 !important;
}
[data-sonner-toast][data-type="success"] [data-description] {
color: rgb(71 85 105) !important; /* slate-600 */
/* Constrain toast width similar to the design mock */
/* Neutral "card" toast container */
[data-sonner-toast][data-styled="true"] {
border-radius: 10px !important;
border: 1px solid #E1E1E5 !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06) !important;
padding: 8px !important;
gap: 10px !important;
backdrop-filter: blur(6px) !important;
background: white !important;
}
/* 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 */
/* Typography */
[data-sonner-toast][data-styled="true"] [data-title] {
font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
}
[data-sonner-toast][data-type="error"] [data-description] {
color: rgb(71 85 105) !important; /* slate-600 */
line-height: 14px !important;
letter-spacing: 0.04em !important;
color: rgb(15 23 42) !important; /* slate-900 */
text-transform: none !important;
}
/* 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: 500 !important;
}
[data-sonner-toast][data-type="info"] [data-description] {
color: rgb(71 85 105) !important; /* slate-600 */
[data-sonner-toast][data-styled="true"] [data-description] {
font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 10px !important; /* 100% */
letter-spacing: 0.03em !important;
color: rgb(100 116 139) !important; /* slate-500 */
}
/* 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: 500 !important;
}
[data-sonner-toast][data-type="warning"] [data-description] {
color: rgb(71 85 105) !important; /* slate-600 */
[data-sonner-toast][data-styled="true"] [data-content] {
gap: 2px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Loading Toast */
[data-sonner-toast][data-type="loading"] {
/* Left icon badge */
[data-sonner-toast][data-styled="true"] [data-icon] {
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
color: rgb(51 65 85) !important; /* slate-700 */
}
[data-sonner-toast][data-styled="true"] [data-icon] svg {
width: 20px !important;
height: 20px !important;
}
/* Per-type icon colors */
[data-sonner-toast][data-type="success"] [data-icon] {
color: rgb(22, 163, 74) !important;
}
[data-sonner-toast][data-type="error"] [data-icon] {
color: rgb(220, 38, 38) !important;
}
[data-sonner-toast][data-type="info"] [data-icon] {
color: rgb(37, 99, 235) !important;
}
[data-sonner-toast][data-type="warning"] [data-icon] {
color: rgb(217, 119, 6) !important;
}
[data-sonner-toast][data-type="loading"] [data-icon] {
color: rgb(124, 58, 237) !important;
}
/* Outline buttons like the mock ("Got it!") */
[data-sonner-toast][data-styled="true"] [data-button] {
height: auto !important;
padding: 4px 8px !important;
border-radius: 6px !important;
font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
background: rgb(255 255 255) !important;
color: #3F3F3F !important;
border: 1px solid #EDEEEF !important;
box-shadow: none !important;
}
/* Always-present "Got it!" button (styled close button) */
[data-sonner-toast][data-styled="true"] [data-close-button] {
position: static !important;
inset: auto !important;
transform: none !important;
order: 9999 !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
width: auto !important;
height: auto !important;
padding: 4px 8px !important;
border-radius: 6px !important;
margin-left: auto !important;
margin-right: 0 !important;
align-self: center !important;
background: rgb(255 255 255) !important;
color: #3F3F3F !important;
border: 1px solid #EDEEEF !important;
box-shadow: none !important;
font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 14px !important;
letter-spacing: 0.02em !important;
}
[data-sonner-toast][data-styled="true"] [data-close-button]:hover {
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: 500 !important;
}
[data-sonner-toast][data-type="loading"] [data-description] {
color: rgb(71 85 105) !important; /* slate-600 */
[data-sonner-toast][data-styled="true"] [data-button]:hover {
background: rgb(248 250 252) !important; /* slate-50 */
}
/* 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-styled="true"] {
background: rgb(2 6 23) !important; /* slate-950 */
border: 1px solid rgba(148, 163, 184, 0.22) !important; /* slate-400 @ 22% */
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}
.dark [data-sonner-toast][data-type="success"] [data-title] {
.dark [data-sonner-toast][data-styled="true"] [data-title] {
color: rgb(248 250 252) !important; /* slate-50 */
}
.dark [data-sonner-toast][data-type="success"] [data-description] {
.dark [data-sonner-toast][data-styled="true"] [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-styled="true"] [data-button] {
background: rgb(2 6 23) !important;
color: rgb(248 250 252) !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
}
.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-styled="true"] [data-close-button] {
background: rgb(2 6 23) !important;
color: rgb(248 250 252) !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
}
.dark [data-sonner-toast][data-type="warning"] {
.dark [data-sonner-toast][data-styled="true"] [data-button]:hover {
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"] {
.dark [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
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"
style={{
zIndex: 999999999,
background: 'red',
}}
className="toaster group z-50 bg-white"
icons={{ ...defaultIcons, ...(icons ?? {}) }}
toastOptions={{
closeButtonAriaLabel: "Dismiss notification",
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",
actionButton:
"group-[.toast]:rounded-2xl group-[.toast]:border group-[.toast]:border-slate-200 group-[.toast]:bg-white group-[.toast]:text-slate-900 hover:group-[.toast]:bg-slate-50",
cancelButton:
"group-[.toast]:rounded-2xl group-[.toast]:border group-[.toast]:border-slate-200 group-[.toast]:bg-white group-[.toast]:text-slate-700 hover:group-[.toast]:bg-slate-50",
},
}}
{...props}