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

Design improvements on landing page, add return button in settings

Browse Source
This commit is contained in:
Jackson Harper
2024-05-07 09:37:37 +08:00
parent 99f5369513
commit 749995628e
11 changed files with 116 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/components/elements/Button.tsx
View File

@ -69,6 +69,37 @@ export const Button = styled('button', {
outline: '1px solid $omnivoreCtaYellow',
},
},
landingCta: {
borderRadius: 10,
backgroundColor: '#1A1A1A',
padding: '12px 100px',
color: '#FFFFFF',
font: '$inter',
fontSize: '20px',
fontWeight: '500',
textDecoration: 'none',
transition: 'background-color ease-out 50ms',
'&:hover': {
backgroundColor: '#3D3D3D',
outline: '0px solid #1A1A1A',
},
},
landingSimple: {
borderRadius: 10,
backgroundColor: '#1A1A1A',
padding: '12px 25px',
color: '#FFFFFF',
font: '$inter',
fontSize: '20px',
fontWeight: '500',
textDecoration: 'none',
transition: 'background-color ease-out 50ms',
'&:hover': {
backgroundColor: '#1A1A1A',
outline: '0px solid #1A1A1A',
},
},
cancelGeneric: {
fontSize: '13px',
fontWeight: 500,

280
packages/web/components/elements/MobileInstallHelp.tsx
View File

@ -1,280 +0,0 @@
import React from 'react'
import {
Desktop,
DeviceTabletSpeaker,
DeviceMobileCamera,
} from 'phosphor-react'
import { Box, HStack } from '../elements/LayoutPrimitives'
import { StyledText, StyledAnchor } from '../elements/StyledText'
const TooltipStyle = {
backgroundColor: '#F9D354',
color: '#0A0806',
}
type MobileInstallHelpProps = {
onboarding?: boolean
}
export default function MobileInstallHelp({
onboarding = false,
}: MobileInstallHelpProps): JSX.Element {
const [selectedTooltip, setSelectedTooltip] =
React.useState<string>('Available for Mac')
const platformSizes = [
{
label: 'Available for Mac',
icon: <Desktop color="#F9D354" />,
},
{
label: 'Available for iPad',
icon: <DeviceTabletSpeaker color="#F9D354" />,
},
{
label: 'Available for iPhone',
icon: <DeviceMobileCamera color="#F9D354" />,
},
]
const iosContainerStyles = {
marginTop: '12px',
width: '100%',
height: '40px',
display: 'flex',
justifyContent: !onboarding ? 'flex-end' : 'initial',
}
return (
<Box
css={{
display: 'grid',
gridTemplateColumns: '1fr 2fr',
gridTemplateRows: !onboarding ? '.5fr .5fr .5fr' : '.5fr',
backgroundColor: '$grayBg',
padding: '15px',
'@lg': {
marginTop: '0',
paddingTop: '0',
gridTemplateColumns: '1fr 2fr 1fr',
gridTemplateRows: '1fr',
height: '9rem',
},
}}
>
<Box
css={{
gridColumn: 1 / 2,
gridRow: 1 / 2,
marginRight: '$3',
minWidth: '170px',
maxWidth: '200px',
alignSelf: 'center',
'@lg': {
minWidth: '200px',
gridColumn: '1',
gridRow: '1',
},
backgroundColor: '$grayBase',
display: 'flex',
position: 'relative',
height: '116px',
}}
>
<Box
css={{
position: 'absolute',
top: '-15px',
}}
>
<img
srcSet="/static/images/mobile-app-preview.png,
/static/images/mobile-app-preview@2x.png 2x"
/>
</Box>
</Box>
<Box
css={{
gridColumn: '2',
gridRow: '1',
display: 'flex',
flexDirection: 'column',
'@lg': {
marginTop: '16px',
},
}}
>
<StyledText
as={'h3'}
css={{
fontSize: '18px',
fontWeight: 700,
marginTop: 0,
marginBottom: 0,
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
lineHeight: '22.5px',
'@lg': {
fontSize: '16px',
lineHeight: '20px',
},
}}
>
Install Omnivore for iOS and macOS
</StyledText>
</Box>
<StyledText
css={{
size: '14px',
my: '$2',
fontWeight: 400,
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
maxWidth: '20rem',
lineHeight: '21px',
gridColumn: '1 / span 3',
gridRow: '2 / 3',
alignSelf: 'center',
'@lgDown': {
display: !onboarding ? 'initial' : 'none',
},
'@lg': {
gridColumn: '2',
gridRow: '1',
alignSelf: 'center',
marginTop: !onboarding ? '$4' : 65,
},
}}
>
With the Omnivore for iOS and macOS app installed you can save any link
using our Share extension.
<br />
{!onboarding && (
<StyledAnchor
href="https://docs.omnivore.app/using/saving.html"
target="_blank"
rel="noreferrer"
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
textDecoration: 'underline',
}}
>
Learn more about the iOS and macOS app -&gt;
</StyledAnchor>
)}
</StyledText>
<HStack
alignment="center"
css={{
gridRow: '3',
display: 'flex',
alignItems: 'center',
gridColumn: '1 / span 2',
flexDirection: !onboarding ? 'row-reverse' : 'inherit',
justifyContent: !onboarding ? 'space-between' : 'center',
mt: !onboarding ? 'inherit' : 10,
'@lg': {
flexDirection: !onboarding ? 'row-reverse' : 'column-reverse',
alignItems: !onboarding ? 'center' : 'flex-end',
gridColumn: '3',
gridRow: '1',
},
}}
>
<Box
css={
!onboarding
? { ...iosContainerStyles, '@lg': { pl: '16px' } }
: {
...iosContainerStyles,
pl: 16,
'@lg': {
marginTop: '24px',
justifyContent: 'flex-end',
},
}
}
>
<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&amp;releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3"
alt="Download on the App Store"
style={{}}
/>
</a>
</Box>
<HStack
css={
!onboarding
? {
width: '40%',
justifyContent: 'space-between',
maxWidth: '13rem',
visibility: 'collapse',
'@lg': {
width: '100%',
visibility: 'unset',
},
}
: {
width: '40%',
justifyContent: 'space-between',
maxWidth: '13rem',
visibility: 'unset',
'@lg': {
width: '146px',
// maxWidth: '210px'
},
}
}
>
{platformSizes.map((item, idx) => (
<Box
key={`platformSize-${idx}`}
title={item.label}
css={{
ml: '$1',
}}
>
<StyledAnchor
onClick={() => setSelectedTooltip(item.label)}
css={{
mx: 'auto',
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 35,
width: 35,
cursor: 'pointer',
backgroundColor: '$labelButtonsBg',
...(selectedTooltip !== item.label && {
filter: 'grayscale(1)',
}),
'&:focus': {
filter: 'grayscale(0)',
},
'&:active': {
filter: 'grayscale(0)',
},
'@lg': {
transition: 'filter .3s linear',
'&:hover': {
filter: 'grayscale(0)',
},
},
}}
>
{item.icon}
</StyledAnchor>
</Box>
))}
</HStack>
</HStack>
</Box>
)
}

10
packages/web/components/templates/About.tsx
View File

@ -16,7 +16,7 @@ export function About(props: AboutProps): JSX.Element {
<LandingHeader />
<VStack
alignment="center"
css={{ background: '#FEFCF5', color: '#3D3D3D' }}
css={{ background: '#2A2A2A', color: '#898989' }}
>
<VStack
css={{
@ -36,7 +36,7 @@ export function About(props: AboutProps): JSX.Element {
as="p"
css={{
fontWeight: '700',
color: '#3D3D3D',
color: '#EDEDED',
fontSize: 45,
lineHeight: '53px',
padding: '10px 10px 0',
@ -50,9 +50,9 @@ export function About(props: AboutProps): JSX.Element {
readers.`}
</Box>
<Box
as="p"
as="p"
css={{
color: 'rgb(125, 125, 125)',
color: '#898989',
padding: '10px',
margin: 0,
textAlign: 'center',
@ -69,7 +69,7 @@ export function About(props: AboutProps): JSX.Element {
<Box
as="p"
css={{
color: 'rgb(125, 125, 125)',
color: '#898989',
padding: '10px',
margin: 0,
textAlign: 'center',

2
packages/web/components/templates/AuthLayout.tsx
View File

@ -17,7 +17,7 @@ export function AuthLayout(props: ProfileLayoutProps): JSX.Element {
css={{
// bg: '$omnivoreYellow',
height: '100vh',
bg: '$omnivoreYellow',
bg: '#898989',
}}
>
{props.children}

58
packages/web/components/templates/SettingsLayout.tsx
View File

@ -1,4 +1,4 @@
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { useRouter } from 'next/router'
@ -12,12 +12,46 @@ import { logout } from '../../lib/logout'
import { SettingsMenu } from './navMenu/SettingsMenu'
import { SettingsDropdown } from './navMenu/SettingsDropdown'
import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth'
import Link from 'next/link'
import { CaretLeft } from 'phosphor-react'
type SettingsLayoutProps = {
title?: string
children: React.ReactNode
}
const ReturnButton = (): JSX.Element => {
return (
<SpanBox
css={{
a: {
textDecorationColor: '$thLibraryMenuUnselected',
},
'a:visited': {
textDecorationColor: '$thLibraryMenuUnselected',
},
}}
>
<Link href="/home">
<HStack
css={{
pl: '20px',
pb: '6px',
gap: '2px',
font: '$inter',
fontWeight: '500',
color: '$thLibraryMenuUnselected',
}}
alignment="center"
>
<CaretLeft />
Return to library
</HStack>
</Link>
</SpanBox>
)
}
export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
useVerifyAuth()
@ -57,7 +91,9 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
},
}}
></Box>
<Box
<HStack
alignment="center"
distribution="start"
css={{
p: '15px',
display: 'none',
@ -68,10 +104,24 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
}}
>
<SettingsDropdown />
</Box>
<ReturnButton />
</HStack>
<HStack css={{ width: '100%', height: '100%' }} distribution="start">
<SettingsMenu />
{props.children}
<VStack css={{ width: '100%', height: '100%' }}>
<SpanBox
css={{
marginTop: '-50px',
'@mdDown': {
display: 'none',
},
}}
>
<ReturnButton />
</SpanBox>
{props.children}
</VStack>
</HStack>
<Box css={{ height: '120px', width: '100%' }} />
</VStack>

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

@ -8,22 +8,8 @@ const LoginButton = (): JSX.Element => {
<Button
as={Link}
href="/login"
style="ctaDarkYellow"
css={{
display: 'flex',
marginLeft: 'auto',
borderRadius: 4,
background: 'unset',
color: '#3D3D3D',
height: '42px',
fontSize: 24,
lineHeight: '24px',
fontWeight: 'normal',
alignItems: 'center',
justifyContent: 'center',
textDecoration: "none",
transition: "all ease-in 50ms"
}}
style="landingSimple"
css={{ background: 'transparent' }}
>
Login
</Button>

7
packages/web/components/templates/landing/LandingSection.tsx
View File

@ -14,7 +14,8 @@ export function LandingSection(props: LandingSectionProps): JSX.Element {
css={{
width: '100%',
flexWrap: 'wrap',
flexDirection: (props?.imagePosition ?? 'left') === 'left' ? 'row-reverse' : 'row',
flexDirection:
(props?.imagePosition ?? 'left') === 'left' ? 'row-reverse' : 'row',
marginBottom: 20,
'@mdDown': {
width: '100%',
@ -40,7 +41,7 @@ export function LandingSection(props: LandingSectionProps): JSX.Element {
as="h2"
css={{
fontWeight: '700',
color: '#3D3D3D',
color: '#FFFFFF',
lineHeight: 1.25,
'@mdDown': {
fontSize: 24,
@ -58,7 +59,7 @@ export function LandingSection(props: LandingSectionProps): JSX.Element {
<Box
as="p"
css={{
color: '#666',
color: '#898989',
}}
>
{props.descriptionText}

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

@ -18,18 +18,9 @@ export function GetStartedButton(props: { lang: 'en' | 'zh' }): JSX.Element {
<Button
as={Link}
href="/login"
style="ctaDarkYellow"
style="landingCta"
css={{
borderRadius: 4,
background: '$omnivoreCtaYellow',
padding: '12px 25px',
color: '#3D3D3D',
fontWeight: '600',
textDecoration: 'none',
transition: 'background-color ease-out 50ms',
'&:hover': {
backgroundColor: '$omnivoreYellow',
},
boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.15)`,
}}
>
{props.lang == 'zh' ? `免费注册` : `Sign Up for Free`}
@ -43,8 +34,6 @@ const containerStyles = {
pb: 100,
width: '100%',
maxWidth: '1224px',
background:
'linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(0deg, rgba(253, 250, 236, 0.7), rgba(253, 250, 236, 0.7))',
'@mdDown': {
pt: 50,
},
@ -64,7 +53,7 @@ const sections = [
{
en: {
titleText: `Save it now. Read it later.`,
descriptionText: `Save articles, PDFs, and Twitter threads as you come across them
descriptionText: `Save articles and PDFs as you come across them
using Omnivore's mobile apps and browser extensions. Read them
later using our distraction free reader.`,
},
@ -77,7 +66,7 @@ const sections = [
},
{
en: {
titleText: `Get all your newsletters in one place.`,
titleText: `Get all your RSS feeds and newsletters in one place.`,
descriptionText: `Send newsletters directly to your Omnivore library rather than
scattered across multiple inboxes. Read them on your own time, away
from the constant distractions and interruptions of your email.`,
@ -93,7 +82,7 @@ const sections = [
en: {
titleText: `Keep your reading organized, whatever that means to you.`,
descriptionText: `Keep your reading organized and easily available with labels,
filters, rules, and fully indexed text searches. We're not here
filters, rules, and ful text searches. We're not here
to tell you how to stay organized — our job is to give you the tools
to build a system that works for you.`,
},
@ -107,8 +96,7 @@ const sections = [
{
en: {
titleText: `Add highlights and notes.`,
descriptionText: `Become a better reader — engage your brain and improve retention by
reading actively, not passively. Highlight key sections and add
descriptionText: `Highlight key sections and add
notes as you read. You can access your highlights and notes any time
— they stay with your articles forever.`,
},
@ -123,7 +111,7 @@ const sections = [
en: {
titleText: `Sync with your second brain.`,
descriptionText: `Omnivore syncs with popular Personal Knowledge Management systems
including Logseq and Obsidian, so you can pull all your saved
including Logseq, Obsidian, and Notion, so you can pull all your saved
reading, highlights, and notes into your second brain.`,
},
zh: {
@ -137,7 +125,7 @@ const sections = [
en: {
titleText: `Listen to your reading with text-to-speech.`,
descriptionText: `Work through your to-be-read list and give your eyes a break with
TTS, exclusively in the Omnivore app for iOS. Realistic,
text-to-speech, exclusively in the Omnivore app for iOS. Realistic,
natural-sounding AI voices will read any saved article aloud.`,
},
zh: {
@ -209,41 +197,6 @@ export function LandingSectionsContainer(
/>
)
})}
<VStack
alignment="center"
css={{
width: '100vw',
backgroundColor: '#fff',
paddingBottom: '40px',
marginTop: '40px',
borderTop: '1px solid var(--colors-omnivoreYellow)',
borderBottom: '1px solid var(--colors-omnivoreYellow)',
'@md': {
marginTop: 0,
},
}}
>
{props.lang == 'en' && (
<Box
as="p"
css={{
color: '#3D3D3D',
fontWeight: '700',
fontSize: '2.5rem',
lineHeight: '1.25',
textAlign: 'center',
marginBottom: '40px',
'@mdDown': {
fontSize: '2rem',
},
}}
>
Get Started With Omnivore Today
</Box>
)}
<GetStartedButton lang={props.lang} />
</VStack>
</VStack>
)
}

4
packages/web/pages/settings/installation/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { SettingsLayout } from '../../../components/templates/SettingsLayout'
import MobileInstallHelp from '../../../components/elements/MobileInstallHelp'
import IOSInstallHelp from '../../../components/elements/IOSInstallHelp'
import ExtensionInstallHelp from '../../../components/elements/ExtensionsInstallHelp'
import { Box } from '../../../components/elements/LayoutPrimitives'
@ -22,7 +22,7 @@ export default function Installation(): JSX.Element {
},
}}
>
<MobileInstallHelp />
<IOSInstallHelp />
<Box
css={{
my: '$2',

4
packages/web/pages/settings/installation/mobile.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { SettingsLayout } from '../../../components/templates/SettingsLayout'
import MobileInstallHelp from '../../../components/elements/MobileInstallHelp'
import IOSInstallHelp from '../../../components/elements/IOSInstallHelp'
export default function Mobile(): JSX.Element {
return (
<SettingsLayout title="Mobile Installation">
<MobileInstallHelp />
<IOSInstallHelp />
</SettingsLayout>
)
}

13
packages/web/stories/MobileInstallHelp.stories.tsx
View File

@ -1,19 +1,20 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import MobileInstallHelp from '../components/elements/MobileInstallHelp'
import IOSInstallHelp from '../components/elements/IOSInstallHelp'
import { Box } from '../components/elements/LayoutPrimitives'
export default {
title: 'Components/MobileInstallHelp',
component: MobileInstallHelp,
component: IOSInstallHelp,
argTypes: {
onboarding: {
description: 'Changes the appearence of the component to match onboarding page designs.',
description:
'Changes the appearence of the component to match onboarding page designs.',
control: { type: 'boolean' },
},
},
} as ComponentMeta<typeof MobileInstallHelp>
} as ComponentMeta<typeof IOSInstallHelp>
const Template: ComponentStory<typeof MobileInstallHelp> = (args) => (
const Template: ComponentStory<typeof IOSInstallHelp> = (args) => (
<Box
css={{
maxWidth: '50rem',
@ -25,7 +26,7 @@ const Template: ComponentStory<typeof MobileInstallHelp> = (args) => (
boxShadow: '0px 3px 11px 0px #201F1D0A',
}}
>
<MobileInstallHelp {...args} />
<IOSInstallHelp {...args} />
</Box>
)