ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styled footer links (#5644)

Browse Source 
* feat: styled footer links

* grid

* center

* Update bottom links and full bleed image

* Mobile spacing and font size adjustments

Decrease spacing in mobile and swap the sizing of fonts between mobile and desktop sizes

Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>
Co-authored-by: pp-hh-ii-ll <111304124+pp-hh-ii-ll@users.noreply.github.com>
This commit is contained in:
Vignesh Mohankumar 2022-12-12 11:18:58 -05:00 committed by GitHub
parent 69c084ebe7
commit 1faf13639c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/About/index.tsx
View File

@ -2,6 +2,7 @@ import { Trace } from '@uniswap/analytics'
import { PageName } from '@uniswap/analytics-events' import { PageName } from '@uniswap/analytics-events'
import { ButtonOutlined } from 'components/Button' import { ButtonOutlined } from 'components/Button'
import { useLayoutEffect, useRef, useState } from 'react' import { useLayoutEffect, useRef, useState } from 'react'
import { BookOpen, Globe, Heart, Twitter } from 'react-feather'
import { useIsDarkMode } from 'state/user/hooks' import { useIsDarkMode } from 'state/user/hooks'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
@ -134,12 +135,43 @@ const Thumbnail = styled.img`
width: 100%; width: 100%;
` `
const SocialRow = styled.div` const FooterLinks = styled.div`
display: flex; display: grid;
gap: 24px; grid-template-columns: 1fr;
gap: 12px;
& > * { @media screen and (min-width: ${BREAKPOINTS.sm}px) {
flex: 1; grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media screen and (min-width: ${BREAKPOINTS.lg}px) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
`
const FooterLink = styled.a`
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
color: ${({ theme }) => theme.textPrimary};
border: 1px solid ${({ theme }) => theme.backgroundOutline};
font-size: 16px;
line-height: 20px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
svg {
color: ${({ theme }) => theme.textSecondary};
stroke-width: 1.5;
}
@media screen and (min-width: ${BREAKPOINTS.md}px) {
font-size: 20px;
line-height: 24px;
} }
` `
@ -227,12 +259,20 @@ export default function About() {
</Panels> </Panels>
</div> </div>
<Footer> <Footer>
<SocialRow> <FooterLinks>
<button>button</button> <FooterLink rel="noopener noreferrer" target="_blank" href="https://support.uniswap.org">
<button>button</button> <Globe /> Support
<button>button</button> </FooterLink>
<button>button</button> <FooterLink rel="noopener noreferrer" target="_blank" href="https://twitter.com/uniswap">
</SocialRow> <Twitter /> Twitter
</FooterLink>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://uniswap.org/blog">
<BookOpen /> Blog
</FooterLink>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://boards.greenhouse.io/uniswaplabs">
<Heart /> Careers
</FooterLink>
</FooterLinks>
<Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright> <Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
</Footer> </Footer>
</Content> </Content>