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,37 +33,36 @@ 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) => {
-          const isSelected = selectedRoadmaps.includes(progress.resourceId);
-          const canSelect = isSelected || canSelectMore;
+      {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;
 
-          return (
-            <SelectionButton
-              text={progress.resourceTitle}
-              isDisabled={!canSelect}
-              isSelected={isSelected}
-              onClick={() => {
-                if (isSelected) {
-                  setSelectedRoadmaps(
-                    selectedRoadmaps.filter(
-                      (roadmap) => roadmap !== progress.resourceId
-                    )
-                  );
-                } else if (selectedRoadmaps.length < 4) {
-                  setSelectedRoadmaps([
-                    ...selectedRoadmaps,
-                    progress.resourceId,
-                  ]);
-                }
-              }}
-            />
-          );
-        })}
+        return (
+          <SelectionButton
+            text={progress.resourceTitle}
+            isDisabled={!canSelect}
+            isSelected={isSelected}
+            onClick={() => {
+              if (isSelected) {
+                setSelectedRoadmaps(
+                  selectedRoadmaps.filter(
+                    (roadmap) => roadmap !== progress.resourceId
+                  )
+                );
+              } else if (selectedRoadmaps.length < 4) {
+                setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
+              }
+            }}
+          />
+        );
+      })}
     </div>
   );
 }

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 />