feat(frontend): add 'Start Mapping' call to action button on homepage…

… cards (#1968)
hotosm · Dec 9, 2024 · 3eadf55 · 3eadf55
1 parent 9c96041
commit 3eadf55
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx
@@ -49,6 +49,13 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
         fontSize: 22,
       },
     },
+    button: {
+      marginTop: '1rem',
+      marginLeft: '2%',
+      padding: '0.5rem 1rem',
+      fontSize: defaultTheme.typography.h5.fontSize,
+      fontWeight: 'bold',
+    },
   };
 
   return (
@@ -101,6 +108,23 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
                   {data?.location_str}
                 </p>
               </div>
+
+              {/* Start Mapping Button */}
+              <div className="fmtm-mt-[2%] fmtm-mr-[3%]">
+                <CoreModules.Button
+                  variant="contained"
+                  color="error"
+                  style={cardInnerStyles.button}
+                  onClick={(e) => {
+                    // Prevent card click
+                    e.stopPropagation();
+                    // Redirect without opening new tab
+                    window.location.href = `/mapnow/${data.id}`;
+                  }}
+                >
+                  Start Mapping
+                </CoreModules.Button>
+              </div>
             </CoreModules.Stack>
           </div>
 

diff --git a/src/frontend/src/store/slices/ThemeSlice.ts b/src/frontend/src/store/slices/ThemeSlice.ts
@@ -140,6 +140,10 @@ const initialState: themeStateType = {
         fontFamily: 'BarlowLight',
         fontSize: 16,
       },
+      h5: {
+        fontFamily: 'BarlowLight',
+        fontSize: 14,
+      },
       p: {
         fontFamily: 'Archivo',
         fontSize: 16,