user button ui

frontend/app/(app)/dashboard/page.tsx

@@ -20,7 +20,7 @@ export default async function DashboardPage() {
 
   return (
     <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
-      <Navbar />
+      <Navbar userId={user.id} />
       <Dashboard sandboxes={data} />
     </div>
   )

frontend/app/globals.css

@@ -57,7 +57,7 @@
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
  
-    --destructive: 0 62.8% 50%;
+    --destructive: 0 62.8% 60%;
     --destructive-foreground: 0 0% 98%;
  
     --border: 0 0% 14.9%;

frontend/components/dashboard/navbar/index.tsx

@@ -1,17 +1,12 @@
-"use client"
-
 import { UserButton } from "@clerk/nextjs"
 import { dark } from "@clerk/themes"
 import Image from "next/image"
 import Link from "next/link"
 import Logo from "@/assets/logo.svg"
-import { Input } from "../../ui/input"
-import { Search } from "lucide-react"
-import { Suspense, useCallback, useEffect, useState } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
 import DashboardNavbarSearch from "./search"
+import DashboardUserButton from "./userButton"
 
-export default function DashboardNavbar() {
+export default function DashboardNavbar({ userId }: { userId: string }) {
   return (
     <div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
@@ -25,12 +20,7 @@ export default function DashboardNavbar() {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
-        <UserButton
-          appearance={{
-            baseTheme: dark,
-          }}
-          afterSignOutUrl="/"
-        />
+        <DashboardUserButton userId={userId} />
       </div>
     </div>
   )

frontend/components/dashboard/navbar/search.tsx

@@ -2,8 +2,8 @@
 
 import { Input } from "../../ui/input"
 import { Search } from "lucide-react"
-import { useCallback, useEffect, useState } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
 
 export default function DashboardNavbarSearch() {
   const [search, setSearch] = useState("")

frontend/components/dashboard/navbar/userButton.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { LogOut, Pencil } from "lucide-react"
+
+export default function DashboardUserButton({ userId }: { userId: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <div className="w-9 h-9 rounded-full overflow-hidden bg-red-500"></div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem className="cursor-pointer">
+          <Pencil className="mr-2 h-4 w-4" />
+          <span>Edit Profile</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="!text-destructive cursor-pointer">
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log Out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -25,11 +25,12 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
         <Ellipsis className="w-4 h-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40">
-        <DropdownMenuItem>
+        <DropdownMenuItem className="cursor-pointer">
           <Lock className="mr-2 h-4 w-4" />
           <span>Make Private</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="!text-destructive">
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="!text-destructive cursor-pointer">
           <Trash2 className="mr-2 h-4 w-4" />
           <span>Delete Project</span>
         </DropdownMenuItem>