Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve CLS of login button on landing page

Browse Source
This commit is contained in:
Jackson Harper
2023-01-16 12:28:07 +08:00
parent 65dfe1279d
commit a37e885323
2 changed files with 57 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
packages/web/components/templates/landing/LandingHeader.tsx
View File

@ -1,57 +1,56 @@
import Link from 'next/link'
import { Box, SpanBox } from '../../elements/LayoutPrimitives'
import { Box } from '../../elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
import { Button } from '../../elements/Button'
const containerStyles = {
position: 'absolute',
top: 0,
left: 0,
p: '0px 15px 0px 15px',
height: '68px',
minHeight: '68px',
display: 'flex',
alignItems: 'center',
'@md': { width: '50%' },
'@xsDown': { height: '48px' },
justifyContent: 'space-between',
width: '100%',
}
const linkStyles = {
marginLeft: 'auto',
verticalAlign: 'middle',
cursor: 'pointer',
lineHeight: '100%',
}
const textStyles = {
pt: '5px',
pr: '6px',
fontSize: 24,
lineHeight: '24px',
fontWeight: 'normal',
const LoginButton = (): JSX.Element => {
return (
<Button
style="ctaDarkYellow"
css={{
display: 'flex',
marginLeft: 'auto',
borderRadius: 4,
border: 'unset',
background: 'unset',
color: '#3D3D3D',
width: '62px',
height: '42px',
fontSize: 24,
lineHeight: '24px',
fontWeight: 'normal',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={(e) => {
document.location.href = '/login'
e.preventDefault()
}}
>
Login
</Button>
)
}
export function LandingHeader(): JSX.Element {
return (
<Box css={containerStyles}>
<Box
css={{
position: 'absolute',
top: 0,
left: 0,
p: '0px 15px 0px 15px',
height: '68px',
minHeight: '68px',
display: 'flex',
alignItems: 'center',
'@md': { width: '50%' },
'@xsDown': { height: '48px' },
justifyContent: 'space-between',
width: '100%',
}}
>
<OmnivoreNameLogo color={'#3D3D3D'} href="/login" />
<Box css={linkStyles}>
<Box>
<Link passHref href="/login">
<a
style={{
textDecoration: 'none',
color: '#3D3D3D',
fontFamily: 'Inter',
fontWeight: 500,
}}
>
<SpanBox css={textStyles}>Log in</SpanBox>
</a>
</Link>
</Box>
</Box>
<LoginButton />
</Box>
)
}

23
packages/web/components/templates/landing/LandingSectionsContainer.tsx
View File

@ -2,22 +2,21 @@ import { VStack, Box } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { LandingSection } from './LandingSection'
const buttonStyles = {
display: 'flex',
borderRadius: 4,
background: 'rgb(255, 210, 52)',
color: '#3D3D3D',
width: '172px',
height: '42px',
alignItems: 'center',
justifyContent: 'center',
}
export function GetStartedButton(): JSX.Element {
return (
<Button
style="ctaDarkYellow"
css={buttonStyles}
css={{
display: 'flex',
borderRadius: 4,
background: 'rgb(255, 210, 52)',
color: '#3D3D3D',
width: '172px',
height: '42px',
alignItems: 'center',
justifyContent: 'center',
fontWeight: '600',
}}
onClick={(e) => {
document.location.href = '/login'
e.preventDefault()