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

effected review changes

Browse Source
This commit is contained in:
gitstart-omnivore
2022-03-28 12:57:28 +00:00
parent 8dedb42d07
commit 7786a3f321
12 changed files with 688 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
packages/web/components/elements/ExtensionsInstallHelp.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Box, HStack } from '../elements/LayoutPrimitives'
import { StyledImg, StyledText } from '../elements/StyledText'
import { StyledText, StyledAnchor } from '../elements/StyledText'
import { AngleDownIcon } from '../tokens/icons/AngleDownIcon'
import { Button } from './Button'
import { Dropdown, DropdownOption, DropdownSeparator } from './DropdownElements'
@ -8,6 +8,8 @@ import { ChromeIcon } from './images/ChromeIcon'
import { EdgeIcon } from './images/EdgeIcon'
import { FirefoxIcon } from './images/FirefoxIcon'
import { SafariIcon } from './images/SafariIcon'
import Link from 'next/link'
import { SaveArticleIcon } from './images/SaveArticleIcon'
const icons = {
'Google Chrome': <ChromeIcon />,
@ -16,6 +18,13 @@ const icons = {
Safari: <SafariIcon />,
}
const extensionDownloadLinks = {
'Google Chrome': 'https://omnivore.app/install/chrome',
Safari: 'https://omnivore.app/install/mac',
'Microsoft Edge': 'https://omnivore.app/install/edge',
Firefox: 'https://omnivore.app/install/firefox',
}
const browserOptions = [
'Google Chrome',
'Firefox',
@ -55,9 +64,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
const [browserValue, setBrowserValue] = React.useState<browserType>(
browserOptions[0]
)
const handleBrowserUpdate = (e: any) => {
setBrowserValue(e)
}
return (
<Box
css={{
@ -66,51 +73,69 @@ export default function ExtensionsInstallHelp(): JSX.Element {
gridTemplateRows: '.5fr .5fr .5fr',
backgroundColor: '$grayBg',
padding: '15px',
'@md': {
'@lg': {
gridTemplateColumns: '1fr 2fr 1fr',
gridTemplateRows: '1fr',
height: '9rem',
},
}}
>
<StyledImg
<Box
css={{
gridColumn: 1 / 2,
gridRow: 1 / 2,
width: 146,
marginRight: '$3',
'@md': {
width: 211,
minWidth: '170px',
maxWidth: '200px',
alignSelf: 'center',
'@lg': {
minWidth: '200px',
gridColumn: '1',
gridRow: '1',
},
backgroundColor: '$grayBase',
display: 'flex',
position: 'relative',
height: '116px',
}}
src="/static/media/about/save-article.png"
alt="Save articles"
/>
>
<Box
css={{
position: 'absolute',
top: '-15px',
height: '130px',
}}
>
<SaveArticleIcon />
</Box>
</Box>
<Box
css={{
gridColumn: '2',
gridRow: '1',
'@md': {
display: 'flex',
flexDirection: 'column',
'@lg': {
marginTop: '$3',
},
}}
>
<StyledText
css={{
fontWeight: '600',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
'@md': {
display: 'none',
},
}}
>
Learn more
</StyledText>
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
fontWeight: '600',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
'@lg': {
display: 'none',
},
}}
>
Learn more
</StyledAnchor>
</Link>
<StyledText
as={'h3'}
css={{
@ -120,7 +145,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
marginBottom: 0,
color: '$grayTextContrast',
lineHeight: '22.5px',
'@md': {
'@lg': {
fontSize: '16px',
lineHeight: '20px',
},
@ -139,7 +164,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
gridColumn: '1 / span 3',
gridRow: '2 / 3',
alignSelf: 'center',
'@md': {
'@lg': {
gridColumn: '2',
gridRow: '1',
alignSelf: 'center',
@ -150,22 +175,22 @@ export default function ExtensionsInstallHelp(): JSX.Element {
Installing the Omnivore browser extension is the best way to save pages
to Omnivore from your computer.
<br />
<StyledText
// as={Link}
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@md': {
display: 'initial',
textDecoration: 'underline',
},
}}
// href="/"
>
Learn more about the browser extension here.
</StyledText>
<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={{
@ -175,7 +200,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
gridColumn: '1 / span 2',
width: '100%',
justifyContent: 'space-between',
'@md': {
'@lg': {
gridColumn: '3',
gridRow: '1',
},
@ -193,9 +218,8 @@ export default function ExtensionsInstallHelp(): JSX.Element {
height: '38px',
border: '1px solid #F9D354',
width: '60vw',
'@md': {
'@lg': {
width: '190px',
boxShadow: '$cardBoxShadow',
},
}}
>
@ -244,10 +268,14 @@ export default function ExtensionsInstallHelp(): JSX.Element {
))}
</Dropdown>
<Button
as="a"
target="_blank"
href={extensionDownloadLinks[browserValue]}
css={{
marginLeft: '8px',
height: 'min-content',
'@mdDown': {
textDecoration: 'none',
'@lgDown': {
width: '27vw',
},
}}

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

@ -1,11 +1,14 @@
import React from 'react'
import {
Desktop,
DeviceTabletSpeaker,
DeviceMobileCamera,
} from 'phosphor-react'
import { Box, HStack } from '../elements/LayoutPrimitives'
import { StyledText, StyledImg } from '../elements/StyledText'
import { StyledText, StyledImg, StyledAnchor } from '../elements/StyledText'
import { TooltipWrapped } from './Tooltip'
import Link from 'next/link'
import { InstallationIcon } from './images/InstallationIcon'
const TooltipStyle = {
backgroundColor: '#F9D354',
@ -13,6 +16,8 @@ const TooltipStyle = {
}
export default function MobileInstallHelp(): JSX.Element {
const [selectedTooltip, setSelectedTooltip] =
React.useState<string>('Available for Mac')
const platformSizes = [
{
label: 'Available for Mac',
@ -35,7 +40,7 @@ export default function MobileInstallHelp(): JSX.Element {
gridTemplateRows: '.5fr .5fr .5fr',
backgroundColor: '$grayBg',
padding: '15px',
'@md': {
'@lg': {
marginTop: '0',
paddingTop: '0',
gridTemplateColumns: '1fr 2fr 1fr',
@ -44,45 +49,62 @@ export default function MobileInstallHelp(): JSX.Element {
},
}}
>
<StyledImg
<Box
css={{
gridColumn: 1 / 2,
gridRow: 1 / 2,
marginRight: '$3',
'@mdDown': {
width: '146px',
},
'@md': {
minWidth: '170px',
maxWidth: '200px',
alignSelf: 'center',
'@lg': {
minWidth: '200px',
gridColumn: '1',
gridRow: '1',
},
backgroundColor: '$grayBase',
display: 'flex',
position: 'relative',
height: '116px',
}}
src="/static/images/installation.png"
alt="Save articles"
/>
>
<Box
css={{
position: 'absolute',
top: '-15px',
height: '130px',
}}
>
<InstallationIcon />
</Box>
</Box>
<Box
css={{
gridColumn: '2',
gridRow: '1',
'@md': {
display: 'flex',
flexDirection: 'column',
'@lg': {
marginTop: '$4',
},
}}
>
<StyledText
css={{
fontWeight: '600',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
'@md': {
display: 'none',
},
}}
>
Learn more
</StyledText>
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
fontWeight: '600',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
'@lg': {
display: 'none',
},
}}
>
Learn more
</StyledAnchor>
</Link>
<StyledText
as={'h3'}
css={{
@ -92,7 +114,7 @@ export default function MobileInstallHelp(): JSX.Element {
marginBottom: 0,
color: '$grayTextContrast',
lineHeight: '22.5px',
'@md': {
'@lg': {
fontSize: '16px',
lineHeight: '20px',
},
@ -112,7 +134,7 @@ export default function MobileInstallHelp(): JSX.Element {
gridColumn: '1 / span 3',
gridRow: '2 / 3',
alignSelf: 'center',
'@md': {
'@lg': {
gridColumn: '2',
gridRow: '1',
alignSelf: 'center',
@ -123,22 +145,22 @@ export default function MobileInstallHelp(): JSX.Element {
With the Omnivore iOS app installed you can save any link using our
share extension.
<br />
<StyledText
// as={Link}
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@md': {
display: 'initial',
textDecoration: 'underline',
},
}}
// href="/"
>
Learn more about the share extension here.
</StyledText>
<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
css={{
@ -147,7 +169,7 @@ export default function MobileInstallHelp(): JSX.Element {
alignItems: 'center',
gridColumn: '1 / span 2',
justifyContent: 'space-between',
'@md': {
'@lg': {
flexDirection: 'row-reverse',
gridColumn: '3',
gridRow: '1',
@ -157,7 +179,8 @@ export default function MobileInstallHelp(): JSX.Element {
<StyledImg
css={{
width: '45%',
'@md': {
maxWidth: '150px',
'@lg': {
marginLeft: '$3',
width: '50%',
},
@ -169,7 +192,8 @@ export default function MobileInstallHelp(): JSX.Element {
css={{
width: '40%',
justifyContent: 'space-between',
'@md': {
maxWidth: '13rem',
'@lg': {
width: '100%',
},
}}
@ -184,32 +208,43 @@ export default function MobileInstallHelp(): JSX.Element {
>
<Box
css={{
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 35,
width: 35,
ml: '$1',
cursor: 'pointer',
backgroundColor: '#F5F5F4',
filter: 'grayscale(1)',
'&:focus': {
filter: 'grayscale(0)',
},
'&:active': {
filter: 'grayscale(0)',
},
'@md': {
backgroundColor: '$tooltipIcons',
transition: 'filter .3s linear',
'&:hover': {
filter: 'grayscale(0)',
},
},
}}
>
{item.icon}
<Link href="/install/apple" passHref>
<StyledAnchor
onClick={() => setSelectedTooltip(item.label)}
css={{
mx: 'auto',
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 35,
width: 35,
cursor: 'pointer',
backgroundColor: '#F5F5F4',
...(selectedTooltip !== item.label && {
filter: 'grayscale(1)',
}),
'&:focus': {
filter: 'grayscale(0)',
},
'&:active': {
filter: 'grayscale(0)',
},
'@lg': {
backgroundColor: '$tooltipIcons',
transition: 'filter .3s linear',
'&:hover': {
filter: 'grayscale(0)',
},
},
}}
>
{item.icon}
</StyledAnchor>
</Link>
</Box>
</TooltipWrapped>
))}

4
packages/web/components/elements/StyledText.tsx
View File

@ -154,3 +154,7 @@ export const StyledList = styled('ul', {
export const StyledImg = styled('img', {
})
export const StyledAnchor = styled('a', {
textDecoration: 'none'
})

6
packages/web/components/elements/Tooltip.tsx
View File

@ -53,7 +53,8 @@ export const TooltipContent = StyledContent
export const TooltipArrow = StyledArrow
type TooltipWrappedProps = {
tooltipContent: string
tooltipContent: string;
active?: boolean;
tooltipSide?: TooltipPrimitive.TooltipContentProps['side']
align?: TooltipPrimitive.TooltipContentProps['align']
alignOffset?: TooltipPrimitive.TooltipContentProps['alignOffset']
@ -63,12 +64,13 @@ type TooltipWrappedProps = {
export const TooltipWrapped: FC<TooltipWrappedProps> = ({
children,
active,
tooltipContent,
tooltipSide,
...props
}) => {
return (
<Tooltip>
<Tooltip open={active}>
<TooltipTrigger asChild>{children}</TooltipTrigger>
<TooltipContent sideOffset={5} side={tooltipSide} {...props}>
{tooltipContent}

458
packages/web/components/elements/images/InstallationIcon.tsx Normal file
View File

File diff suppressed because one or more lines are too long

41
packages/web/components/elements/images/SaveArticleIcon.tsx Normal file
View File

File diff suppressed because one or more lines are too long

BIN
packages/web/public/static/images/about/save-article-mobile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 680 KiB

BIN
packages/web/public/static/images/about/save-article.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
packages/web/public/static/images/installation.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
packages/web/public/static/media/about/save-article-mobile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 680 KiB

BIN
packages/web/public/static/media/about/save-article.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
packages/web/public/static/media/appStoreBadge.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB