Skip to content

I
interface
Commit 80ed8eb6 authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

feat: /about mobile responsive (#5587) 

* fix gap

* order

* update gap
parent a14d2df8
Show whitespace changes
Inline Side-by-side
Showing with 18 additions and 12 deletions
src/pages/About/index.tsx
View file @ 80ed8eb6
...@@ -9,8 +9,6 @@ import { CARDS, STEPS } from './constants' ...@@ -9,8 +9,6 @@ import { CARDS, STEPS } from './constants'
import Step from './Step' import Step from './Step'
import { SubTitle, Title } from './Title' import { SubTitle, Title } from './Title'
const MOBILE_BREAKPOINT = BREAKPOINTS.md
const Page = styled.span<{ isDarkMode: boolean }>` const Page = styled.span<{ isDarkMode: boolean }>`
width: 100%; width: 100%;
align-self: center; align-self: center;
...@@ -20,16 +18,17 @@ const Page = styled.span<{ isDarkMode: boolean }>` ...@@ -20,16 +18,17 @@ const Page = styled.span<{ isDarkMode: boolean }>`
align-items: center; align-items: center;
` `
const Body = styled.div` const Panels = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 120px;
justify-content: space-between; justify-content: space-between;
color: ${({ theme }) => theme.textPrimary}; color: ${({ theme }) => theme.textPrimary};
font-size: 24px; font-size: 24px;
line-height: 36px; line-height: 36px;
gap: 24px;
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) { @media screen and (min-width: ${BREAKPOINTS.md}px) {
gap: 120px;
flex-direction: row; flex-direction: row;
} }
...@@ -46,11 +45,10 @@ const Content = styled.div` ...@@ -46,11 +45,10 @@ const Content = styled.div`
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
padding: 128px 16px 16px 16px; padding: 128px 16px 16px 16px;
gap: 24px; gap: 96px;
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) { @media screen and (min-width: ${BREAKPOINTS.md}px) {
padding: 128px 80px 80px 80px; padding: 128px 80px 80px 80px;
gap: 120px;
} }
` `
...@@ -104,6 +102,14 @@ const Thumbnail = styled.img` ...@@ -104,6 +102,14 @@ const Thumbnail = styled.img`
width: 100%; width: 100%;
` `
const PoweredBySection = styled(Panels)`
order: 1;
@media screen and (min-width: ${BREAKPOINTS.md}px) {
order: 0;
}
`
export default function About() { export default function About() {
const isDarkMode = useIsDarkMode() const isDarkMode = useIsDarkMode()
...@@ -113,7 +119,7 @@ export default function About() { ...@@ -113,7 +119,7 @@ export default function About() {
<Page isDarkMode={isDarkMode}> <Page isDarkMode={isDarkMode}>
<Content> <Content>
<Title isDarkMode={isDarkMode}>The best way to buy, sell and own crypto and NFTs</Title> <Title isDarkMode={isDarkMode}>The best way to buy, sell and own crypto and NFTs</Title>
<Body> <PoweredBySection>
<div> <div>
<SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle> <SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>
</div> </div>
...@@ -127,7 +133,7 @@ export default function About() { ...@@ -127,7 +133,7 @@ export default function About() {
<InfoButton>Read the docs</InfoButton> <InfoButton>Read the docs</InfoButton>
</ActionsContainer> </ActionsContainer>
</Intro> </Intro>
</Body> </PoweredBySection>
<CardGrid> <CardGrid>
{CARDS.map((card) => ( {CARDS.map((card) => (
<Card key={card.title} {...card} /> <Card key={card.title} {...card} />
...@@ -135,7 +141,7 @@ export default function About() { ...@@ -135,7 +141,7 @@ export default function About() {
</CardGrid> </CardGrid>
<div> <div>
<SubTitle isDarkMode={isDarkMode}>Get Started</SubTitle> <SubTitle isDarkMode={isDarkMode}>Get Started</SubTitle>
<Body> <Panels>
<ThumbnailContainer> <ThumbnailContainer>
<Thumbnail alt="Thumbnail" src={STEPS[selectedStepIndex]?.imgSrc} /> <Thumbnail alt="Thumbnail" src={STEPS[selectedStepIndex]?.imgSrc} />
</ThumbnailContainer> </ThumbnailContainer>
...@@ -151,7 +157,7 @@ export default function About() { ...@@ -151,7 +157,7 @@ export default function About() {
/> />
))} ))}
</StepList> </StepList>
</Body> </Panels>
</div> </div>
</Content> </Content>
</Page> </Page>
......
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