mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Created Page 02 of Onboarding
This commit is contained in:
gitstart-omnivore
commit
9003f40ef7
6 changed files with 517 additions and 69 deletions
|
|
@ -60,7 +60,13 @@ const BrowserOption: React.FC<{
|
|||
)
|
||||
}
|
||||
|
||||
export default function ExtensionsInstallHelp(): JSX.Element {
|
||||
type ExtensionsInstallHelpProps = {
|
||||
onboarding?: boolean
|
||||
}
|
||||
|
||||
export default function ExtensionsInstallHelp({
|
||||
onboarding = false,
|
||||
}: ExtensionsInstallHelpProps): JSX.Element {
|
||||
const [browserValue, setBrowserValue] = React.useState<browserType>(
|
||||
browserOptions[0]
|
||||
)
|
||||
|
|
@ -70,13 +76,13 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
css={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 2fr',
|
||||
gridTemplateRows: '.5fr .5fr .5fr',
|
||||
gridTemplateRows: !onboarding ? '.5fr .5fr .5fr' : '.5fr',
|
||||
backgroundColor: '$grayBg',
|
||||
padding: '15px',
|
||||
'@lg': {
|
||||
gridTemplateColumns: '1fr 2fr 1fr',
|
||||
gridTemplateRows: '1fr',
|
||||
height: '9rem',
|
||||
height: !onboarding ? '9rem' : 'auto',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -106,8 +112,9 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
height: '130px',
|
||||
}}
|
||||
>
|
||||
<img srcSet="/static/images/extension-preview.png,
|
||||
/static/images/extension-preview@2x.png 2x" />
|
||||
<img
|
||||
src="/static/images/extension-preview.svg"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
|
|
@ -128,7 +135,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
fontSize: '12px',
|
||||
lineHeight: '18px',
|
||||
textAlign: 'right',
|
||||
color: '$grayTextContrast',
|
||||
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
|
||||
'@lg': {
|
||||
display: 'none',
|
||||
},
|
||||
|
|
@ -144,7 +151,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
fontWeight: 700,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
color: '$grayTextContrast',
|
||||
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
|
||||
lineHeight: '22.5px',
|
||||
'@lg': {
|
||||
fontSize: '16px',
|
||||
|
|
@ -159,39 +166,44 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
css={{
|
||||
size: '14px',
|
||||
fontWeight: 400,
|
||||
color: '$grayTextContrast',
|
||||
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: '$4',
|
||||
marginTop: !onboarding ? '$4' : 65,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Installing the Omnivore browser extension is the best way to save pages
|
||||
to Omnivore from your computer.
|
||||
<br />
|
||||
<Link passHref href="/help/saving-links">
|
||||
<StyledAnchor
|
||||
css={{
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
display: 'none',
|
||||
'@lg': {
|
||||
display: 'initial',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more about the browser extension here.
|
||||
</StyledAnchor>
|
||||
</Link>
|
||||
{!onboarding && (
|
||||
<Link passHref href="/help/saving-links">
|
||||
<StyledAnchor
|
||||
css={{
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
display: 'none',
|
||||
'@lg': {
|
||||
display: 'initial',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more about the browser extension here.
|
||||
</StyledAnchor>
|
||||
</Link>
|
||||
)}
|
||||
</StyledText>
|
||||
<HStack
|
||||
css={{
|
||||
|
|
@ -201,9 +213,12 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
gridColumn: '1 / span 2',
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: 'row',
|
||||
'@lg': {
|
||||
gridColumn: '3',
|
||||
gridRow: '1',
|
||||
flexDirection: !onboarding ? 'row' : 'column',
|
||||
justifyContent: !onboarding ? 'space-between' : 'center',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -219,7 +234,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
height: '38px',
|
||||
border: '1px solid #F9D354',
|
||||
'@lg': {
|
||||
width: '190px',
|
||||
width: !onboarding ? '190px' : '210px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -272,9 +287,13 @@ export default function ExtensionsInstallHelp(): JSX.Element {
|
|||
target="_blank"
|
||||
href={extensionDownloadLinks[browserValue]}
|
||||
css={{
|
||||
marginLeft: '8px',
|
||||
marginLeft: !onboarding ? '8px' : '0px',
|
||||
marginTop: !onboarding ? '0px' : '8px',
|
||||
height: 'min-content',
|
||||
textDecoration: 'none',
|
||||
width: !onboarding ? '100%' : '210px',
|
||||
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
|
||||
textAlign: 'center',
|
||||
'@lgDown': {
|
||||
width: '27vw',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,13 @@ const TooltipStyle = {
|
|||
color: '#0A0806',
|
||||
}
|
||||
|
||||
export default function MobileInstallHelp(): JSX.Element {
|
||||
type MobileInstallHelpProps = {
|
||||
onboarding?: boolean
|
||||
}
|
||||
|
||||
export default function MobileInstallHelp({
|
||||
onboarding = false,
|
||||
}: MobileInstallHelpProps): JSX.Element {
|
||||
const [selectedTooltip, setSelectedTooltip] =
|
||||
React.useState<string>('Available for Mac')
|
||||
const platformSizes = [
|
||||
|
|
@ -32,12 +38,15 @@ export default function MobileInstallHelp(): JSX.Element {
|
|||
icon: <DeviceMobileCamera color="#F9D354" />,
|
||||
},
|
||||
]
|
||||
|
||||
const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px'}
|
||||
|
||||
return (
|
||||
<Box
|
||||
css={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 2fr',
|
||||
gridTemplateRows: '.5fr .5fr .5fr',
|
||||
gridTemplateRows: !onboarding ? '.5fr .5fr .5fr' : '.5fr',
|
||||
backgroundColor: '$grayBg',
|
||||
padding: '15px',
|
||||
'@lg': {
|
||||
|
|
@ -74,8 +83,10 @@ export default function MobileInstallHelp(): JSX.Element {
|
|||
top: '-15px',
|
||||
}}
|
||||
>
|
||||
<img srcSet="/static/images/mobile-app-preview.png,
|
||||
/static/images/mobile-app-preview@2x.png 2x" />
|
||||
<img
|
||||
srcSet="/static/images/mobile-app-preview.png,
|
||||
/static/images/mobile-app-preview@2x.png 2x"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
|
|
@ -96,7 +107,7 @@ export default function MobileInstallHelp(): JSX.Element {
|
|||
fontSize: '12px',
|
||||
lineHeight: '18px',
|
||||
textAlign: 'right',
|
||||
color: '$grayTextContrast',
|
||||
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
|
||||
'@lg': {
|
||||
display: 'none',
|
||||
},
|
||||
|
|
@ -112,7 +123,7 @@ export default function MobileInstallHelp(): JSX.Element {
|
|||
fontWeight: 700,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
color: '$grayTextContrast',
|
||||
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
|
||||
lineHeight: '22.5px',
|
||||
'@lg': {
|
||||
fontSize: '16px',
|
||||
|
|
@ -128,72 +139,114 @@ export default function MobileInstallHelp(): JSX.Element {
|
|||
size: '14px',
|
||||
my: '$2',
|
||||
fontWeight: 400,
|
||||
color: '$grayTextContrast',
|
||||
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: '$4',
|
||||
marginTop: !onboarding ? '$4' : 65,
|
||||
},
|
||||
}}
|
||||
>
|
||||
With the Omnivore iOS app installed you can save any link using our
|
||||
share extension.
|
||||
<br />
|
||||
<Link passHref href="/help/saving-links">
|
||||
<StyledAnchor
|
||||
css={{
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
display: 'none',
|
||||
'@lg': {
|
||||
display: 'initial',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more about the share extension here.
|
||||
</StyledAnchor>
|
||||
</Link>
|
||||
{!onboarding && (
|
||||
<Link passHref href="/help/saving-links">
|
||||
<StyledAnchor
|
||||
css={{
|
||||
color: '$grayTextContrast',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
display: 'none',
|
||||
'@lg': {
|
||||
display: 'initial',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more about the share extension here.
|
||||
</StyledAnchor>
|
||||
</Link>
|
||||
)}
|
||||
</StyledText>
|
||||
<HStack
|
||||
alignment="center"
|
||||
css={{
|
||||
gridRow: '3',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gridColumn: '1 / span 2',
|
||||
justifyContent: 'space-between',
|
||||
justifyContent: !onboarding ? 'space-between' : 'center',
|
||||
mt: !onboarding ? 'inherit' : 10,
|
||||
'@lg': {
|
||||
flexDirection: 'row-reverse',
|
||||
flexDirection: !onboarding ? 'row-reverse' : 'column-reverse',
|
||||
alignItems: !onboarding ? 'center' : 'flex-end',
|
||||
gridColumn: '3',
|
||||
gridRow: '1',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box css={{ width: '100%', height: '37px', '@lg': {
|
||||
pl: '16px',
|
||||
}}}>
|
||||
<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
|
||||
css={
|
||||
!onboarding
|
||||
? { ...iosContainerStyles, '@lg': { pl: '16px' } }
|
||||
: {
|
||||
...iosContainerStyles,
|
||||
pl: 16,
|
||||
'@lg': {
|
||||
marginTop: '24px',
|
||||
justifyContent: 'flex-end',
|
||||
display: 'flex',
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<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>
|
||||
<HStack
|
||||
css={{
|
||||
width: '40%',
|
||||
justifyContent: 'space-between',
|
||||
maxWidth: '13rem',
|
||||
visibility: 'collapse',
|
||||
'@lg': {
|
||||
width: '100%',
|
||||
visibility: 'unset',
|
||||
},
|
||||
}}
|
||||
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) => (
|
||||
<TooltipWrapped
|
||||
|
|
|
|||
240
packages/web/components/templates/OnboardingLayout2.tsx
Normal file
240
packages/web/components/templates/OnboardingLayout2.tsx
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
import React, { ReactNode } from 'react'
|
||||
import { PageMetaData } from '../../components/patterns/PageMetaData'
|
||||
import { VStack, HStack, Box } from '../../components/elements/LayoutPrimitives'
|
||||
import { OmnivoreNameLogo } from '../../components/elements/images/OmnivoreNameLogo'
|
||||
import { StyledText } from '../../components/elements/StyledText'
|
||||
import { Button } from '../../components/elements/Button'
|
||||
|
||||
const TOTAL_ONBOARDING_PAGES = 3
|
||||
|
||||
type OnboardingLayout2Props = {
|
||||
pageNumber: number
|
||||
title: string
|
||||
subTitle: string
|
||||
description?: string
|
||||
children: ReactNode
|
||||
image?: ReactNode
|
||||
}
|
||||
|
||||
const OnboardingLayout2 = ({
|
||||
pageNumber,
|
||||
title,
|
||||
subTitle,
|
||||
description,
|
||||
image,
|
||||
children,
|
||||
}: OnboardingLayout2Props) => {
|
||||
return (
|
||||
<>
|
||||
<PageMetaData
|
||||
path={`/onboarding/0${pageNumber}`}
|
||||
title={`Onboarding - ${pageNumber}`}
|
||||
/>
|
||||
<Box
|
||||
css={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
minHeight: '100vh',
|
||||
'@lg': {
|
||||
gridTemplateColumns: '1fr 2fr',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<VStack
|
||||
css={{
|
||||
background: '#FFFFFF',
|
||||
padding: '21px 19px 0 19px',
|
||||
position: 'relative',
|
||||
'@lg': {
|
||||
padding: '116px 32px 14px 48px',
|
||||
},
|
||||
}}
|
||||
distribution="between"
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
backgroundColor: '#FFD234',
|
||||
width: `${Math.floor(
|
||||
(pageNumber * 100) / TOTAL_ONBOARDING_PAGES
|
||||
)}%`,
|
||||
height: '4px',
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
'@lg': {
|
||||
top: '$1',
|
||||
},
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
css={{
|
||||
width: '100%',
|
||||
'@sm': { textAlign: 'center' },
|
||||
'@lg': { textAlign: 'left' },
|
||||
}}
|
||||
>
|
||||
<HStack
|
||||
distribution="start"
|
||||
css={{
|
||||
justifyContent: 'center',
|
||||
'@lg': { justifyContent: 'flex-start' },
|
||||
}}
|
||||
alignment="center"
|
||||
>
|
||||
<OmnivoreNameLogo />
|
||||
<StyledText
|
||||
style="logoTitle"
|
||||
css={{ color: '#0A080666', paddingLeft: '9px', fontSize: 15 }}
|
||||
>
|
||||
Omnivore
|
||||
</StyledText>
|
||||
</HStack>
|
||||
<Box
|
||||
css={{
|
||||
marginTop: '24px',
|
||||
fontWeight: '700',
|
||||
fontSize: 32,
|
||||
'@lgDown': {
|
||||
marginTop: '5px',
|
||||
fontSize: 28,
|
||||
},
|
||||
lineHeight: '125%',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
marginTop: '24px',
|
||||
fontWeight: '400',
|
||||
fontSize: 16,
|
||||
lineHeight: '125%',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
}}
|
||||
>
|
||||
{subTitle}
|
||||
</Box>
|
||||
{image && (
|
||||
<Box
|
||||
css={{
|
||||
height: '295px',
|
||||
position: 'relative',
|
||||
marginTop: '24px',
|
||||
display: 'none',
|
||||
'@lg': { display: 'block' },
|
||||
}}
|
||||
>
|
||||
{image}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<HStack
|
||||
distribution="end"
|
||||
css={{
|
||||
width: '100%',
|
||||
justifyContent: 'end',
|
||||
'@lgDown': { display: 'none' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style="ctaSecondary"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<VStack
|
||||
css={{
|
||||
background: 'White',
|
||||
'@sm': { alignItems: 'center' },
|
||||
padding: '2vw 2vw 0 2vw',
|
||||
'@lg': {
|
||||
background: '#F5F5F4',
|
||||
padding: '30px 71px 0 30px',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
'@xl': {
|
||||
padding: '58px 71px 0 58px',
|
||||
},
|
||||
}}
|
||||
distribution="start"
|
||||
>
|
||||
{description && (
|
||||
<Box
|
||||
css={{
|
||||
fontWeight: 600,
|
||||
fontSize: 16,
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
'@lgDown': { paddingLeft: '11px' },
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Box>
|
||||
)}
|
||||
{children}
|
||||
</VStack>
|
||||
</Box>
|
||||
<HStack
|
||||
css={{
|
||||
position: 'fixed',
|
||||
bottom: '0',
|
||||
width: '100%',
|
||||
padding: '20px',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#ffffff',
|
||||
|
||||
'@lg': { display: 'none' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style="ctaSecondary"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
textAlign: 'left',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
css={{
|
||||
width: '111px',
|
||||
height: '44px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</HStack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OnboardingLayout2
|
||||
86
packages/web/pages/onboarding/02.tsx
Normal file
86
packages/web/pages/onboarding/02.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import React from 'react'
|
||||
import { Box } from '../../components/elements/LayoutPrimitives'
|
||||
import { StyledAnchor } from '../../components/elements/StyledText'
|
||||
import ExtensionInstallHelp from '../../components/elements/ExtensionsInstallHelp'
|
||||
import MobileInstallHelp from '../../components/elements/MobileInstallHelp'
|
||||
import Link from 'next/link'
|
||||
import OnboardingLayout2 from '../../components/templates/OnboardingLayout2'
|
||||
|
||||
const OnboardingPage2 = () => {
|
||||
return (
|
||||
<OnboardingLayout2
|
||||
pageNumber={2}
|
||||
title="Save links to read later"
|
||||
subTitle="Save any link to your library using our apps and browser extensions"
|
||||
description='Install our apps and browser extensions'
|
||||
image={
|
||||
<img
|
||||
src='/static/images/onboarding/browser-extension.svg'
|
||||
alt="Browser Extension"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Box css={{
|
||||
"@lgDown": {
|
||||
marginBottom: 100,
|
||||
}
|
||||
}}>
|
||||
<Box
|
||||
css={{
|
||||
margin: '27px 0',
|
||||
'@lg': {
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
|
||||
},
|
||||
backgroundColor: 'White',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
'@lgDown': {
|
||||
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MobileInstallHelp onboarding />
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
'@lgDown': {
|
||||
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.06)',
|
||||
marginTop: '8px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ExtensionInstallHelp onboarding />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
'@lg': {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link passHref href="#">
|
||||
<StyledAnchor
|
||||
css={{
|
||||
fontWeight: '400',
|
||||
fontSize: '14px',
|
||||
lineHeight: '17.5px',
|
||||
color: 'rgba(10, 8, 6, 0.8)',
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
>
|
||||
Email me instructions
|
||||
</StyledAnchor>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</OnboardingLayout2>
|
||||
)
|
||||
}
|
||||
|
||||
export default OnboardingPage2
|
||||
9
packages/web/public/static/images/extension-preview.svg
Normal file
9
packages/web/public/static/images/extension-preview.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 122 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
Loading…
Reference in a new issue