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

feat: dynamically add padding-top on /about (#5597)

Browse Source
This commit is contained in:
Vignesh Mohankumar 2022-12-08 20:33:17 -05:00 committed by GitHub
parent 9eb7d45aea
commit 5eb1274f97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { ButtonOutlined } from 'components/Button'
import { useState } from 'react'
import { useLayoutEffect, useRef, useState } from 'react'
import { useIsDarkMode } from 'state/user/hooks'
import styled from 'styled-components/macro'
import { BREAKPOINTS } from 'theme'
@ -9,13 +9,14 @@ import { CARDS, STEPS } from './constants'
import Step from './Step'
import { SubTitle, Title } from './Title'
const Page = styled.span<{ isDarkMode: boolean }>`
const Page = styled.span<{ isDarkMode: boolean; titleHeight: number }>`
width: 100%;
align-self: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: calc(100vh - ${({ titleHeight }) => titleHeight + 72}px);
`
const Panels = styled.div`
@ -44,11 +45,11 @@ const Content = styled.div`
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 128px 16px 16px 16px;
padding: 0px 16px 16px 16px;
gap: 96px;
@media screen and (min-width: ${BREAKPOINTS.md}px) {
padding: 128px 80px 80px 80px;
padding: 0px 80px 80px 80px;
}
`
@ -121,12 +122,22 @@ const PoweredBySection = styled(Panels)`
export default function About() {
const isDarkMode = useIsDarkMode()
const titleRef = useRef<HTMLDivElement>(null)
const [titleHeight, setTitleHeight] = useState(0)
useLayoutEffect(() => {
if (titleRef.current) {
setTitleHeight(titleRef.current.clientHeight)
}
}, [])
const [selectedStepIndex, setSelectedStepIndex] = useState(0)
return (
<Page isDarkMode={isDarkMode}>
<Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
<Content>
<Title isDarkMode={isDarkMode}>The best way to buy, sell and own crypto and NFTs</Title>
<Title ref={titleRef} isDarkMode={isDarkMode}>
The best way to buy, sell and own crypto and NFTs
</Title>
<PoweredBySection>
<div>
<SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>