diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index c7703b5ee..625d04ac7 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/packages/web/components/elements/DropdownElements.tsx @@ -46,10 +46,11 @@ const StyledTriggerItem = styled(TriggerItem, { const DropdownContent = styled(Content, { minWidth: 130, - backgroundColor: '$grayBase', + backgroundColor: '$grayBg', borderRadius: '0.5em', padding: 5, border: '1px solid $grayBorder', + boxShadow: '$cardBoxShadow' }) const StyledArrow = styled(Arrow, { @@ -64,9 +65,10 @@ const StyledLabel = styled(Label, { }) type DropdownProps = { - labelText?: string - triggerElement: React.ReactNode - children: React.ReactNode + labelText?: string; + showArrow?: boolean; + triggerElement: React.ReactNode; + children: React.ReactNode; } export const DropdownSeparator = styled(Separator, { @@ -91,11 +93,11 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element { ) } -export function Dropdown(props: DropdownProps): JSX.Element { +export function Dropdown({children, triggerElement, labelText, showArrow = true}: DropdownProps): JSX.Element { return ( - {props.triggerElement} + {triggerElement} { @@ -103,9 +105,9 @@ export function Dropdown(props: DropdownProps): JSX.Element { ;(document.activeElement as HTMLElement).blur() }} > - {props.labelText && {props.labelText}} - {props.children} - + {labelText && {labelText}} + {children} + {showArrow && } ) diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx index b88fd5e70..f19495973 100644 --- a/packages/web/components/elements/ExtensionsInstallHelp.tsx +++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx @@ -1,121 +1,261 @@ -import { useCallback, useState } from 'react' -import { SettingsLayout } from '../templates/SettingsLayout' -import { - Box, - VStack, - HStack, -} from './LayoutPrimitives' -import { StyledText } from './StyledText' -import { Button } from './Button' -import Router from 'next/router' -import { - Dropdown, - DropdownOption, -} from './DropdownElements' -import { ChromeIcon } from './images/ChromeIcon' -import { SafariIcon } from './images/SafariIcon' -import { FirefoxIcon } from './images/FirefoxIcon' -import { EdgeIcon } from './images/EdgeIcon' +import React from 'react' +import { Box, HStack } from '../elements/LayoutPrimitives' +import { StyledImg, StyledText } from '../elements/StyledText' import { AngleDownIcon } from '../tokens/icons/AngleDownIcon' -import { theme } from '../tokens/stitches.config' +import { Button } from './Button' +import { Dropdown, DropdownOption, DropdownSeparator } from './DropdownElements' +import { ChromeIcon } from './images/ChromeIcon' +import { EdgeIcon } from './images/EdgeIcon' +import { FirefoxIcon } from './images/FirefoxIcon' +import { SafariIcon } from './images/SafariIcon' -export default function ExtensionInstallHelp(): JSX.Element { +const icons = { + 'Google Chrome': , + 'Microsoft Edge': , + Firefox: , + Safari: , +} + +const browserOptions = [ + 'Google Chrome', + 'Firefox', + 'Microsoft Edge', + 'Safari', +] as const + +type browserType = typeof browserOptions[number] + +const BrowserOption: React.FC<{ + browser: browserType +}> = ({ browser }) => { return ( - - - - ) -} - -const extensionDownloadLinks = { - chrome: 'https://omnivore.app/install/chrome', - safari: 'https://omnivore.app/install/mac', - edge: 'https://omnivore.app/install/edge', - firefox: 'https://omnivore.app/install/firefox', -} - -export type Browser = 'chrome' | 'safari' | 'firefox' | 'edge' - -const browserInfo = (browser: Browser): { title: string, icon: JSX.Element } => { - const fillColor = theme.colors.grayText.toString() - switch (browser) { - case 'chrome': - return { title: 'Chrome', icon: } - case 'safari': - return { title: 'Safari', icon: } - case 'firefox': - return { title: 'FireFox', icon: } - case 'edge': - return { title: 'Edge', icon: } - } -} - -function ExtensionSelector(): JSX.Element { - const [browser, setBrowser] = useState('chrome') - - const selectBrowser = useCallback(() => { - window.location.href = extensionDownloadLinks[browser] - }, [browser]) - - return ( - - Install Browser Extensions - - Installing the Omnivore browser extension is the best way to save pages to - Omnivore from your computer. Learn more about the browser extensions here. - - - Save articles - - - - - Download for a different browser}> - setBrowser('chrome')}> - - - setBrowser('safari')}> - - - setBrowser('firefox')}> - - - setBrowser('edge')} hideSeparator> - - - - - - - ) -} - -type BrowserOptionProps = { - browser: Browser -} - -function BrowserOption(props: BrowserOptionProps): JSX.Element { - const info = browserInfo(props.browser) - return ( - - {info.icon} - - {info.title} + {icons[browser as browserType]} + + {browser} ) } + +export default function ExtensionsInstallHelp(): JSX.Element { + const [browserValue, setBrowserValue] = React.useState( + browserOptions[0] + ) + const handleBrowserUpdate = (e: any) => { + setBrowserValue(e) + } + return ( + + + + + Learn more + + + Install Browser Extensions + + + + Installing the Omnivore browser extension is the best way to save pages + to Omnivore from your computer. +
+ + Learn more about the browser extension here. + + + + + + {icons[browserValue]} + + {browserValue} + + + + + + + } + > + {browserOptions.map((item, idx) => ( +
+ setBrowserValue(item)}> + + + {idx !== browserOptions.length - 1 && ( + + )} +
+ ))} + + + + + ) +} diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx index 09c8b6ff0..cd16855fb 100644 --- a/packages/web/components/elements/MobileInstallHelp.tsx +++ b/packages/web/components/elements/MobileInstallHelp.tsx @@ -1,25 +1,220 @@ -import { Box, VStack } from '../elements/LayoutPrimitives' -import { StyledText } from '../elements/StyledText' +import { + Desktop, + DeviceTabletSpeaker, + DeviceMobileCamera, +} from 'phosphor-react' +import { Box, HStack } from '../elements/LayoutPrimitives' +import { StyledText, StyledImg } from '../elements/StyledText' +import { TooltipWrapped } from './Tooltip' + +const TooltipStyle = { + backgroundColor: '#F9D354', + color: '#0A0806', +} export default function MobileInstallHelp(): JSX.Element { + const platformSizes = [ + { + label: 'Available for Mac', + icon: , + }, + { + label: 'Available for Tablet', + icon: , + }, + { + label: 'Available for Phone', + icon: , + }, + ] return ( - - Install Omnivore for iOS - - With the Omnivore iOS app installed you can save any link using our share extension. - Learn more about the share extension here. + + + + Learn more + + + Install Omnivore for iOS + + + + With the Omnivore iOS app installed you can save any link using our + share extension. +
+ + Learn more about the share extension here. + - - - Download on the App Store - - - + + + + {platformSizes.map((item, idx) => ( + + + {item.icon} + + + ))} + + + ) } diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index a36e41911..60ef7e541 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -151,3 +151,6 @@ export const StyledList = styled('ul', { lineHeight: '1.35', color: '$grayTextContrast', }) + +export const StyledImg = styled('img', { +}) diff --git a/packages/web/components/elements/Tooltip.tsx b/packages/web/components/elements/Tooltip.tsx new file mode 100644 index 000000000..43f12c04f --- /dev/null +++ b/packages/web/components/elements/Tooltip.tsx @@ -0,0 +1,79 @@ +import React, { FC } from 'react' +import { styled, keyframes } from '@stitches/react' +import * as TooltipPrimitive from '@radix-ui/react-tooltip' + +const slideUpAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateY(2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' }, +}) + +const slideRightAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateX(-2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' }, +}) + +const slideDownAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateY(-2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' }, +}) + +const slideLeftAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateX(2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' }, +}) + +const StyledContent = styled(TooltipPrimitive.Content, { + borderRadius: 4, + padding: '8px 13px', + fontSize: 12, + color: '#FFFFFF', + backgroundColor: '#1C1C1E', + '@media (prefers-reduced-motion: no-preference)': { + animationDuration: '400ms', + animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', + animationFillMode: 'forwards', + willChange: 'transform, opacity', + '&[data-state="delayed-open"]': { + '&[data-side="top"]': { animationName: slideDownAndFade }, + '&[data-side="right"]': { animationName: slideLeftAndFade }, + '&[data-side="bottom"]': { animationName: slideUpAndFade }, + '&[data-side="left"]': { animationName: slideRightAndFade }, + }, + }, +}) + +const StyledArrow = styled(TooltipPrimitive.Arrow, { + fill: '#1C1C1E', +}) + +export const TooltipProvider = TooltipPrimitive.Provider +export const Tooltip = TooltipPrimitive.Root +export const TooltipTrigger = TooltipPrimitive.Trigger +export const TooltipContent = StyledContent +export const TooltipArrow = StyledArrow + +type TooltipWrappedProps = { + tooltipContent: string + tooltipSide?: TooltipPrimitive.TooltipContentProps['side'] + align?: TooltipPrimitive.TooltipContentProps['align'] + alignOffset?: TooltipPrimitive.TooltipContentProps['alignOffset'] + arrowStyles?: TooltipPrimitive.TooltipArrowProps['style'] + style?: TooltipPrimitive.TooltipContentProps['style'] +} + +export const TooltipWrapped: FC = ({ + children, + tooltipContent, + tooltipSide, + ...props +}) => { + return ( + + {children} + + {tooltipContent} + + + + ) +} diff --git a/packages/web/components/elements/images/ChromeIcon.tsx b/packages/web/components/elements/images/ChromeIcon.tsx index 09483304e..d04634f9e 100644 --- a/packages/web/components/elements/images/ChromeIcon.tsx +++ b/packages/web/components/elements/images/ChromeIcon.tsx @@ -1,32 +1,16 @@ type ChromeIconProps = { - fillColor: string + fillColor?: string } export function ChromeIcon(props: ChromeIconProps): JSX.Element { return ( - - - - - + + + + + + + ) } diff --git a/packages/web/components/elements/images/EdgeIcon.tsx b/packages/web/components/elements/images/EdgeIcon.tsx index c00cfa691..36633c38d 100644 --- a/packages/web/components/elements/images/EdgeIcon.tsx +++ b/packages/web/components/elements/images/EdgeIcon.tsx @@ -1,22 +1,127 @@ type EdgeIconProps = { - fillColor: string + fillColor?: string } export function EdgeIcon(props: EdgeIconProps): JSX.Element { return ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/web/components/elements/images/FirefoxIcon.tsx b/packages/web/components/elements/images/FirefoxIcon.tsx index 20abdd544..7245eea8a 100644 --- a/packages/web/components/elements/images/FirefoxIcon.tsx +++ b/packages/web/components/elements/images/FirefoxIcon.tsx @@ -1,20 +1,232 @@ type FirefoxIconProps = { - fillColor: string + fillColor?: string } export function FirefoxIcon(props: FirefoxIconProps): JSX.Element { return ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/web/components/elements/images/SafariIcon.tsx b/packages/web/components/elements/images/SafariIcon.tsx index 8ce01df82..f425e438d 100644 --- a/packages/web/components/elements/images/SafariIcon.tsx +++ b/packages/web/components/elements/images/SafariIcon.tsx @@ -1,30 +1,50 @@ type SafariIconProps = { - fillColor: string + fillColor?: string } export function SafariIcon(props: SafariIconProps): JSX.Element { return ( - - - + + + + + + + + + + + ) } diff --git a/packages/web/components/patterns/DropdownMenu.tsx b/packages/web/components/patterns/DropdownMenu.tsx index ff5689b8d..ea879282e 100644 --- a/packages/web/components/patterns/DropdownMenu.tsx +++ b/packages/web/components/patterns/DropdownMenu.tsx @@ -41,7 +41,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { Theme