From 3eadf55587bad53e9782057af8b95bdc2bb99f17 Mon Sep 17 00:00:00 2001
From: Sam <78538841+spwoodcock@users.noreply.github.com>
Date: Tue, 10 Dec 2024 03:02:17 +0545
Subject: [PATCH] feat(frontend): add 'Start Mapping' call to action button on
 homepage cards (#1968)

---
 .../components/home/ExploreProjectCard.tsx    | 24 +++++++++++++++++++
 src/frontend/src/store/slices/ThemeSlice.ts   |  4 ++++
 2 files changed, 28 insertions(+)

diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx
index 55aad9d6ba..b7e03f9d70 100755
--- 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
index 961a44bc86..4abec835e4 100755
--- 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,