updated ui elements

app/(content)/layout.tsx

-import { MainNav } from "@/components/header"
-import DashboardNav from "@/components/nav"
-import SearchInput from "@/components/search-input"
-import { SiteFooter } from "@/components/site-footer"
-import { UserAccountNav } from "@/components/user-nav"
+import { Header } from "@/components/nav-header"
+import { Sidebar } from "@/components/nav-sidebar"
 import { dashboardConfig } from "@/lib/config/dashboard"
 import { getCurrentUser } from "@/lib/session"
 
@@ -15,25 +12,12 @@ export default async function ContentLayout({
     const user = await getCurrentUser()
 
     return (
-        <main className="flex min-h-screen flex-col space-y-6">
-            <header className="sticky top-0 z-50 border-b bg-background">
-                <div className="container flex h-16 items-center justify-between py-4">
-                    <MainNav />
-                    <SearchInput className="p-3 w-3/6 2xl:w-2/6" />
-                    {user && <UserAccountNav
-                        user={{
-                            name: user?.name,
-                            image: user?.image,
-                            username: user?.username,
-                        }}
-                    />}
-                    {!user && <p className="w-8"></p>}
-                </div>
-            </header>
+        <main className="flex min-h-screen flex-col space-y-6 align-middle">
+            <Header user={user} />
 
             <div className="container grid flex-1 gap-12 grid-cols-5">
                 <aside className="self-start sticky top-[89px] col-span-1">
-                    <DashboardNav items={dashboardConfig.sidebarNav} />
+                    <Sidebar items={dashboardConfig.sidebarNav} user={user} />
                 </aside>
                 <div className="flex flex-1 flex-col w-full h-full col-span-4 pb-6">
                     {children}

app/page.tsx

@@ -14,7 +14,7 @@ export default async function IndexPage() {
                 <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
                     <div className="flex items-center">
                         <Link href="/home" className={cn("rounded-full p-3 hover:bg-accent")}>
-                            <GameUnityLogo className="h-8 w-8" />
+                            <GameUnityLogo className="h-10 w-10" />
                         </Link>
                     </div>
                     <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">

components/header.tsx

-"use client"
-
-import Link from "next/link"
-
-import { GameUnityLogo } from "./logo"
-
-export function MainNav() {
-    return (
-        <div className="flex gap-6 md:gap-10">
-            <Link href="/home" className="items-center space-x-2 flex">
-                <GameUnityLogo className="h-8 w-8" />
-            </Link>
-        </div>
-    )
-}
\ No newline at end of file

components/logo.tsx

@@ -7,4 +7,4 @@ export function GameUnityLogo({ className }: { className?: string }) {
             <Icons.logoWhite className={`hidden dark:block ${className}`} />
         </>
     )
-}
+}
\ No newline at end of file

components/nav-header.tsx

+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import { User } from "next-auth"
+import { GameUnityLogo } from "./logo"
+import SearchInput from "./search-input"
+import { Button, buttonVariants } from "./ui/button"
+import { UserAccountDropdown } from "./user-nav"
+
+export const Header = ({ user }: { user: User | undefined }) => {
+    return (
+        <header className="sticky top-0 z-50 border-b bg-background">
+            <div className="container flex h-16 items-center justify-between">
+                <div className="flex gap-6 md:gap-10">
+                    <Link href="/home" className="items-center space-x-2 flex">
+                        <Button variant="ghost" size="logo">
+                            <GameUnityLogo className="h-8 w-8" />
+                        </Button>
+                    </Link>
+                </div>
+
+                <SearchInput className="p-3 w-3/6 2xl:w-2/6" />
+
+                {user &&
+                    <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }))}>
+                        <UserAccountDropdown
+                            user={{
+                                name: user.name,
+                                image: user.image,
+                                username: user.username,
+                            }}
+                        />
+                    </div>
+                }
+            </div>
+        </header>
+    )
+}
\ No newline at end of file

components/nav.tsx → components/nav-sidebar.tsx

@@ -4,31 +4,26 @@ import { Icons, IconsType } from "@/components/icons"
 import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { SidebarNavItem } from "@/types"
-import { useSession } from "next-auth/react"
+import { User } from "next-auth"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { ModeToggle } from "./mode-toggle"
 
-interface DashboardNavProps {
-    items: SidebarNavItem[]
-}
-
-export default function DashboardNav({ items }: DashboardNavProps) {
+export const Sidebar = ({ items, user }: { items: SidebarNavItem[], user: User | undefined }) => {
     const path = usePathname()
-    const { data: session } = useSession()
 
     if (!items?.length) {
         return null
     }
 
-    const visibleItems = session ? items : items.slice(0, 2)
+    const visibleItems = user ? items : items.slice(0, 2)
 
     return (
         <nav className="grid items-start gap-2">
             {visibleItems.map((item, index) => {
                 const Icon = Icons[item.icon as keyof IconsType || "arrowRight"]
                 if (item.title === "My Profile") {
-                    item.href = `/${session?.user?.username}`
+                    item.href = `/${user?.username}`
                 }
                 return (
                     item.href && (
@@ -46,10 +41,9 @@ export default function DashboardNav({ items }: DashboardNavProps) {
                         </Link>
                     )
                 )
-
             })}
             <ModeToggle />
-            {!session && (
+            {!user && (
                 <div className="mt-24 space-y-3 justify-center text-center">
                     <Link href="/login" className={cn(buttonVariants({ size: "lg" }), "w-full")}>
                         Log In

components/ui/alert-dialog.tsx

+"use client"
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react"
+
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = ({
+    className,
+    ...props
+}: AlertDialogPrimitive.AlertDialogPortalProps) => (
+    <AlertDialogPrimitive.Portal className={cn(className)} {...props} />
+)
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
+
+const AlertDialogOverlay = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => (
+    <AlertDialogPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPortal>
+        <AlertDialogOverlay />
+        <AlertDialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+                className
+            )}
+            {...props}
+        />
+    </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold", className)}
+        {...props}
+    />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Action>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Action
+        ref={ref}
+        className={cn(buttonVariants(), className)}
+        {...props}
+    />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Cancel
+        ref={ref}
+        className={cn(
+            buttonVariants({ variant: "outline" }),
+            "mt-2 sm:mt-0",
+            className
+        )}
+        {...props}
+    />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+    AlertDialog, AlertDialogAction,
+    AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger
+}

components/ui/alert.tsx

@@ -4,13 +4,13 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-    "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+    "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
     {
         variants: {
             variant: {
                 default: "bg-background text-foreground",
                 destructive:
-                    "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
             },
         },
         defaultVariants: {

components/ui/button.tsx

 import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
@@ -13,17 +13,18 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "text-primary border-primary border-2 input hover:bg-accent",
+                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
                 hover: "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:ring-2 hover:ring-ring hover:ring-offset-2",
-                link: "underline-offset-4 hover:underline text-primary",
             },
             size: {
-                default: "h-10 py-2 px-4",
-                sm: "h-9 px-3 rounded-md",
-                lg: "h-11 px-8 rounded-full",
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-full px-8",
+                logo: "h-12 w-12 rounded-full",
                 icon: "h-10 w-10 rounded-full",
                 option: "h-8 w-8 rounded-full",
             },
@@ -56,4 +57,3 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 export { Button, buttonVariants }
-

components/ui/card.tsx

@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     <h3
         ref={ref}
         className={cn(
-            "text-lg font-semibold leading-none tracking-tight",
+            "text-2xl font-semibold leading-none tracking-tight",
             className
         )}
         {...props}
@@ -70,11 +70,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("flex items-center p-6 pt-0", className)}
+        className={cn(" flex items-center p-6 pt-0", className)}
         {...props}
     />
 ))
 CardFooter.displayName = "CardFooter"
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
-

components/ui/dialog.tsx

@@ -12,14 +12,9 @@ const DialogTrigger = DialogPrimitive.Trigger
 
 const DialogPortal = ({
     className,
-    children,
     ...props
 }: DialogPrimitive.DialogPortalProps) => (
-    <DialogPrimitive.Portal className={cn(className)} {...props}>
-        <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-            {children}
-        </div>
-    </DialogPrimitive.Portal>
+    <DialogPrimitive.Portal className={cn(className)} {...props} />
 )
 DialogPortal.displayName = DialogPrimitive.Portal.displayName
 
@@ -30,7 +25,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+            "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             className
         )}
         {...props}
@@ -47,7 +42,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
                 className
             )}
             {...props}

components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             className
         )}
         {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 className
             )}
             {...props}

components/ui/form.tsx

@@ -169,4 +169,3 @@ export {
     FormDescription, FormField, FormItem,
     FormLabel, FormMessage, useFormField
 }
-

components/ui/hover-card.tsx

@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
         align={align}
         sideOffset={sideOffset}
         className={cn(
-            "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in zoom-in-90",
+            "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             className
         )}
         {...props}

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <input
                 type={type}
                 className={cn(
-                    "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                     className
                 )}
                 ref={ref}

components/ui/select.tsx

@@ -40,8 +40,9 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
-                position === "popper" && "translate-y-1",
+                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
             )}
             position={position}

components/ui/toast.tsx

@@ -23,13 +23,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-    "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+    "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
     {
         variants: {
             variant: {
-                default: "bg-background border",
+                default: "border bg-background",
                 destructive:
-                    "group destructive border-destructive bg-destructive text-destructive-foreground",
+                    "destructive group border-destructive bg-destructive text-destructive-foreground",
             },
         },
         defaultVariants: {
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
     <ToastPrimitives.Action
         ref={ref}
         className={cn(
-            "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+            "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
             className
         )}
         {...props}

components/user-nav.tsx

@@ -18,13 +18,13 @@ interface UserAccountNavProps extends React.HTMLAttributes<HTMLDivElement> {
     user: Pick<User & { username: UserUsername }, "name" | "image" | "username">
 }
 
-export function UserAccountNav({ user }: UserAccountNavProps) {
+export function UserAccountDropdown({ user }: UserAccountNavProps) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger className="rounded-full">
                 <UserAvatar
                     user={{ username: user.username ? user.username : "", image: user.image || null }}
-                    className="h-8 w-8"
+                    className="h-8 w-8 shadow-none focus:shadow-none"
                 />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">

package-lock.json

@@ -11,6 +11,7 @@
         "@auth/prisma-adapter": "^1.0.0",
         "@hookform/resolvers": "^3.1.1",
         "@prisma/client": "^4.16.1",
+        "@radix-ui/react-alert-dialog": "^1.0.4",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
         "@radix-ui/react-avatar": "^1.0.3",
         "@radix-ui/react-dialog": "^1.0.4",
@@ -1677,6 +1678,34 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.4.tgz",
+      "integrity": "sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dialog": "1.0.4",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",

package.json

@@ -17,6 +17,7 @@
     "@auth/prisma-adapter": "^1.0.0",
     "@hookform/resolvers": "^3.1.1",
     "@prisma/client": "^4.16.1",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -70,4 +71,4 @@
     "tailwindcss": "3.3.2",
     "typescript": "^5.1.6"
   }
-}
+}
\ No newline at end of file