mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Merge pull request #1544 from omnivore-app/feat/santa-hat
Put a santa hat on the login on non-logged in pages
This commit is contained in:
Jackson Harper
GitHub
commit
5086c1ec0c
7 changed files with 141 additions and 77 deletions
|
|
@ -0,0 +1,33 @@
|
|||
import { config } from '../../tokens/stitches.config'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
export type OmnivoreFestiveLogoProps = {
|
||||
color?: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
export function OmnivoreFestiveLogo(
|
||||
props: OmnivoreFestiveLogoProps
|
||||
): JSX.Element {
|
||||
const fillColor = props.color || config.theme.colors.graySolid
|
||||
const href = props.href || '/home'
|
||||
|
||||
return (
|
||||
<Link passHref href={href}>
|
||||
<a
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/static/images/omnivore-logo-santa.png"
|
||||
width="27"
|
||||
height="27"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,13 @@
|
|||
import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives'
|
||||
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 { OmnivoreFestiveLogo } from '../elements/images/OmnivoreFestiveLogo'
|
||||
import { theme } from '../tokens/stitches.config'
|
||||
|
||||
export function LoginLayout(props: LoginFormProps): JSX.Element {
|
||||
|
|
@ -28,7 +34,10 @@ export function LoginLayout(props: LoginFormProps): JSX.Element {
|
|||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
|
||||
<OmnivoreFestiveLogo
|
||||
color={theme.colors.omnivoreGray.toString()}
|
||||
href="/login"
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
|
|
@ -61,14 +70,16 @@ function MediumLoginLayout(props: LoginFormProps) {
|
|||
width: '100vw',
|
||||
height: '100vh',
|
||||
bg: '$omnivoreYellow',
|
||||
overflowY: 'clip'
|
||||
overflowY: 'clip',
|
||||
}}
|
||||
>
|
||||
<Box css={{
|
||||
width: '100%',
|
||||
margin: '40px',
|
||||
'@xl': { margin: '138px' },
|
||||
}}>
|
||||
<Box
|
||||
css={{
|
||||
width: '100%',
|
||||
margin: '40px',
|
||||
'@xl': { margin: '138px' },
|
||||
}}
|
||||
>
|
||||
<LoginForm {...props} />
|
||||
</Box>
|
||||
<OmnivoreIllustration isLargeLayout={true} />
|
||||
|
|
@ -82,22 +93,23 @@ type OmnivoreIllustrationProps = {
|
|||
|
||||
function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
|
||||
return (
|
||||
<Box css={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
marginRight: '57px',
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPositionY: '70px',
|
||||
backgroundImage: `-webkit-image-set(
|
||||
<Box
|
||||
css={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
marginRight: '57px',
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPositionY: '70px',
|
||||
backgroundImage: `-webkit-image-set(
|
||||
url('/static/images/landing-illustration.png') 1x,
|
||||
url('/static/images/landing-illustration@2x.png') 2x
|
||||
)`,
|
||||
'background-image': `image-set(
|
||||
'background-image': `image-set(
|
||||
url('/static/images/landing-illustration.png') 1x,
|
||||
url('/static/images/landing-illustration@2x.png') 2x
|
||||
)`
|
||||
}} />
|
||||
)`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { ReactNode } from 'react'
|
||||
import { PageMetaData } from '../patterns/PageMetaData'
|
||||
import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
|
||||
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
|
||||
import { OmnivoreFestiveLogo } from '../elements/images/OmnivoreFestiveLogo'
|
||||
import { StyledText } from '../elements/StyledText'
|
||||
import { Button } from '../elements/Button'
|
||||
import { useRouter } from 'next/router'
|
||||
|
|
@ -16,9 +16,9 @@ type OnboardingLayoutProps = {
|
|||
description?: string
|
||||
children: ReactNode
|
||||
image?: ReactNode
|
||||
nextPage?: string,
|
||||
reduceSpace?: boolean,
|
||||
onNext?: () => void | Promise<void>,
|
||||
nextPage?: string
|
||||
reduceSpace?: boolean
|
||||
onNext?: () => void | Promise<void>
|
||||
}
|
||||
|
||||
export const OnboardingLayout = ({
|
||||
|
|
@ -36,29 +36,30 @@ export const OnboardingLayout = ({
|
|||
|
||||
const NextButton = () => {
|
||||
const handleNext = async () => {
|
||||
onNext && await onNext()
|
||||
router.push(nextPage ?? `/onboarding/0${pageNumber+1}`)
|
||||
onNext && (await onNext())
|
||||
router.push(nextPage ?? `/onboarding/0${pageNumber + 1}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
textDecoration: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
onClick={handleNext}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
textDecoration: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onClick={handleNext}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -122,7 +123,7 @@ export const OnboardingLayout = ({
|
|||
}}
|
||||
alignment="center"
|
||||
>
|
||||
<OmnivoreNameLogo />
|
||||
<OmnivoreFestiveLogo href="/login" />
|
||||
<StyledText
|
||||
style="logoTitle"
|
||||
css={{ color: '#0A080666', paddingLeft: '9px', fontSize: 15 }}
|
||||
|
|
@ -255,4 +256,3 @@ export const OnboardingLayout = ({
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
|
||||
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
|
||||
import { OmnivoreFestiveLogo } from '../elements/images/OmnivoreFestiveLogo'
|
||||
import { theme } from '../tokens/stitches.config'
|
||||
|
||||
type ProfileLayoutProps = {
|
||||
|
|
@ -39,7 +39,10 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
|
||||
<OmnivoreFestiveLogo
|
||||
color={theme.colors.omnivoreGray.toString()}
|
||||
href="/login"
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo';
|
||||
import { OmnivoreFestiveLogo } from '../../elements/images/OmnivoreFestiveLogo'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { Box, HStack } from '../../elements/LayoutPrimitives';
|
||||
import { Box, HStack } from '../../elements/LayoutPrimitives'
|
||||
import { GithubLogo, DiscordLogo, TwitterLogo } from 'phosphor-react'
|
||||
|
||||
const containerStyles = {
|
||||
|
|
@ -15,7 +15,7 @@ const containerStyles = {
|
|||
},
|
||||
'@xl': {
|
||||
paddingLeft: '140px',
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
const titleStyles = {
|
||||
|
|
@ -26,13 +26,13 @@ const titleStyles = {
|
|||
color: '#FFFFFF',
|
||||
mb: 45,
|
||||
'@mdDown': {
|
||||
fontSize: '3vw'
|
||||
}
|
||||
fontSize: '3vw',
|
||||
},
|
||||
}
|
||||
|
||||
const socialsContainerStyles = {
|
||||
maxWidth: 140,
|
||||
marginBottom: 79
|
||||
marginBottom: 79,
|
||||
}
|
||||
|
||||
const copyrightStyles = {
|
||||
|
|
@ -40,15 +40,15 @@ const copyrightStyles = {
|
|||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
lineHeight: '27px',
|
||||
color: '#5F5E58'
|
||||
color: '#5F5E58',
|
||||
}
|
||||
|
||||
const sectionOne = {
|
||||
width: '60%'
|
||||
width: '60%',
|
||||
}
|
||||
const sectionTwo = {
|
||||
width: '40%',
|
||||
pt: 10
|
||||
pt: 10,
|
||||
}
|
||||
|
||||
const contactStyles = {
|
||||
|
|
@ -58,15 +58,15 @@ const contactStyles = {
|
|||
color: 'white',
|
||||
'@mdDown': {
|
||||
fontSize: 26,
|
||||
}
|
||||
},
|
||||
}
|
||||
const supportStyles = {
|
||||
fontSize: 24,
|
||||
lineHeight: '36px',
|
||||
color: 'white',
|
||||
'@mdDown': {
|
||||
fontSize: '3vw'
|
||||
}
|
||||
fontSize: '3vw',
|
||||
},
|
||||
}
|
||||
|
||||
const imageStyles = {
|
||||
|
|
@ -83,26 +83,28 @@ export function LandingFooter(): JSX.Element {
|
|||
return (
|
||||
<HStack css={containerStyles}>
|
||||
<Box css={sectionOne}>
|
||||
<Box css={titleStyles}>Everything you read. Safe, organized, and easy to share.</Box>
|
||||
<HStack distribution='between' css={socialsContainerStyles}>
|
||||
<Box css={titleStyles}>
|
||||
Everything you read. Safe, organized, and easy to share.
|
||||
</Box>
|
||||
<HStack distribution="between" css={socialsContainerStyles}>
|
||||
<Box style={socialIconContainerStyles}>
|
||||
<Link passHref href="https://twitter.com/OmnivoreApp">
|
||||
<a>
|
||||
<TwitterLogo width={32} height={32} color='white' />
|
||||
<TwitterLogo width={32} height={32} color="white" />
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box style={socialIconContainerStyles}>
|
||||
<Link passHref href="https://github.com/omnivore-app/omnivore">
|
||||
<a>
|
||||
<GithubLogo width={32} height={32} color='white' />
|
||||
<GithubLogo width={32} height={32} color="white" />
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box style={socialIconContainerStyles}>
|
||||
<Link passHref href="https://discord.gg/h2z5rppzz9">
|
||||
<a>
|
||||
<DiscordLogo width={32} height={32} color='white' />
|
||||
<DiscordLogo width={32} height={32} color="white" />
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
|
|
@ -110,10 +112,19 @@ export function LandingFooter(): JSX.Element {
|
|||
<Box css={copyrightStyles}>© 2022 Omnivore</Box>
|
||||
</Box>
|
||||
<Box css={sectionTwo}>
|
||||
<Box css={{height: 215}}>
|
||||
<Box style={{marginBottom: 5, ...imageStyles}}>
|
||||
<a href="https://omnivore.app/install/ios" target="_blank" rel="noreferrer" style={{ display: 'inlineBlock', overflow: 'hidden' }}>
|
||||
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3" alt="Download on the App Store" style={{ }} />
|
||||
<Box css={{ height: 215 }}>
|
||||
<Box style={{ marginBottom: 5, ...imageStyles }}>
|
||||
<a
|
||||
href="https://omnivore.app/install/ios"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style={{ display: 'inlineBlock', overflow: 'hidden' }}
|
||||
>
|
||||
<img
|
||||
src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3"
|
||||
alt="Download on the App Store"
|
||||
style={{}}
|
||||
/>
|
||||
</a>
|
||||
</Box>
|
||||
{/* <Box style={imageStyles}>
|
||||
|
|
@ -124,9 +135,7 @@ export function LandingFooter(): JSX.Element {
|
|||
</Link>
|
||||
</Box> */}
|
||||
</Box>
|
||||
<Box css={contactStyles}>
|
||||
Contact
|
||||
</Box>
|
||||
<Box css={contactStyles}>Contact</Box>
|
||||
<Box css={supportStyles}>
|
||||
<a href="mailto:support@omnivore.app">support@omnivore.app</a>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Link from 'next/link'
|
||||
import { Box, SpanBox } from '../../elements/LayoutPrimitives'
|
||||
import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
|
||||
import { OmnivoreFestiveLogo } from '../../elements/images/OmnivoreFestiveLogo'
|
||||
|
||||
const containerStyles = {
|
||||
position: 'absolute',
|
||||
|
|
@ -29,17 +29,24 @@ const textStyles = {
|
|||
pr: '6px',
|
||||
fontSize: 24,
|
||||
lineHeight: '24px',
|
||||
fontWeight: 'normal'
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
|
||||
export function LandingHeader(): JSX.Element {
|
||||
return (
|
||||
<Box css={containerStyles}>
|
||||
<OmnivoreNameLogo color={'#3D3D3D'} href='/login' />
|
||||
<OmnivoreFestiveLogo color={'#3D3D3D'} href="/login" />
|
||||
<Box css={linkStyles}>
|
||||
<Box>
|
||||
<Link passHref href="/login">
|
||||
<a style={{textDecoration: 'none', color: '#3D3D3D', fontFamily: 'Inter', fontWeight: 500 }}>
|
||||
<a
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: '#3D3D3D',
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<SpanBox css={textStyles}>Log in</SpanBox>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
|
|||
BIN
packages/web/public/static/images/omnivore-logo-santa.png
Normal file
BIN
packages/web/public/static/images/omnivore-logo-santa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Loading…
Reference in a new issue