Account dropdown changes

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -145,7 +145,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="title"
               id="title"
               required
-              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
+              className="block text-black w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
               placeholder="Enter Title"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
@@ -165,7 +165,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="description"
               required
               className={cn(
-                'block h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm',
+                'block text-black h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm',
                 isInvalidDescription && 'border-red-300 bg-red-100'
               )}
               placeholder="Enter Description"

src/components/Navigation/AccountDropdown.tsx

@@ -4,12 +4,14 @@ import { isLoggedIn } from '../../lib/jwt';
 import { AccountDropdownList } from './AccountDropdownList';
 import { DropdownTeamList } from './DropdownTeamList';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 
 export function AccountDropdown() {
   const dropdownRef = useRef(null);
 
   const [showDropdown, setShowDropdown] = useState(false);
   const [isTeamsOpen, setIsTeamsOpen] = useState(false);
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
 
   useOutsideClick(dropdownRef, () => {
     setShowDropdown(false);
@@ -22,6 +24,14 @@ export function AccountDropdown() {
 
   return (
     <div className="relative z-50 animate-fade-in">
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+          }}
+        />
+      )}
+
       <button
         className="flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
         onClick={() => {
@@ -43,7 +53,13 @@ export function AccountDropdown() {
           {isTeamsOpen ? (
             <DropdownTeamList setIsTeamsOpen={setIsTeamsOpen} />
           ) : (
-            <AccountDropdownList setIsTeamsOpen={setIsTeamsOpen} />
+            <AccountDropdownList
+              onCreateRoadmap={() => {
+                setIsCreatingRoadmap(true);
+                setShowDropdown(false);
+              }}
+              setIsTeamsOpen={setIsTeamsOpen}
+            />
           )}
         </div>
       )}

src/components/Navigation/AccountDropdownList.tsx

@@ -1,54 +1,76 @@
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, LogOut, Map, Plus, User2, Users2 } from 'lucide-react';
 import { logout } from './navigation';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+import { useState } from 'react';
 
 type AccountDropdownListProps = {
+  onCreateRoadmap: () => void;
   setIsTeamsOpen: (isOpen: boolean) => void;
 };
 
 export function AccountDropdownList(props: AccountDropdownListProps) {
-  const { setIsTeamsOpen } = props;
+  const { setIsTeamsOpen, onCreateRoadmap } = props;
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
 
   return (
     <ul>
       <li className="px-1">
         <a
           href="/account"
-          className="block rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
+          <User2 className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
           Profile
         </a>
       </li>
       <li className="px-1">
         <a
           href="/account/friends"
-          className="block rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
+          <Users2 className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Friends
         </a>
       </li>
-      <li className="px-1">
+      <li className="mt-1 border-t border-t-gray-700/60 px-1 pt-1">
+        <button
+          onClick={() => {
+            onCreateRoadmap();
+          }}
+          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+        >
+          <Plus className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
+          New Roadmap
+        </button>
+      </li>
+      <li className="border-b border-b-gray-700/60 px-1 pb-1">
         <a
           href="/account/roadmaps"
-          className="block rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
+          <Map className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Roadmaps
         </a>
       </li>
-      <li className="px-1">
+      <li className="px-1 pt-1">
         <button
-          className="group flex w-full items-center justify-between rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center justify-between rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
           onClick={() => setIsTeamsOpen(true)}
         >
-          Teams
+          <span className="flex items-center gap-2.5">
+            <Users2 className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
+            Teams
+          </span>
           <ChevronRight className="h-4 w-4 shrink-0 stroke-[2.5px] text-slate-400 group-hover:text-white" />
         </button>
       </li>
       <li className="px-1">
         <button
-          className="block w-full rounded pl-4 pr-2 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex gap-2 items-center w-full rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
           type="button"
           onClick={logout}
         >
+          <LogOut className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Logout
         </button>
       </li>