From ce7759f8b5ff54192fbe8f7be4920b57430ca4b7 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Fri, 22 Nov 2024 09:43:11 +0100
Subject: [PATCH] Clean up

---
 overrides/home/carousel/index.tsx | 77 +++++++++++++++++++------------
 overrides/home/carousel/items.js  |  4 +-
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
index ac058f41d..91cb16d58 100644
--- a/overrides/home/carousel/index.tsx
+++ b/overrides/home/carousel/index.tsx
@@ -61,26 +61,17 @@ export function DesktopCarousel () {
           >
             <div className="carousel--height width-full position-absolute left-0 top-0 shadow-1">
               { (itemInProgress.imageOverlayText1 || itemInProgress.imageOverlayText2) && (
-                  <div
-                    className="position-absolute text-lower-left"
-                    style={{
-                      bottom: '10px',
-                      left: '10px',
-                      color: '#fff',
-                      background: 'rgba(0, 0, 0, 0.5)',
-                      padding: '10px',
-                      fontSize: '1.2rem',
-                      fontWeight: 'bold',
-                    }}
-                  >
-                    {itemInProgress.imageOverlayText1 && (
-                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText1}</span>
-                    )}
-                    {itemInProgress.imageOverlayText2 && (
-                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText2}</span>
-                    )}
-                  </div>
-                )}
+                <div
+                  className="position-absolute text-lower-left"
+                  style={{
+                    bottom: '10px',
+                    left: '10px',
+                  }}
+                >
+                  {itemInProgress.imageOverlayText1 && <TitleOverImage1 text={itemInProgress.imageOverlayText1} fontSize="1.2rem" />}
+                  {itemInProgress.imageOverlayText2 && <TitleOverImage2 text={itemInProgress.imageOverlayText2} fontSize="1.2rem" />}
+                </div>
+              )}
               <img className="carousel--content-image" src={itemInProgress.image} alt={itemInProgress.imageAlt} />
             </div>
           </CSSTransition>
@@ -116,18 +107,10 @@ function TabletCarousel() {
                   style={{
                     bottom: '10px',
                     left: '10px',
-                    color: '#fff',
-                    padding: '10px',
-                    fontSize: '3vw',
-                    fontWeight: 'bold',
                   }}
                 >
-                  {item.imageOverlayText1 && (
-                    <span style={{ display: 'block' }}>{item.imageOverlayText1}</span>
-                  )}
-                  {item.imageOverlayText2 && (
-                    <span style={{ display: 'block' }}>{item.imageOverlayText2}</span>
-                  )}
+                  {item.imageOverlayText1 && <TitleOverImage1 text={item.imageOverlayText1} fontSize="3vw" />}
+                  {item.imageOverlayText2 && <TitleOverImage2 text={item.imageOverlayText2} fontSize="3vw" />}
                 </div>
               )}
               <img className="carousel--content-image" src={item.image} />
@@ -140,6 +123,40 @@ function TabletCarousel() {
   </GridContainer>
 }
 
+export function TitleOverImage1({ text, fontSize }) {
+  return (
+    <span
+      style={{
+        display: 'block',
+        color: '#fff',
+        background: 'rgba(0, 0, 0, 0.5)',
+        padding: '10px',
+        borderRadius: '4px',
+        fontSize: fontSize || '1.2rem',
+        fontWeight: 'bold',
+      }}
+    >
+      {text}
+    </span>
+  );
+}
+
+export function TitleOverImage2({ text, fontSize }) {
+  return (
+    <span
+      style={{
+        display: 'block',
+        color: '#fff',
+        background: 'rgba(0, 0, 0, 0.5)',
+        padding: '10px',
+        fontSize: fontSize || '1.2rem',
+        fontWeight: 'bold',
+      }}
+    >
+      {text}
+    </span>
+  );
+}
 
 export default function Carousel() {
   const { isMediumUp } = useMediaQuery();
diff --git a/overrides/home/carousel/items.js b/overrides/home/carousel/items.js
index de773723f..67233dd64 100644
--- a/overrides/home/carousel/items.js
+++ b/overrides/home/carousel/items.js
@@ -13,7 +13,9 @@ export default [
       title: 'Global Sea Level Change Portal',
       description: 'The Global Sea Level Change Portal is an international collaboration that offers essential information on current and projected sea level rise to inform coastal communities across the globe.',
       image: new URL('../media/global_slr_v2.jpg', import.meta.url).href,
-      imageAlt: 'Satellite image of coastline'
+      imageAlt: 'Satellite image of coastline',
+      imageOverlayText1: 'Global Sea Level Change Portal',
+      imageOverlayText2: 'Example second line text'
     },
     {
     link: 'https://earth.gov/sealevel/us/',