userbutton ui

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -7,8 +7,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
@@ -52,7 +50,6 @@ export default function ProjectCardDropdown({
             </>
           )}
         </DropdownMenuItem>
-        <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={(e) => {
             e.stopPropagation()

frontend/components/editor/live/avatars.tsx

@@ -1,21 +1,33 @@
-import { useOthers, useSelf } from "@/liveblocks.config"
-import Avatar from "@/components/ui/avatar"
+"use client"
+
+import { colorClasses, colors } from "@/lib/colors"
+import { useOthers } from "@/liveblocks.config"
+import { useState } from "react"
 
 export function Avatars() {
   const users = useOthers()
-  const currentUser = useSelf()
+
+  const colorNames = Object.keys(colors)
+  const [activeColors, setActiveColors] = useState([])
 
   return (
-    <div className="flex">
+    <div className="flex space-x-2">
       {users.map(({ connectionId, info }) => {
-        return <Avatar key={connectionId} name={info.name} />
-      })}
+        const c = colorNames[
+          connectionId % colorNames.length
+        ] as keyof typeof colors
 
-      {currentUser && (
-        <div className="relative ml-8 first:ml-0">
-          <Avatar name={currentUser.info.name} />
+        return (
+          <div
+            className={`w-8 h-8 font-mono rounded-full ring-1 ${colorClasses[c].ring} ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr ${colorClasses[c].bg} flex items-center justify-center text-xs font-medium`}
+          >
+            {info.name
+              .split(" ")
+              .slice(0, 2)
+              .map((letter) => letter[0].toUpperCase())}
           </div>
-      )}
+        )
+      })}
     </div>
   )
 }

frontend/components/ui/userButton.tsx

@@ -29,13 +29,19 @@ export default function UserButton({ userData }: { userData: User }) {
             .map((name) => name[0].toUpperCase())}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent className="w-40" align="end">
+        <div className="py-1.5 px-2 w-full">
+          <div className="font-medium">{userData.name}</div>
+          <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
+            {userData.email}
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
         <DropdownMenuItem className="cursor-pointer">
           <Pencil className="mr-2 h-4 w-4" />
           <span>Edit Profile</span>
-          {/* open modal with name and email (disabled) */}
         </DropdownMenuItem>
-        <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => signOut(() => router.push("/"))}
           className="!text-destructive cursor-pointer"

frontend/lib/colors.ts

@@ -0,0 +1,40 @@
+export const colors = {
+  red: "#dc2626",
+  orange: "#ea580c",
+  yellow: "#ca8a04",
+  green: "#16a34a",
+  blue: "#0284c7",
+  purple: "#7c3aed",
+  pink: "#db2777",
+}
+
+export const colorClasses = {
+  red: {
+    ring: "ring-red-700",
+    bg: "from-red-950 to-red-600",
+  },
+  orange: {
+    ring: "ring-orange-700",
+    bg: "from-orange-950 to-orange-600",
+  },
+  yellow: {
+    ring: "ring-yellow-700",
+    bg: "from-yellow-950 to-yellow-600",
+  },
+  green: {
+    ring: "ring-green-700",
+    bg: "from-green-950 to-green-600",
+  },
+  blue: {
+    ring: "ring-blue-700",
+    bg: "from-blue-950 to-blue-600",
+  },
+  purple: {
+    ring: "ring-purple-700",
+    bg: "from-purple-950 to-purple-600",
+  },
+  pink: {
+    ring: "ring-pink-700",
+    bg: "from-pink-950 to-pink-600",
+  },
+}