From ff716089c6efcbe5a503904fd019cc5cb3dd4003 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 20 Nov 2023 20:33:15 -0500
Subject: [PATCH 1/2] Updated logos to design

---
 overrides/home/component.tsx |   7 +-
 overrides/home/partners.tsx  | 129 +++++++++++++++++++++++++++--------
 2 files changed, 106 insertions(+), 30 deletions(-)

diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
index 34de6f65a..c1370ade2 100644
--- a/overrides/home/component.tsx
+++ b/overrides/home/component.tsx
@@ -23,7 +23,6 @@ import RedEarthImg from "./media/earth-1.png";
 
 const IntroHeadline = styled(Hug)`
   display: flex;
-  flex-flow: column;
   gap: ${glsp(2)};
   grid-column: content-start / content-end;
 
@@ -32,6 +31,10 @@ const IntroHeadline = styled(Hug)`
     flex-flow: row;
   `}
 
+  ${media.mediumDown`
+    flex-flow: column;
+  `}
+  
   p {
     font-size: 1.25rem;
     padding-top: 1rem;
@@ -144,7 +147,7 @@ export default function HomeComponent() {
             </StyledVarHeading>
             <p>{description}</p>
           </IntroDesc>
-          <Partners size="small" />
+          <Partners size="small" top={4} />
         </IntroHeadline>
       </HomeDescription>
       <ContentContainer>
diff --git a/overrides/home/partners.tsx b/overrides/home/partners.tsx
index 839d22855..a6d1cda64 100644
--- a/overrides/home/partners.tsx
+++ b/overrides/home/partners.tsx
@@ -28,41 +28,114 @@ const LogoWrapper = styled.div`
   `}
 `;
 
+const LogoWrapperWithLimit = styled.div`
+  display: flex;
+  flex-flow: column;
+  flex-shrink: 0;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+
+  div {
+    gap: 1rem;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    ${media.mediumDown`
+      gap: 0.5rem;
+    `}
+  }
+`;
+
 export default function Partners(props: {
-  size: "big" | "small"
+  size: "big" | "small",
+  top?: number,
 }) {
   const { size } = props;
   const squareLogoHeight = size == "big" ? "80" : "40";
-  
-  return (
-    <LogoWrapper>
-      <a href="https://www.nasa.gov/">
-        <Image src={nasaImg} alt="NASA logo" height={squareLogoHeight} />
-      </a>
-
-      <a href="https://www.epa.gov/">
-        <Image src={epaImg} alt="EPA logo" height={squareLogoHeight} />
-      </a>
 
-      <a href="https://www.fema.gov/">
-        <Image src={femaImg} alt="FEMA logo" height={squareLogoHeight} />
-      </a>
+  let partners = [
+    {
+      href: "https://www.nasa.gov/",
+      src: nasaImg,
+      alt: "NASA logo"
+    },
+    {
+      href: "https://www.epa.gov/",
+      src: epaImg,
+      alt: "EPA logo"
+    },
+    {
+      href: "https://www.fema.gov/",
+      src: femaImg,
+      alt: "FEMA logo"
+    },
+    {
+      href: "https://www.noaa.gov/",
+      src: noaaImg,
+      alt: "NOAA logo"
+    },
+    {
+      href: "https://www.usaid.gov/",
+      src: usaidImg,
+      alt: "USAID logo"
+    },
+    {
+      href: "https://www.usda.gov/",
+      src: usdaImg,
+      alt: "USDA logo"
+    },
+    {
+      href: "https://www.usgs.gov/",
+      src: usgsImg,
+      alt: "USGS logo",
+      height: size == "big" ? "40" : "20",
+    },
+  ]
 
-      <a href="https://www.noaa.gov/">
-        <Image src={noaaImg} alt="NOAA logo" height={squareLogoHeight} />
-      </a>
+  const createOrder = (top?: number) => {
+    if (top) {
+      const bottomLogos = partners.splice(top);
 
-      <a href="https://www.usaid.gov/">
-        <Image src={usaidImg} alt="USAID logo" height={squareLogoHeight} />
-      </a>
+      const createRow = (logos: any[]) => (
+        <div>
+          {logos.map((partner) => (
+            <a href={partner.href}>
+              <Image 
+                src={partner.src}
+                alt={partner.alt}
+                height={partner.height ? partner.height : squareLogoHeight}
+              />
+            </a>
+          ))}
+        </div>
+      );
 
-      <a href="https://www.usda.gov/">
-        <Image src={usdaImg} alt="USAID logo" height={squareLogoHeight} />
-      </a>
-
-      <a href="https://www.usgs.gov/">
-        <Image src={usgsImg} alt="USGS logo" height={size == "big" ? "40" : "20"} />
-      </a>
-    </LogoWrapper>
+      return (
+        <LogoWrapperWithLimit>
+          {createRow(partners)}
+          {createRow(bottomLogos)}
+        </LogoWrapperWithLimit>
+      );
+    }
+    else {
+      return (
+        <LogoWrapper>
+          {partners.map((partner) => (
+            <a href={partner.href}>
+              <Image 
+                src={partner.src}
+                alt={partner.alt}
+                height={partner.height ? partner.height : squareLogoHeight}
+              />
+            </a>
+          ))}
+        </LogoWrapper>
+      )
+    }
+  }
+  
+  return (
+    createOrder(props.top)
   );
 }

From 10ed65b55e8b13185c338606af25d54098496229 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 20 Nov 2023 20:40:35 -0500
Subject: [PATCH 2/2] Clean logic more

---
 overrides/home/partners.tsx | 50 +++++++++++++++----------------------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/overrides/home/partners.tsx b/overrides/home/partners.tsx
index a6d1cda64..0ca110a3e 100644
--- a/overrides/home/partners.tsx
+++ b/overrides/home/partners.tsx
@@ -94,44 +94,34 @@ export default function Partners(props: {
   ]
 
   const createOrder = (top?: number) => {
-    if (top) {
-      const bottomLogos = partners.splice(top);
-
-      const createRow = (logos: any[]) => (
-        <div>
-          {logos.map((partner) => (
-            <a href={partner.href}>
-              <Image 
-                src={partner.src}
-                alt={partner.alt}
-                height={partner.height ? partner.height : squareLogoHeight}
-              />
-            </a>
-          ))}
-        </div>
-      );
+    const createRow = (logos: any[]) => (
+      <>
+        {logos.map((partner) => (
+          <a href={partner.href}>
+            <Image 
+              src={partner.src}
+              alt={partner.alt}
+              height={partner.height || squareLogoHeight}
+            />
+          </a>
+        ))}
+      </>
+    );
 
+    if (top) {
+      const bottom = partners.splice(top);
       return (
         <LogoWrapperWithLimit>
-          {createRow(partners)}
-          {createRow(bottomLogos)}
+          <div>{createRow(partners)}</div>
+          <div>{createRow(bottom)}</div>
         </LogoWrapperWithLimit>
       );
-    }
-    else {
+    } else {
       return (
         <LogoWrapper>
-          {partners.map((partner) => (
-            <a href={partner.href}>
-              <Image 
-                src={partner.src}
-                alt={partner.alt}
-                height={partner.height ? partner.height : squareLogoHeight}
-              />
-            </a>
-          ))}
+          {createRow(partners)}
         </LogoWrapper>
-      )
+      );
     }
   }