Commit 19028c1d authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub

fix: update About sizings (#5609)

parent 6676d807
...@@ -15,7 +15,8 @@ export const Title = styled.h1<{ isDarkMode: boolean }>` ...@@ -15,7 +15,8 @@ export const Title = styled.h1<{ isDarkMode: boolean }>`
-webkit-background-clip: text; -webkit-background-clip: text;
@media screen and (min-width: ${BREAKPOINTS.md}px) { @media screen and (min-width: ${BREAKPOINTS.md}px) {
font-size: 72px; font-size: 64px;
line-height: 72px;
} }
` `
...@@ -24,8 +25,8 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>` ...@@ -24,8 +25,8 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>`
font-weight: 600; font-weight: 600;
max-width: 340px; max-width: 340px;
color: transparent; color: transparent;
font-size: 40px; font-size: 36px;
line-height: 48px; line-height: 44px;
background: ${({ isDarkMode }) => background: ${({ isDarkMode }) =>
isDarkMode isDarkMode
......
...@@ -68,13 +68,13 @@ const CardGrid = styled.div` ...@@ -68,13 +68,13 @@ const CardGrid = styled.div`
const InfoButton = styled(ButtonOutlined)` const InfoButton = styled(ButtonOutlined)`
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 24px;
padding: 16px; padding: 12px;
` `
const ActionsContainer = styled.span` const ActionsContainer = styled.span`
display: flex; display: flex;
gap: 16px; gap: 24px;
width: 100%; width: 100%;
& > * { & > * {
...@@ -102,6 +102,8 @@ const Intro = styled.div` ...@@ -102,6 +102,8 @@ const Intro = styled.div`
` `
const IntroCopy = styled.p` const IntroCopy = styled.p`
font-size: 16px;
line-height: 24px;
margin: 0; margin: 0;
` `
...@@ -141,17 +143,14 @@ export default function About() { ...@@ -141,17 +143,14 @@ export default function About() {
<Page isDarkMode={isDarkMode} titleHeight={titleHeight}> <Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
<Content> <Content>
<Title ref={titleRef} isDarkMode={isDarkMode}> <Title ref={titleRef} isDarkMode={isDarkMode}>
The best way to buy, sell and own crypto and NFTs Uniswap is the largest on-chain marketplace for tokens and NFTs.
</Title> </Title>
<PoweredBySection> <PoweredBySection>
<div> <div>
<SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle> <SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>
</div> </div>
<Intro> <Intro>
<IntroCopy> <IntroCopy>The leading decentralized crypto trading protocol, governed by a global community.</IntroCopy>
The Uniswap Protocol is the world’s leading decentralized exchange protocol, allowing anyone to swap
tokens, list a token, or provide liquidity in a pool to earn fees.
</IntroCopy>
<ActionsContainer> <ActionsContainer>
<InfoButton as="a" rel="noopener noreferrer" href="https://uniswap.org" target="_blank"> <InfoButton as="a" rel="noopener noreferrer" href="https://uniswap.org" target="_blank">
Learn more Learn more
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment