Clean up login page
Update margins on login layout Add missing image from about page
This commit is contained in:
Jackson Harper
@ -1,6 +1,6 @@
|
||||
import Link from 'next/link'
|
||||
import { StyledText } from '../elements/StyledText'
|
||||
import { VStack, Box } from '../elements/LayoutPrimitives'
|
||||
import { VStack, Box, SpanBox } from '../elements/LayoutPrimitives'
|
||||
import { styled } from '../tokens/stitches.config'
|
||||
import {
|
||||
googleID,
|
||||
@ -15,20 +15,57 @@ export type LoginFormProps = {
|
||||
}
|
||||
|
||||
export function LoginForm(props: LoginFormProps): JSX.Element {
|
||||
console.log(props.errorMessage) // TODO: display message
|
||||
const StyledTextHeadline = styled('h1', {
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
fontSize: '50px',
|
||||
lineHeight: '100%',
|
||||
color: '$omnivoreGray',
|
||||
m: '0px',
|
||||
})
|
||||
|
||||
return (
|
||||
<VStack
|
||||
alignment="center"
|
||||
distribution="between"
|
||||
alignment="start"
|
||||
distribution="center"
|
||||
css={{
|
||||
maxWidth: '24em',
|
||||
textAlign: 'center',
|
||||
width: '90%',
|
||||
gap: '8px',
|
||||
maxWidth: '593px',
|
||||
'@mdDown': {
|
||||
maxWidth: '85%',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<LoginFormHeader />
|
||||
<StyledTextHeadline>
|
||||
Never miss a great read.
|
||||
</StyledTextHeadline>
|
||||
<StyledText css={{ fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
fontSize: '18px',
|
||||
lineHeight: '120%',
|
||||
m: '0px',
|
||||
color: '$omnivoreGray',}}>
|
||||
Save articles and read them later in our distraction-free reader.
|
||||
</StyledText>
|
||||
<Link passHref href="/about">
|
||||
<a style={{ textDecoration: 'none' }}>
|
||||
<StyledText
|
||||
css={{
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
fontSize: '18px',
|
||||
lineHeight: '120%',
|
||||
m: '0px',
|
||||
}}
|
||||
>
|
||||
Learn More ->
|
||||
</StyledText>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<SpanBox css={{ height: '24px' }} />
|
||||
|
||||
<VStack alignment="start" distribution="center" css={{ }}>
|
||||
{googleID && (
|
||||
<Box
|
||||
style={{
|
||||
@ -48,6 +85,7 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
width: '210px',
|
||||
height: '40px',
|
||||
}}
|
||||
>
|
||||
@ -60,49 +98,32 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
|
||||
responseType="code id_token"
|
||||
designProp={{
|
||||
color: 'black',
|
||||
width: 300,
|
||||
width: 261,
|
||||
height: 40,
|
||||
type: 'continue',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
<TermAndConditionsFooter />
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
function LoginFormHeader() {
|
||||
const StyledTextHeadline = styled('h1', StyledText)
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledTextHeadline
|
||||
style="fixedHeadline"
|
||||
css={{ mx: '$2', color: '$omnivoreGray', marginBlockEnd: '0px' }}
|
||||
>
|
||||
{formatMessage({ id: 'login.headline' })}
|
||||
</StyledTextHeadline>
|
||||
<Link passHref href="/about">
|
||||
<a style={{ textDecoration: 'none' }}>
|
||||
<StyledText
|
||||
css={{
|
||||
color: '$omnivoreRed',
|
||||
marginBlockStart: '8px',
|
||||
marginBlockEnd: '28px',
|
||||
}}
|
||||
>
|
||||
Learn More ->
|
||||
</StyledText>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function GoogleAuthButton() {
|
||||
return (
|
||||
<Box css={{ pb: '$3' }}>
|
||||
<Box css={{ overflow: 'clip' }}>
|
||||
<div
|
||||
id="g_id_onload"
|
||||
data-client_id={googleID}
|
||||
@ -110,6 +131,7 @@ function GoogleAuthButton() {
|
||||
data-ux_mode="popup"
|
||||
data-login_uri={gauthRedirectURI}
|
||||
data-auto_prompt="false"
|
||||
|
||||
/>
|
||||
|
||||
<div
|
||||
@ -120,7 +142,7 @@ function GoogleAuthButton() {
|
||||
data-text="continue_with"
|
||||
data-size="large"
|
||||
data-logo_alignment="center"
|
||||
data-width="300"
|
||||
data-width="261"
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
@ -133,8 +155,8 @@ export function TermAndConditionsFooter(): JSX.Element {
|
||||
<StyledText
|
||||
style="caption"
|
||||
css={{
|
||||
maxWidth: '20em',
|
||||
textAlign: 'center',
|
||||
maxWidth: '220px',
|
||||
textAlign: 'left',
|
||||
color: '$omnivoreLightGray',
|
||||
}}
|
||||
>
|
||||
|
||||
@ -7,6 +7,8 @@ import { theme } from '../tokens/stitches.config'
|
||||
import Link from 'next/link'
|
||||
import { Star } from 'phosphor-react'
|
||||
import { Button } from '../elements/Button'
|
||||
import { googleID } from '../../lib/appConfig'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export function LoginLayout(props: LoginFormProps): JSX.Element {
|
||||
return (
|
||||
@ -33,31 +35,6 @@ export function LoginLayout(props: LoginFormProps): JSX.Element {
|
||||
}}
|
||||
>
|
||||
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
|
||||
<Box css={{
|
||||
marginLeft: 'auto',
|
||||
fontSize: '15px',
|
||||
fontWeight: '500',
|
||||
verticalAlign: 'middle',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
lineHeight: '100%',
|
||||
textDecoration: 'none',
|
||||
}}>
|
||||
<Box css={{ '@xsmDown': { visibility: 'collapse' } }}>
|
||||
<a href="https://github.com/omnivore-app/omnivore" target='_blank' rel="noreferrer">
|
||||
<Button style="ctaLightGray">
|
||||
<HStack css={{ height: '100%' }}>
|
||||
<SpanBox css={{ pt: '5px', pr: '6px' }}>Follow on GitHub</SpanBox>
|
||||
<SpanBox css={{ alpha: '0.1' }}>
|
||||
<svg version="1.1" width="24" height="24" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
@ -83,24 +60,25 @@ function MobileLoginLayout(props: LoginFormProps) {
|
||||
|
||||
function MediumLoginLayout(props: LoginFormProps) {
|
||||
return (
|
||||
<Box
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="start"
|
||||
css={{
|
||||
display: 'grid',
|
||||
height: '100vh',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
width: '100vw',
|
||||
bg: '$omnivoreYellow',
|
||||
overflowY: 'clip'
|
||||
}}
|
||||
>
|
||||
<VStack
|
||||
alignment="center"
|
||||
distribution="center"
|
||||
css={{ bg: '$omnivoreYellow' }}
|
||||
>
|
||||
<Box css={{
|
||||
width: '100%',
|
||||
margin: '40px',
|
||||
'@xl': { margin: '138px' },
|
||||
}}>
|
||||
<LoginForm {...props} />
|
||||
</VStack>
|
||||
<VStack alignment="center" css={{ bg: '$omnivorePeach' }}>
|
||||
<OmnivoreIllustration isLargeLayout={true} />
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
<OmnivoreIllustration isLargeLayout={true} />
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
|
||||
@ -110,13 +88,13 @@ type OmnivoreIllustrationProps = {
|
||||
|
||||
function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
|
||||
return (
|
||||
<Image
|
||||
src={`/static/images/landing-illustration${
|
||||
isLargeLayout ? '@2x.png' : '-mobile.svg'
|
||||
}`}
|
||||
alt="Illustration of Woman Reading"
|
||||
width={isLargeLayout ? 1280 : 375}
|
||||
height={isLargeLayout ? 1164 : 230}
|
||||
<img
|
||||
style={{ marginRight: '57px' }}
|
||||
width='100%'
|
||||
srcSet="/static/images/landing-illustration.png 1x,
|
||||
/static/images/landing-illustration@2x.png 2x"
|
||||
alt="Screenshot of Omnivore"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 MiB After Width: | Height: | Size: 834 KiB |
BIN
packages/web/public/static/media/about/save-article.png
Normal file
BIN
packages/web/public/static/media/about/save-article.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Reference in New Issue
Block a user