From 3703e843f8e2e81bf5692645bd34b3a451723d5e Mon Sep 17 00:00:00 2001
From: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>
Date: Sun, 11 Dec 2022 14:42:32 -0500
Subject: [PATCH] fix: improve mobile spacing/ordering on /about (#5632)

---
 src/pages/About/Title.ts  |  9 +++++++--
 src/pages/About/index.tsx | 23 ++++++-----------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/pages/About/Title.ts b/src/pages/About/Title.ts
index 3519365f31..0765918399 100644
--- a/src/pages/About/Title.ts
+++ b/src/pages/About/Title.ts
@@ -25,8 +25,8 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>`
   font-weight: 500;
   max-width: 340px;
   color: transparent;
-  font-size: 36px;
-  line-height: 44px;
+  font-size: 20px;
+  line-height: 28px;
 
   background: ${({ isDarkMode }) =>
     isDarkMode
@@ -35,4 +35,9 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>`
 
   background-clip: text;
   -webkit-background-clip: text;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    font-size: 36px;
+    line-height: 44px;
+  }
 `
diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
index 0ebb1306bc..e28c61b4e1 100644
--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@@ -30,10 +30,6 @@ const BackgroundImage = styled.img`
   height: calc(100vh - 72px);
 `
 
-const AboutTitle = styled(Title)`
-  z-index: 1;
-`
-
 const Panels = styled.div`
   display: flex;
   flex-direction: column;
@@ -62,10 +58,11 @@ const Content = styled.div`
   justify-content: center;
   align-items: flex-start;
   padding: 0px 16px 16px 16px;
-  gap: 96px;
+  gap: 48px;
 
   @media screen and (min-width: ${BREAKPOINTS.md}px) {
     padding: 0px 80px 80px 80px;
+    gap: 96px;
   }
 `
 
@@ -129,14 +126,6 @@ const Thumbnail = styled.img`
   width: 100%;
 `
 
-const PoweredBySection = styled(Panels)`
-  order: 1;
-
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
-    order: 0;
-  }
-`
-
 const SocialRow = styled.div`
   display: flex;
   gap: 24px;
@@ -180,10 +169,10 @@ export default function About() {
       <Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
         <BackgroundImage src={backgroundImgSrc} />
         <Content>
-          <AboutTitle ref={titleRef} isDarkMode={isDarkMode}>
+          <Title ref={titleRef} isDarkMode={isDarkMode}>
             Uniswap is the leading on-chain marketplace for tokens and NFTs.
-          </AboutTitle>
-          <PoweredBySection>
+          </Title>
+          <Panels>
             <div>
               <SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>
             </div>
@@ -198,7 +187,7 @@ export default function About() {
                 </InfoButton>
               </ActionsContainer>
             </Intro>
-          </PoweredBySection>
+          </Panels>
           <CardGrid>
             {CARDS.map((card) => (
               <Card key={card.title} {...card} />