From c1368c06fb975bd792ebb8f9d0c5a5e4ebcba388 Mon Sep 17 00:00:00 2001
From: Florian Kissling <21834+fk@users.noreply.github.com>
Date: Sat, 27 Jun 2020 11:34:22 +0200
Subject: [PATCH] chore(www): Refactor `homepage-logo-banner` (#25348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(www): Refactor to `sx`

* rm `@emotion/styled`

* newlines, more concise, fix a d'oh

not bored enough for responsive array things tho ;)

* OK, bored enough

🤔

* lol

* time for breakfast

* inline styles 😛 null, null, null, null
---
 .../homepage/homepage-logo-banner.js          | 100 +++++++-----------
 1 file changed, 36 insertions(+), 64 deletions(-)

diff --git a/www/src/components/homepage/homepage-logo-banner.js b/www/src/components/homepage/homepage-logo-banner.js
index 5c83f23088076..d022d94ff5e94 100644
--- a/www/src/components/homepage/homepage-logo-banner.js
+++ b/www/src/components/homepage/homepage-logo-banner.js
@@ -2,67 +2,9 @@
 import { jsx } from "theme-ui"
 import { useStaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
-import styled from "@emotion/styled"
-import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 import { Name } from "./homepage-section"
 
-const Section = styled(`section`)`
-  border-bottom: 1px solid ${p => p.theme.colors.ui.border};
-  overflow: hidden;
-  padding: ${p => p.theme.space[5]} 0;
-  width: 100%;
-
-  ${mediaQueries.xl} {
-    margin-top: -1px;
-    margin-bottom: -1px;
-  }
-
-  ${mediaQueries.xxl} {
-    padding: ${p => p.theme.space[7]} 0;
-  }
-`
-
-const Title = styled(`header`)`
-  padding-right: ${p => p.theme.space[6]};
-  padding-left: ${p => p.theme.space[6]};
-  ${mediaQueries.md} {
-    max-width: 30rem;
-  }
-
-  ${mediaQueries.lg} {
-    margin-left: ${p => p.theme.space[9]};
-  }
-
-  ${mediaQueries.xl} {
-    padding-right: 5%;
-    padding-left: 5%;
-  }
-
-  ${mediaQueries.xxl} {
-    padding-right: 8%;
-    padding-left: 8%;
-  }
-`
-
-const LogoGroup = styled(`div`)`
-  position: relative;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: auto;
-  grid-gap: ${p => p.theme.space[8]};
-  align-items: center;
-  overflow-x: scroll;
-  padding-left: ${p => p.theme.space[3]};
-  padding-bottom: ${p => p.theme.space[4]};
-  ${mediaQueries.xxl} {
-    padding-bottom: ${p => p.theme.space[6]};
-  }
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
 const HomepageLogoBanner = () => {
   const data = useStaticQuery(graphql`
     query {
@@ -86,11 +28,41 @@ const HomepageLogoBanner = () => {
   `)
 
   return (
-    <Section>
-      <Title>
+    <section
+      sx={{
+        borderBottom: t => `1px solid ${t.colors.ui.border}`,
+        overflow: `hidden`,
+        py: [5, null, null, null, null, null, 7],
+        my: [null, null, null, null, null, `-1px`],
+        width: `100%`,
+      }}
+    >
+      <header
+        sx={{
+          px: [6, null, null, null, null, `5%`, `8%`],
+          maxWidth: [null, null, null, `30rem`],
+          ml: [null, null, null, null, 9],
+        }}
+      >
         <Name>Trusted by</Name>
-      </Title>
-      <LogoGroup tabIndex={0}>
+      </header>
+      <div
+        sx={{
+          position: `relative`,
+          display: `grid`,
+          gridAutoFlow: `column`,
+          gridAutoColumns: `auto`,
+          gridGap: t => t.space[8],
+          alignItems: `center`,
+          overflowX: `scroll`,
+          pl: 3,
+          pb: [4, null, null, null, null, null, 6],
+          "&::-webkit-scrollbar": {
+            display: `none`,
+          },
+        }}
+        tabIndex={0}
+      >
         {data.allFile.nodes.map(image => (
           <Img
             alt={`${image.base.split(`.`)[0]}`}
@@ -98,8 +70,8 @@ const HomepageLogoBanner = () => {
             key={image.base}
           />
         ))}
-      </LogoGroup>
-    </Section>
+      </div>
+    </section>
   )
 }