improvement(layout): move header version switch, drop footer for mobile (#910)

* version switch tweaks

* Mobile layout and toggle tweaks

* Remove the entire footer
Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>

src/components/Footer/index.tsx

-import React from 'react'
-import styled from 'styled-components'
-import { Send, Sun, Moon } from 'react-feather'
-import { useDarkModeManager } from '../../state/user/hooks'
-
-import { ButtonSecondary } from '../Button'
-
-const FooterFrame = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  position: fixed;
-  right: 1rem;
-  bottom: 1rem;
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `};
-`
-
-export default function Footer() {
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
-
-  return (
-    <FooterFrame>
-      <form action="https://forms.gle/DaLuqvJsVhVaAM3J9" target="_blank">
-        <ButtonSecondary p="8px 12px">
-          <Send size={16} style={{ marginRight: '8px' }} /> Feedback
-        </ButtonSecondary>
-      </form>
-      <ButtonSecondary onClick={toggleDarkMode} p="8px 12px" ml="0.5rem" width="min-content">
-        {darkMode ? <Sun size={16} /> : <Moon size={16} />}
-      </ButtonSecondary>
-    </FooterFrame>
-  )
-}

src/components/Header/VersionSwitch.tsx

@@ -6,16 +6,16 @@ import useParsedQueryString from '../../hooks/useParsedQueryString'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
 
 const VersionLabel = styled.span<{ enabled: boolean }>`
-  padding: ${({ enabled }) => (enabled ? '0.15rem 0.5rem 0.16rem 0.45rem' : '0.15rem 0.5rem 0.16rem 0.35rem')};
-  border-radius: 14px;
+  padding: 0.35rem 0.6rem;
+  border-radius: 12px;
   background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-  color: ${({ theme, enabled }) => (enabled ? theme.white : theme.primary1)};
-  font-size: 0.825rem;
-  font-weight: 400;
+  color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
+  font-size: 1rem;
+  font-weight: ${({ theme, enabled }) => (enabled ? '500' : '400')};
   :hover {
     user-select: ${({ enabled }) => (enabled ? 'none' : 'initial')};
     background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-    color: ${({ theme, enabled }) => (enabled ? theme.white : theme.primary3)};
+    color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
   }
 `
 
@@ -25,21 +25,21 @@ interface VersionToggleProps extends React.ComponentProps<typeof Link> {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const VersionToggle = styled(({ enabled, ...rest }: VersionToggleProps) => <Link {...rest} />)<VersionToggleProps>`
-  border-radius: 16px;
+  border-radius: 12px;
   opacity: ${({ enabled }) => (enabled ? 1 : 0.5)};
   cursor: ${({ enabled }) => (enabled ? 'pointer' : 'default')};
-  background: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.primary4};
+  background: ${({ theme }) => theme.bg3};
   color: ${({ theme }) => theme.primary1};
   display: flex;
   width: fit-content;
+  margin-left: 0.5rem;
   text-decoration: none;
   :hover {
     text-decoration: none;
   }
 `
 
-export function VersionSwitch() {
+export default function VersionSwitch() {
   const version = useToggledVersion()
   const location = useLocation()
   const query = useParsedQueryString()

src/components/Header/index.tsx

@@ -22,7 +22,7 @@ import Menu from '../Menu'
 
 import Row, { RowBetween } from '../Row'
 import Web3Status from '../Web3Status'
-import { VersionSwitch } from './VersionSwitch'
+import VersionSwitch from './VersionSwitch'
 
 const HeaderFrame = styled.div`
   display: flex;
@@ -45,6 +45,15 @@ const HeaderElement = styled.div`
   align-items: center;
 `
 
+const HeaderElementWrap = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+margin-top: 0.5rem;
+`};
+`
+
 const Title = styled.div`
   display: flex;
   align-items: center;
@@ -70,6 +79,7 @@ const AccountElement = styled.div<{ active: boolean }>`
   background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
   border-radius: 12px;
   white-space: nowrap;
+  width: 100%;
 
   :focus {
     border: 1px solid blue;
@@ -80,10 +90,7 @@ const TestnetWrapper = styled.div`
   white-space: nowrap;
   width: fit-content;
   margin-left: 10px;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
+  pointer-events: auto;
 `
 
 const NetworkCard = styled(YellowCard)`
@@ -120,6 +127,16 @@ const MigrateBanner = styled(AutoColumn)`
   `};
 `
 
+const HeaderControls = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex-direction: column;
+    `};
+`
+
 const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
   [ChainId.MAINNET]: null,
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -128,12 +145,6 @@ const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
   [ChainId.KOVAN]: 'Kovan'
 }
 
-const BalanceWrapper = styled.div`
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `};
-`
-
 export default function Header() {
   const { account, chainId } = useActiveWeb3React()
 
@@ -153,7 +164,7 @@ export default function Header() {
         </StyledInternalLink>
         .
       </MigrateBanner>
-      <RowBetween padding="1rem">
+      <RowBetween style={{ alignItems: 'flex-start' }} padding="1rem 1rem 0 1rem">
         <HeaderElement>
           <Title>
             <UniIcon id="link" to="/">
@@ -171,25 +182,27 @@ export default function Header() {
               </TitleText>
             )}
           </Title>
-          <TestnetWrapper style={{ pointerEvents: 'auto' }}>{!isMobile && <VersionSwitch />}</TestnetWrapper>
         </HeaderElement>
-        <HeaderElement>
-          <TestnetWrapper>
-            {!isMobile && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
-          </TestnetWrapper>
-          <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
-            <BalanceWrapper>
+        <HeaderControls>
+          <HeaderElement>
+            <TestnetWrapper>
+              {!isMobile && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
+            </TestnetWrapper>
+            <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance ? (
                 <Text style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
                   {userEthBalance?.toSignificant(4)} ETH
                 </Text>
               ) : null}
-            </BalanceWrapper>
-            <Web3Status />
-          </AccountElement>
-          <Settings />
-          <Menu />
-        </HeaderElement>
+              <Web3Status />
+            </AccountElement>
+          </HeaderElement>
+          <HeaderElementWrap>
+            <VersionSwitch />
+            <Settings />
+            <Menu />
+          </HeaderElementWrap>
+        </HeaderControls>
       </RowBetween>
     </HeaderFrame>
   )

src/pages/App.tsx

@@ -2,7 +2,6 @@ import React, { Suspense } from 'react'
 import { BrowserRouter, HashRouter, Route, Switch } from 'react-router-dom'
 import styled from 'styled-components'
 import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
-import Footer from '../components/Footer'
 import Header from '../components/Header'
 import Popups from '../components/Popups'
 import Web3ReactManager from '../components/Web3ReactManager'
@@ -90,7 +89,6 @@ export default function App() {
               </Switch>
             </Web3ReactManager>
             <Marginer />
-            <Footer />
           </BodyWrapper>
         </AppWrapper>
       </Router>