TrustLab Home Page : Spotlight section - Add/edit/hide call-to-action button to the Helpline sections via Payload

Kevin Koech · Kevin Koech · commit b52f02632a07 · 2025-10-09T11:26:10.000+03:00
Fixes #1315
diff --git a/apps/trustlab/src/components/HelplineCard/HelplineCard.js b/apps/trustlab/src/components/HelplineCard/HelplineCard.js
@@ -66,31 +66,33 @@ function HelplineCard({ title, icon: media, description, link }) {
         />
       </CardContent>
       <CardActions sx={{ p: 0 }}>
-        <Button
-          variant="contained"
-          color="primary"
-          size="small"
-          component={link?.href ? Link : "button"}
-          href={link?.href}
-          sx={{
-            mt: 2,
-            alignSelf: "start",
-            backgroundColor: "#FFDE59",
-            color: "black",
-            height: 32,
-            border: "2px solid black",
-            fontSize: 16,
-            fontWeight: 600,
-            textTransform: "none",
-            whiteSpace: "nowrap",
-            "&:hover": {
+        {link?.label ? (
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            component={link?.href ? Link : "button"}
+            href={link?.href}
+            sx={{
+              mt: 2,
+              alignSelf: "start",
               backgroundColor: "#FFDE59",
+              color: "black",
+              height: 32,
               border: "2px solid black",
-            },
-          }}
-        >
-          {link?.label}
-        </Button>
+              fontSize: 16,
+              fontWeight: 600,
+              textTransform: "none",
+              whiteSpace: "nowrap",
+              "&:hover": {
+                backgroundColor: "#FFDE59",
+                border: "2px solid black",
+              },
+            }}
+          >
+            {link?.label}
+          </Button>
+        ) : null}
       </CardActions>
     </Card>
   );
diff --git a/apps/trustlab/src/components/HelplineCard/HelplineCard.snap.js b/apps/trustlab/src/components/HelplineCard/HelplineCard.snap.js
@@ -38,13 +38,7 @@ exports[`<HelplineCard /> renders unchanged 1`] = `
     </div>
     <div
       class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
-    >
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
-        tabindex="0"
-        type="button"
-      />
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/apps/trustlab/src/components/Helplines/Helplines.snap.js b/apps/trustlab/src/components/Helplines/Helplines.snap.js
@@ -70,13 +70,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
               </div>
               <div
                 class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
-              >
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
-                  tabindex="0"
-                  type="button"
-                />
-              </div>
+              />
             </div>
           </div>
           <div
@@ -130,13 +124,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
               </div>
               <div
                 class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
-              >
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
-                  tabindex="0"
-                  type="button"
-                />
-              </div>
+              />
             </div>
           </div>
           <div
@@ -190,13 +178,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
               </div>
               <div
                 class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
-              >
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
-                  tabindex="0"
-                  type="button"
-                />
-              </div>
+              />
             </div>
           </div>
         </div>
diff --git a/apps/trustlab/src/components/NavBar/NavBar.js b/apps/trustlab/src/components/NavBar/NavBar.js
@@ -60,12 +60,14 @@ function NavBar({ logo, menus, searchButtonLabel, socialLinks }) {
             slotProps: {
               typography: {
                 sx: {
-                  color: "common.white",
+                  color: "#CCCED9",
+                  fontWeight: 400,
                   "&:hover": {
                     color: "common.white",
                   },
                   "&.active": {
                     color: "common.white",
+                    fontWeight: 600,
                   },
                 },
               },
diff --git a/apps/trustlab/src/components/Spotlight/Spotlight.js b/apps/trustlab/src/components/Spotlight/Spotlight.js
@@ -46,7 +46,7 @@ const Spotlight = React.forwardRef(function Spotlight(
   return (
     <Box ref={ref} sx={{ background: "#EFEFEF" }}>
       <Section sx={{ py: 7.5, px: { xs: 2.5, md: 0 } }}>
-        <Typography variant="display4" sx={{ mb: 2 }}>
+        <Typography variant="display4" sx={{ mb: 4 }}>
           {title}
         </Typography>
         <Box
diff --git a/apps/trustlab/src/components/Spotlight/Spotlight.snap.js b/apps/trustlab/src/components/Spotlight/Spotlight.snap.js
@@ -9,7 +9,7 @@ exports[`<Spotlight /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-snjxl5-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-display4 css-y858bl-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-display4 css-so3kj6-MuiTypography-root"
       />
       <div
         class="MuiBox-root css-6jninf"
diff --git a/apps/trustlab/src/components/SpotlightCard/SpotlightCard.js b/apps/trustlab/src/components/SpotlightCard/SpotlightCard.js
@@ -34,26 +34,28 @@ function SpotlightCard(props) {
           display: "block",
         }}
       />
-      <Button
-        component={buttonLink?.href ? Link : undefined}
-        sx={{
-          backgroundColor: "#FFDE59",
-          py: 0.75,
-          px: 2,
-          color: "#000",
-          border: "2px solid #000",
-          position: "absolute",
-          bottom: 16,
-          right: 16,
-          minWidth: "106px",
-          textDecoration: "none",
-          textTransform: "none",
-          fontWeight: 700,
-        }}
-        href={buttonLink?.href}
-      >
-        {buttonLink?.label}
-      </Button>
+      {buttonLink?.label ? (
+        <Button
+          component={buttonLink?.href ? Link : undefined}
+          sx={{
+            backgroundColor: "#FFDE59",
+            py: 0.75,
+            px: 2,
+            color: "#000",
+            border: "2px solid #000",
+            position: "absolute",
+            bottom: 16,
+            right: 16,
+            minWidth: "106px",
+            textDecoration: "none",
+            textTransform: "none",
+            fontWeight: 700,
+          }}
+          href={buttonLink?.href}
+        >
+          {buttonLink?.label}
+        </Button>
+      ) : null}
     </Card>
   );
 }
diff --git a/apps/trustlab/src/components/SpotlightCard/SpotlightCard.snap.js b/apps/trustlab/src/components/SpotlightCard/SpotlightCard.snap.js
@@ -10,11 +10,6 @@ exports[`<SpotlightCard /> renders unchanged 1`] = `
       alt="TrustLab Incubator Programme"
       class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-7t1f4i-MuiCardMedia-root"
     />
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-s8c4m4-MuiButtonBase-root-MuiButton-root"
-      tabindex="0"
-      type="button"
-    />
   </div>
 </div>
 `;

Original file line number	Diff line number	Diff line change
@@ -9,7 +9,7 @@ exports[`<Spotlight /> renders unchanged 1`] = `
`9`	`9`	`class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-snjxl5-MuiContainer-root"`
`10`	`10`	`>`
`11`	`11`	`<h2`
`12`		`- class="MuiTypography-root MuiTypography-display4 css-y858bl-MuiTypography-root"`
	`12`	`+ class="MuiTypography-root MuiTypography-display4 css-so3kj6-MuiTypography-root"`
`13`	`13`	`/>`
`14`	`14`	`<div`
`15`	`15`	`class="MuiBox-root css-6jninf"`