diff --git a/packages/web/components/elements/images/OmnivoreFestiveLogo.tsx b/packages/web/components/elements/images/OmnivoreFestiveLogo.tsx new file mode 100644 index 000000000..aca045d1e --- /dev/null +++ b/packages/web/components/elements/images/OmnivoreFestiveLogo.tsx @@ -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 ( + + + + + + ) +} diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx index cb097e3af..e2d4a954e 100644 --- a/packages/web/components/templates/LoginLayout.tsx +++ b/packages/web/components/templates/LoginLayout.tsx @@ -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%', }} > - + ) @@ -61,14 +70,16 @@ function MediumLoginLayout(props: LoginFormProps) { width: '100vw', height: '100vh', bg: '$omnivoreYellow', - overflowY: 'clip' + overflowY: 'clip', }} > - + @@ -82,22 +93,23 @@ type OmnivoreIllustrationProps = { function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) { return ( - + )`, + }} + /> ) } - diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx index cdbb205d3..19ab1c73e 100644 --- a/packages/web/components/templates/OnboardingLayout.tsx +++ b/packages/web/components/templates/OnboardingLayout.tsx @@ -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, + nextPage?: string + reduceSpace?: boolean + onNext?: () => void | Promise } 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 ( - - )} + + ) + } return ( <> @@ -122,7 +123,7 @@ export const OnboardingLayout = ({ }} alignment="center" > - + ) } - diff --git a/packages/web/components/templates/ProfileLayout.tsx b/packages/web/components/templates/ProfileLayout.tsx index 73174563f..a6ef6ac75 100644 --- a/packages/web/components/templates/ProfileLayout.tsx +++ b/packages/web/components/templates/ProfileLayout.tsx @@ -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 { }, }} > - + diff --git a/packages/web/components/templates/landing/LandingFooter.tsx b/packages/web/components/templates/landing/LandingFooter.tsx index eba9a7bf3..9e199b184 100644 --- a/packages/web/components/templates/landing/LandingFooter.tsx +++ b/packages/web/components/templates/landing/LandingFooter.tsx @@ -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 ( - Everything you read. Safe, organized, and easy to share. - + + Everything you read. Safe, organized, and easy to share. + + - + - + - + @@ -110,10 +112,19 @@ export function LandingFooter(): JSX.Element { © 2022 Omnivore - - - - Download on the App Store + + + + Download on the App Store {/* @@ -124,9 +135,7 @@ export function LandingFooter(): JSX.Element { */} - - Contact - + Contact support@omnivore.app diff --git a/packages/web/components/templates/landing/LandingHeader.tsx b/packages/web/components/templates/landing/LandingHeader.tsx index 54da7fa1a..ce7f11983 100644 --- a/packages/web/components/templates/landing/LandingHeader.tsx +++ b/packages/web/components/templates/landing/LandingHeader.tsx @@ -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 ( - + - + Log in diff --git a/packages/web/public/static/images/omnivore-logo-santa.png b/packages/web/public/static/images/omnivore-logo-santa.png new file mode 100644 index 000000000..13dc8d1e7 Binary files /dev/null and b/packages/web/public/static/images/omnivore-logo-santa.png differ