Refactor profile and form

src/components/Navigation/AccountDropdownList.tsx

@@ -20,7 +20,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
           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
+          Account
         </a>
       </li>
       <li className="px-1">

src/components/RoadCard/SelectionButton.tsx

@@ -1,7 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { cn } from '../../lib/classname';
+import type { LucideIcon } from 'lucide-react';
 
 type SelectionButtonProps = {
+  icon?: LucideIcon;
   text: string;
   isDisabled: boolean;
   isSelected: boolean;
@@ -9,13 +11,21 @@ type SelectionButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function SelectionButton(props: SelectionButtonProps) {
-  const { text, isDisabled, isSelected, onClick, className, ...rest } = props;
+  const {
+    icon: Icon,
+    text,
+    isDisabled,
+    isSelected,
+    onClick,
+    className,
+    ...rest
+  } = props;
 
   return (
     <button
       {...rest}
       className={cn(
-        'rounded-md border p-1 px-2 text-sm',
+        'rounded-md flex items-center border p-1 px-2 text-sm',
         isSelected ? 'border-gray-500 bg-gray-300' : '',
         !isDisabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-40',
         className,
@@ -23,6 +33,7 @@ export function SelectionButton(props: SelectionButtonProps) {
       disabled={isDisabled}
       onClick={onClick}
     >
+      {Icon && <Icon size={13} className="mr-1.5" />}
       {text}
     </button>
   );

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -101,12 +101,17 @@ export function UpdateProfileForm() {
           />
         </div>
         <div className="flex w-full flex-col">
+          <div className="flex items-center justify-between">
             <label
               htmlFor="email"
               className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
             >
               Email
             </label>
+            <a href='/account/settings' className="text-purple-700 text-xs underline hover:text-purple-800">
+              Visit settings page to change email
+            </a>
+          </div>
           <input
             type="email"
             name="email"

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -8,8 +8,9 @@ import type {
   UserDocument,
 } from '../../api/user';
 import { SelectionButton } from '../RoadCard/SelectionButton';
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight, Globe, LockIcon } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 
 type RoadmapType = {
   id: string;
@@ -28,6 +29,7 @@ export function UpdatePublicProfileForm() {
 
   const toast = useToast();
 
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
   const [publicProfileUrl, setPublicProfileUrl] = useState('');
   const [isAvailableForHire, setIsAvailableForHire] = useState(false);
   const [isEmailVisible, setIsEmailVisible] = useState(true);
@@ -186,6 +188,10 @@ export function UpdatePublicProfileForm() {
 
   return (
     <>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
+      )}
+
       <div className="mt-10 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <h3 className="text-2xl font-bold">Public Profile</h3>
@@ -200,6 +206,7 @@ export function UpdatePublicProfileForm() {
           <SelectionButton
             type="button"
             text="Public"
+            icon={Globe}
             isDisabled={profileVisibility === 'public'}
             isSelected={profileVisibility === 'public'}
             onClick={() => updateProfileVisibility('public')}
@@ -207,6 +214,7 @@ export function UpdatePublicProfileForm() {
           <SelectionButton
             type="button"
             text="Private"
+            icon={LockIcon}
             isDisabled={profileVisibility === 'private'}
             isSelected={profileVisibility === 'private'}
             onClick={() => updateProfileVisibility('private')}
@@ -262,7 +270,9 @@ export function UpdatePublicProfileForm() {
         </div>
 
         <div className="rounded-md border p-4">
-          <h3 className="text-sm font-medium">Show my Learning Activity</h3>
+          <h3 className="text-sm font-medium">
+            Pick the roadmaps to show your progress
+          </h3>
           <div className="mt-3 flex items-center gap-2">
             <SelectionButton
               type="button"
@@ -276,7 +286,7 @@ export function UpdatePublicProfileForm() {
             />
             <SelectionButton
               type="button"
-              text="Hide my Activity"
+              text="Hide my Progress"
               isDisabled={false}
               isSelected={roadmapVisibility === 'none'}
               onClick={() => {
@@ -286,7 +296,9 @@ export function UpdatePublicProfileForm() {
             />
           </div>
 
-          <h3 className="mt-4 text-sm font-medium">Only Following Roadmaps</h3>
+          <h3 className="mt-4 text-sm font-medium">
+            Only show the selected roadmaps
+          </h3>
           {publicRoadmaps.length > 0 ? (
             <div className="mt-3 flex flex-wrap items-center gap-2">
               {publicRoadmaps.map((r) => (
@@ -326,7 +338,9 @@ export function UpdatePublicProfileForm() {
         </div>
 
         <div className="rounded-md border p-4">
-          <h3 className="text-sm font-medium">Show my Custom Roadmaps</h3>
+          <h3 className="text-sm font-medium">
+            Pick the custom roadmaps to show on your profile
+          </h3>
           <div className="mt-3 flex items-center gap-2">
             <SelectionButton
               type="button"
@@ -350,7 +364,9 @@ export function UpdatePublicProfileForm() {
             />
           </div>
 
-          <h3 className="mt-4 text-sm font-medium">Only Following Roadmaps</h3>
+          <h3 className="mt-4 text-sm font-medium">
+            Only show the following selected custom roadmaps
+          </h3>
           {publicCustomRoadmaps.length > 0 ? (
             <div className="mt-3 flex flex-wrap items-center gap-2">
               {publicCustomRoadmaps.map((r) => (
@@ -377,11 +393,18 @@ export function UpdatePublicProfileForm() {
               ))}
             </div>
           ) : (
-            <p className="mt-2 rounded-lg bg-yellow-100 p-2 text-yellow-700">
-              You have not created any custom roadmaps yet.{' '}
-              <a href="/roadmaps" className="text-black underline">
-                Create a custom roadmap
-              </a>
+            <p className="mt-2 rounded-lg bg-yellow-100 p-2 text-sm text-yellow-700">
+              You do not have any custom roadmaps.{' '}
+              <button
+                type={'button'}
+                className="font-medium underline underline-offset-2 hover:text-yellow-800"
+                onClick={() => {
+                  setIsCreatingRoadmap(true);
+                }}
+              >
+                Create one now
+              </button>
+              .
             </p>
           )}
         </div>
@@ -471,7 +494,7 @@ export function UpdatePublicProfileForm() {
             </label>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex select-none items-center gap-2">
             <input
               type="checkbox"
               name="isAvailableForHire"
@@ -483,10 +506,12 @@ export function UpdatePublicProfileForm() {
               Available for Hire
             </label>
           </div>
+          {isAvailableForHire && (
             <p className="mt-1 text-sm text-slate-500">
-            Enable this if you are open to job opportunities, we will show a
-            badge on your profile to indicate that you are available for hire.
+              Make sure to keep your progress updated for
+              potential employers.
             </p>
+          )}
         </div>
 
         <button

src/components/UserPublicProfile/UserPublicProgresses.tsx

@@ -58,14 +58,9 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
         </>
       )}
 
-      {customRoadmapVisibility !== 'none' && (
+      {customRoadmapVisibility !== 'none' && customRoadmaps?.length > 0 && (
         <>
           <h2 className="mt-6 text-xs uppercase text-gray-400">My Roadmaps</h2>
-          {customRoadmaps?.length === 0 ? (
-            <div className="mt-4 text-sm text-gray-500">
-              No roadmaps added yet.
-            </div>
-          ) : (
           <ul className="mt-4 grid grid-cols-2 gap-2 max-md:grid-cols-1">
             {customRoadmaps.map((roadmap, counter) => (
               <li key={roadmap.id + counter}>
@@ -86,7 +81,6 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
               </li>
             ))}
           </ul>
-          )}
         </>
       )}
     </div>