UI changes on road cards

src/components/RoadCard/RoadCardPage.tsx

@@ -44,12 +44,12 @@ export function RoadCardPage() {
 
   return (
     <>
-      <div className="mb-5 flex items-start gap-4 pt-2">
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b pt-2 pb-4">
         <StepCounter step={1} />
         <div>
           <StepLabel label="Pick progress to show (Max. 4)" />
 
-          <div className="flex min-h-[30px] flex-wrap">
+          <div className="flex flex-wrap">
             <RoadmapSelect
               selectedRoadmaps={roadmaps}
               setSelectedRoadmaps={setRoadmaps}
@@ -58,7 +58,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="mb-5 flex items-start gap-4">
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
         <StepCounter step={2} />
         <div>
           <StepLabel label="Select Mode (Dark vs Light)" />
@@ -85,7 +85,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="mb-5 flex items-start gap-4">
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
         <StepCounter step={3} />
         <div>
           <StepLabel label="Select Version" />
@@ -111,7 +111,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      <div className="mb-5 flex items-start gap-4">
+      <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
         <StepCounter step={4} />
         <div class="flex-grow">
           <StepLabel label="Share your #RoadCard with others" />

src/components/RoadCard/RoadmapSelect.tsx

@@ -33,12 +33,14 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
   }, []);
 
   const canSelectMore = selectedRoadmaps.length < 4;
+  const allProgress = progressList?.filter(
+    (progress) => progress.resourceType === 'roadmap'
+  ) || [];
 
   return (
     <div className="flex flex-wrap gap-1">
-      {progressList
-        ?.filter((progress) => progress.resourceType === 'roadmap')
-        .map((progress) => {
+      {allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
+      {allProgress?.map((progress) => {
         const isSelected = selectedRoadmaps.includes(progress.resourceId);
         const canSelect = isSelected || canSelectMore;
 
@@ -55,10 +57,7 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
                   )
                 );
               } else if (selectedRoadmaps.length < 4) {
-                  setSelectedRoadmaps([
-                    ...selectedRoadmaps,
-                    progress.resourceId,
-                  ]);
+                setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
               }
             }}
           />

src/pages/account/road-card.astro

@@ -7,7 +7,7 @@ import { RoadCardPage } from '../../components/RoadCard/RoadCardPage';
 <AccountLayout
   title='Road Card'
   noIndex={true}
-  initialLoadingMessage='Preparing card..'
+  initialLoadingMessage='Preparing card'
 >
   <AccountSidebar activePageId='road-card' activePageTitle='Road Card'>
     <RoadCardPage client:load />