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