96 lines
2.3 KiB
TypeScript
96 lines
2.3 KiB
TypeScript
import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives'
|
|
import { LoginForm } from './LoginForm'
|
|
import type { LoginFormProps } from './LoginForm'
|
|
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
|
|
import { theme } from '../tokens/stitches.config'
|
|
|
|
export function LoginLayout(props: LoginFormProps): JSX.Element {
|
|
return (
|
|
<>
|
|
<MediumBreakpointBox
|
|
smallerLayoutNode={<MobileLoginLayout {...props} />}
|
|
largerLayoutNode={<MediumLoginLayout {...props} />}
|
|
/>
|
|
|
|
<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={theme.colors.omnivoreGray.toString()} href='/login' />
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function MobileLoginLayout(props: LoginFormProps) {
|
|
return (
|
|
<VStack css={{ height: '100vh', overflow: 'auto' }}>
|
|
<VStack
|
|
alignment="center"
|
|
distribution="center"
|
|
css={{
|
|
bg: '$omnivoreYellow',
|
|
width: '100%',
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<LoginForm {...props} />
|
|
</VStack>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
function MediumLoginLayout(props: LoginFormProps) {
|
|
return (
|
|
<HStack
|
|
alignment="center"
|
|
distribution="start"
|
|
css={{
|
|
width: '100vw',
|
|
height: '100%',
|
|
minHeight: '100vh',
|
|
bg: '$omnivoreYellow',
|
|
overflowY: 'clip'
|
|
}}
|
|
>
|
|
<Box css={{
|
|
width: '100%',
|
|
margin: '40px',
|
|
'@xl': { margin: '138px' },
|
|
}}>
|
|
<LoginForm {...props} />
|
|
</Box>
|
|
<OmnivoreIllustration isLargeLayout={true} />
|
|
</HStack>
|
|
)
|
|
}
|
|
|
|
type OmnivoreIllustrationProps = {
|
|
isLargeLayout?: boolean
|
|
}
|
|
|
|
function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
|
|
return (
|
|
<img
|
|
style={{ marginRight: '57px' }}
|
|
width='100%'
|
|
srcSet="/static/images/landing-illustration.png 1x,
|
|
/static/images/landing-illustration@2x.png 2x"
|
|
alt="Screenshot of Omnivore"
|
|
/>
|
|
)
|
|
}
|
|
|