Merge pull request #41 from NASA-IMPACT/update/logo-according-to-design

[#30] Updated logos to follow design
NASA-IMPACT · Nov 21, 2023 · 02193db · 02193db
2 parents 7fa5afe + 10ed65b
commit 02193db
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 31 deletions.
diff --git 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
@@ -28,41 +28,104 @@ 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>
 
-      <a href="https://www.noaa.gov/">
-        <Image src={noaaImg} alt="NOAA 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.usaid.gov/">
-        <Image src={usaidImg} alt="USAID logo" height={squareLogoHeight} />
-      </a>
+  const createOrder = (top?: number) => {
+    const createRow = (logos: any[]) => (
+      <>
+        {logos.map((partner) => (
+          <a href={partner.href}>
+            <Image 
+              src={partner.src}
+              alt={partner.alt}
+              height={partner.height || squareLogoHeight}
+            />
+          </a>
+        ))}
+      </>
+    );
 
-      <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>
+    if (top) {
+      const bottom = partners.splice(top);
+      return (
+        <LogoWrapperWithLimit>
+          <div>{createRow(partners)}</div>
+          <div>{createRow(bottom)}</div>
+        </LogoWrapperWithLimit>
+      );
+    } else {
+      return (
+        <LogoWrapper>
+          {createRow(partners)}
+        </LogoWrapper>
+      );
+    }
+  }
+
+  return (
+    createOrder(props.top)
   );
 }