From 5dc337e2ff9543d67b2e1e1da5cc1184269b7592 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Thu, 18 Apr 2024 15:07:15 -0400
Subject: [PATCH] user button ui

---
 frontend/app/(app)/dashboard/page.tsx         |  2 +-
 frontend/app/globals.css                      |  2 +-
 .../components/dashboard/navbar/index.tsx     | 16 ++--------
 .../components/dashboard/navbar/search.tsx    |  4 +--
 .../dashboard/navbar/userButton.tsx           | 32 +++++++++++++++++++
 .../dashboard/projectCard/dropdown.tsx        |  5 +--
 6 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 frontend/components/dashboard/navbar/userButton.tsx

diff --git a/frontend/app/(app)/dashboard/page.tsx b/frontend/app/(app)/dashboard/page.tsx
index 5d1d60d..467d1c7 100644
--- a/frontend/app/(app)/dashboard/page.tsx
+++ b/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>
   )
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index bf37eba..2803169 100644
--- a/frontend/app/globals.css
+++ b/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%;
diff --git a/frontend/components/dashboard/navbar/index.tsx b/frontend/components/dashboard/navbar/index.tsx
index d44ea82..3a31729 100644
--- a/frontend/components/dashboard/navbar/index.tsx
+++ b/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>
   )
diff --git a/frontend/components/dashboard/navbar/search.tsx b/frontend/components/dashboard/navbar/search.tsx
index 6546de7..a223610 100644
--- a/frontend/components/dashboard/navbar/search.tsx
+++ b/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("")
diff --git a/frontend/components/dashboard/navbar/userButton.tsx b/frontend/components/dashboard/navbar/userButton.tsx
new file mode 100644
index 0000000..c8a3aae
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/frontend/components/dashboard/projectCard/dropdown.tsx b/frontend/components/dashboard/projectCard/dropdown.tsx
index 975d101..bd45df8 100644
--- a/frontend/components/dashboard/projectCard/dropdown.tsx
+++ b/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>