diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx
index f19495973..a7a8c82af 100644
--- a/packages/web/components/elements/ExtensionsInstallHelp.tsx
+++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx
@@ -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': ,
@@ -16,6 +18,13 @@ const icons = {
Safari: ,
}
+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(
browserOptions[0]
)
- const handleBrowserUpdate = (e: any) => {
- setBrowserValue(e)
- }
+
return (
-
+ >
+
+
+
+
-
- Learn more
-
+
+
+ Learn more
+
+
-
- Learn more about the browser extension here.
-
+
+
+ Learn more about the browser extension here.
+
+
@@ -244,10 +268,14 @@ export default function ExtensionsInstallHelp(): JSX.Element {
))}
-
- Learn more
-
+
+
+ Learn more
+
+
-
- Learn more about the share extension here.
-
+
+
+ Learn more about the share extension here.
+
+
- {item.icon}
+
+ 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}
+
+
))}
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 60ef7e541..af008f21c 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -154,3 +154,7 @@ export const StyledList = styled('ul', {
export const StyledImg = styled('img', {
})
+
+export const StyledAnchor = styled('a', {
+ textDecoration: 'none'
+})
diff --git a/packages/web/components/elements/Tooltip.tsx b/packages/web/components/elements/Tooltip.tsx
index 43f12c04f..465c76a7c 100644
--- a/packages/web/components/elements/Tooltip.tsx
+++ b/packages/web/components/elements/Tooltip.tsx
@@ -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 = ({
children,
+ active,
tooltipContent,
tooltipSide,
...props
}) => {
return (
-
+
{children}
{tooltipContent}
diff --git a/packages/web/components/elements/images/InstallationIcon.tsx b/packages/web/components/elements/images/InstallationIcon.tsx
new file mode 100644
index 000000000..ff515ecf5
--- /dev/null
+++ b/packages/web/components/elements/images/InstallationIcon.tsx
@@ -0,0 +1,458 @@
+type CrossIconProps = {
+ width?: number
+ height?: number
+ strokeColor?: string
+}
+
+export function InstallationIcon({width = 151, height = 130}: CrossIconProps): JSX.Element {
+ return (
+
+ )
+}
diff --git a/packages/web/components/elements/images/SaveArticleIcon.tsx b/packages/web/components/elements/images/SaveArticleIcon.tsx
new file mode 100644
index 000000000..59e605d73
--- /dev/null
+++ b/packages/web/components/elements/images/SaveArticleIcon.tsx
@@ -0,0 +1,41 @@
+type CrossIconProps = {
+ width?: number
+ height?: number
+ strokeColor?: string
+}
+
+export function SaveArticleIcon({
+ width = 170,
+ height = 130,
+}: CrossIconProps): JSX.Element {
+ return (
+
+ )
+}
diff --git a/packages/web/public/static/images/about/save-article-mobile.png b/packages/web/public/static/images/about/save-article-mobile.png
deleted file mode 100644
index 010c39206..000000000
Binary files a/packages/web/public/static/images/about/save-article-mobile.png and /dev/null differ
diff --git a/packages/web/public/static/images/about/save-article.png b/packages/web/public/static/images/about/save-article.png
deleted file mode 100644
index 1d9c8f61e..000000000
Binary files a/packages/web/public/static/images/about/save-article.png and /dev/null differ
diff --git a/packages/web/public/static/images/installation.png b/packages/web/public/static/images/installation.png
deleted file mode 100644
index de0025f86..000000000
Binary files a/packages/web/public/static/images/installation.png and /dev/null differ
diff --git a/packages/web/public/static/media/about/save-article-mobile.png b/packages/web/public/static/media/about/save-article-mobile.png
deleted file mode 100644
index 010c39206..000000000
Binary files a/packages/web/public/static/media/about/save-article-mobile.png and /dev/null differ
diff --git a/packages/web/public/static/media/about/save-article.png b/packages/web/public/static/media/about/save-article.png
deleted file mode 100644
index 1d9c8f61e..000000000
Binary files a/packages/web/public/static/media/about/save-article.png and /dev/null differ
diff --git a/packages/web/public/static/media/appStoreBadge.png b/packages/web/public/static/media/appStoreBadge.png
index f18b6d7d8..3353692cb 100644
Binary files a/packages/web/public/static/media/appStoreBadge.png and b/packages/web/public/static/media/appStoreBadge.png differ