[Omn-192] - Settings View(Installation)
This commit is contained in:
gitstart-omnivore
@ -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 (
|
||||
<Root modal={false}>
|
||||
<DropdownTrigger>
|
||||
{props.triggerElement}
|
||||
{triggerElement}
|
||||
</DropdownTrigger>
|
||||
<DropdownContent
|
||||
onInteractOutside={(event) => {
|
||||
@ -103,9 +105,9 @@ export function Dropdown(props: DropdownProps): JSX.Element {
|
||||
;(document.activeElement as HTMLElement).blur()
|
||||
}}
|
||||
>
|
||||
{props.labelText && <StyledLabel>{props.labelText}</StyledLabel>}
|
||||
{props.children}
|
||||
<StyledArrow offset={20} />
|
||||
{labelText && <StyledLabel>{labelText}</StyledLabel>}
|
||||
{children}
|
||||
{showArrow && <StyledArrow offset={20} />}
|
||||
</DropdownContent>
|
||||
</Root>
|
||||
)
|
||||
|
||||
@ -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': <ChromeIcon />,
|
||||
'Microsoft Edge': <EdgeIcon />,
|
||||
Firefox: <FirefoxIcon />,
|
||||
Safari: <SafariIcon />,
|
||||
}
|
||||
|
||||
const browserOptions = [
|
||||
'Google Chrome',
|
||||
'Firefox',
|
||||
'Microsoft Edge',
|
||||
'Safari',
|
||||
] as const
|
||||
|
||||
type browserType = typeof browserOptions[number]
|
||||
|
||||
const BrowserOption: React.FC<{
|
||||
browser: browserType
|
||||
}> = ({ browser }) => {
|
||||
return (
|
||||
<Box
|
||||
<HStack
|
||||
css={{
|
||||
bg: '$grayBase',
|
||||
px: '$1',
|
||||
py: '$3',
|
||||
height: '100vh',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
minWidth: 165,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<ExtensionSelector />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
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: <ChromeIcon fillColor={fillColor} /> }
|
||||
case 'safari':
|
||||
return { title: 'Safari', icon: <SafariIcon fillColor={fillColor} /> }
|
||||
case 'firefox':
|
||||
return { title: 'FireFox', icon: <FirefoxIcon fillColor={fillColor} /> }
|
||||
case 'edge':
|
||||
return { title: 'Edge', icon: <EdgeIcon fillColor={fillColor} /> }
|
||||
}
|
||||
}
|
||||
|
||||
function ExtensionSelector(): JSX.Element {
|
||||
const [browser, setBrowser] = useState<Browser>('chrome')
|
||||
|
||||
const selectBrowser = useCallback(() => {
|
||||
window.location.href = extensionDownloadLinks[browser]
|
||||
}, [browser])
|
||||
|
||||
return (
|
||||
<VStack
|
||||
css={{
|
||||
bg: '$grayBase',
|
||||
px: '$1',
|
||||
py: '$3',
|
||||
maxWidth: '30em',
|
||||
}}
|
||||
>
|
||||
<StyledText style="boldHeadline">Install Browser Extensions</StyledText>
|
||||
<StyledText style="body" css={{ width: '100%' }}>
|
||||
Installing the Omnivore browser extension is the best way to save pages to
|
||||
Omnivore from your computer. Learn more about the browser extensions <a href="https://omnivore.app/help/saving-links#savingfromyourcomputer">here</a>.
|
||||
</StyledText>
|
||||
<HStack distribution="center" css={{ width: '100%', mb: '32px', pl: '24px' }}>
|
||||
<img src="/static/media/about/save-article.png" alt="Save articles" width="300"></img>
|
||||
</HStack>
|
||||
<VStack alignment="center" css={{ mb: '32px', width: '100%' }}>
|
||||
<Button onClick={selectBrowser} style="ctaDarkYellow" css={{ p: '18px', px: '42px', fontSize: '18px' }}>Download for {browserInfo(browser).title}</Button>
|
||||
<Box >
|
||||
<Dropdown triggerElement={<StyledText style='captionLink' css={{ fontSize: '12px' }}>Download for a different browser</StyledText>}>
|
||||
<DropdownOption onSelect={() => setBrowser('chrome')}>
|
||||
<BrowserOption browser="chrome" />
|
||||
</DropdownOption>
|
||||
<DropdownOption onSelect={() => setBrowser('safari')}>
|
||||
<BrowserOption browser="safari" />
|
||||
</DropdownOption>
|
||||
<DropdownOption onSelect={() => setBrowser('firefox')}>
|
||||
<BrowserOption browser="firefox" />
|
||||
</DropdownOption>
|
||||
<DropdownOption onSelect={() => setBrowser('edge')} hideSeparator>
|
||||
<BrowserOption browser="edge" />
|
||||
</DropdownOption>
|
||||
</Dropdown>
|
||||
</Box>
|
||||
</VStack>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
type BrowserOptionProps = {
|
||||
browser: Browser
|
||||
}
|
||||
|
||||
function BrowserOption(props: BrowserOptionProps): JSX.Element {
|
||||
const info = browserInfo(props.browser)
|
||||
return (
|
||||
<HStack alignment="center" distribution="start">
|
||||
<Box css={{ m: '$2' }}>{info.icon}</Box>
|
||||
<StyledText css={{ m: '$2' }}>
|
||||
{info.title}
|
||||
<Box css={{ mr: '$3' }}>{icons[browser as browserType]}</Box>
|
||||
<StyledText
|
||||
css={{
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '12px',
|
||||
my: '0',
|
||||
}}
|
||||
>
|
||||
{browser}
|
||||
</StyledText>
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ExtensionsInstallHelp(): JSX.Element {
|
||||
const [browserValue, setBrowserValue] = React.useState<browserType>(
|
||||
browserOptions[0]
|
||||
)
|
||||
const handleBrowserUpdate = (e: any) => {
|
||||
setBrowserValue(e)
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
css={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 2fr',
|
||||
gridTemplateRows: '.5fr .5fr .5fr',
|
||||
backgroundColor: '$grayBg',
|
||||
padding: '15px',
|
||||
'@md': {
|
||||
gridTemplateColumns: '1fr 2fr 1fr',
|
||||
gridTemplateRows: '1fr',
|
||||
height: '9rem',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StyledImg
|
||||
css={{
|
||||
gridColumn: 1 / 2,
|
||||
gridRow: 1 / 2,
|
||||
width: 146,
|
||||
marginRight: '$3',
|
||||
'@md': {
|
||||
width: 211,
|
||||
gridColumn: '1',
|
||||
gridRow: '1',
|
||||
},
|
||||
}}
|
||||
src="/static/media/about/save-article.png"
|
||||
alt="Save articles"
|
||||
/>
|
||||
<Box
|
||||
css={{
|
||||
gridColumn: '2',
|
||||
gridRow: '1',
|
||||
'@md': {
|
||||
marginTop: '$3',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StyledText
|
||||
css={{
|
||||
fontWeight: '600',
|
||||
fontSize: '12px',
|
||||
lineHeight: '18px',
|
||||
textAlign: 'right',
|
||||
color: '$grayTextContrast',
|
||||
'@md': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more
|
||||
</StyledText>
|
||||
<StyledText
|
||||
as={'h3'}
|
||||
css={{
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
color: '$grayTextContrast',
|
||||
lineHeight: '22.5px',
|
||||
'@md': {
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Install Browser Extensions
|
||||
</StyledText>
|
||||
</Box>
|
||||
<StyledText
|
||||
css={{
|
||||
size: '14px',
|
||||
fontWeight: 400,
|
||||
color: '$grayTextContrast',
|
||||
maxWidth: '20rem',
|
||||
lineHeight: '21px',
|
||||
gridColumn: '1 / span 3',
|
||||
gridRow: '2 / 3',
|
||||
alignSelf: 'center',
|
||||
'@md': {
|
||||
gridColumn: '2',
|
||||
gridRow: '1',
|
||||
alignSelf: 'center',
|
||||
marginTop: '$4',
|
||||
},
|
||||
}}
|
||||
>
|
||||
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>
|
||||
</StyledText>
|
||||
<HStack
|
||||
css={{
|
||||
gridRow: '3',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gridColumn: '1 / span 2',
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
'@md': {
|
||||
gridColumn: '3',
|
||||
gridRow: '1',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Dropdown
|
||||
showArrow={false}
|
||||
triggerElement={
|
||||
<HStack
|
||||
css={{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '1px 4px',
|
||||
borderRadius: '6px',
|
||||
height: '38px',
|
||||
border: '1px solid #F9D354',
|
||||
width: '60vw',
|
||||
'@md': {
|
||||
width: '190px',
|
||||
boxShadow: '$cardBoxShadow',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
ml: '$2',
|
||||
mr: '$1',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{icons[browserValue]}
|
||||
<StyledText
|
||||
css={{
|
||||
whiteSpace: 'nowrap',
|
||||
marginLeft: '$3',
|
||||
}}
|
||||
>
|
||||
{browserValue}
|
||||
</StyledText>
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
mx: '$1',
|
||||
}}
|
||||
>
|
||||
<AngleDownIcon height={10} width={20} />
|
||||
</Box>
|
||||
</HStack>
|
||||
}
|
||||
>
|
||||
{browserOptions.map((item, idx) => (
|
||||
<div key={`browserOptions${idx}`}>
|
||||
<DropdownOption key={idx} onSelect={() => setBrowserValue(item)}>
|
||||
<BrowserOption browser={item} />
|
||||
</DropdownOption>
|
||||
{idx !== browserOptions.length - 1 && (
|
||||
<DropdownSeparator
|
||||
css={{
|
||||
height: '1px',
|
||||
backgroundColor: '$grayBorder',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Dropdown>
|
||||
<Button
|
||||
css={{
|
||||
marginLeft: '8px',
|
||||
height: 'min-content',
|
||||
'@mdDown': {
|
||||
width: '27vw',
|
||||
},
|
||||
}}
|
||||
style="ctaDarkYellow"
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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: <Desktop color="#F9D354" />,
|
||||
},
|
||||
{
|
||||
label: 'Available for Tablet',
|
||||
icon: <DeviceTabletSpeaker color="#F9D354" />,
|
||||
},
|
||||
{
|
||||
label: 'Available for Phone',
|
||||
icon: <DeviceMobileCamera color="#F9D354" />,
|
||||
},
|
||||
]
|
||||
return (
|
||||
<VStack
|
||||
<Box
|
||||
css={{
|
||||
px: '$1',
|
||||
py: '$3',
|
||||
maxWidth: '30em',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 2fr',
|
||||
gridTemplateRows: '.5fr .5fr .5fr',
|
||||
backgroundColor: '$grayBg',
|
||||
padding: '15px',
|
||||
'@md': {
|
||||
marginTop: '0',
|
||||
paddingTop: '0',
|
||||
gridTemplateColumns: '1fr 2fr 1fr',
|
||||
gridTemplateRows: '1fr',
|
||||
height: '9rem',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StyledText style="boldHeadline">Install Omnivore for iOS</StyledText>
|
||||
<StyledText style="body" css={{ width: '100%' }}>
|
||||
With the Omnivore iOS app installed you can save any link using our share extension.
|
||||
Learn more about the share extension <a href="https://omnivore.app/help/saving-links#savingfromyouriphone">here.</a>
|
||||
<StyledImg
|
||||
css={{
|
||||
gridColumn: 1 / 2,
|
||||
gridRow: 1 / 2,
|
||||
marginRight: '$3',
|
||||
'@mdDown': {
|
||||
width: '146px',
|
||||
},
|
||||
'@md': {
|
||||
gridColumn: '1',
|
||||
gridRow: '1',
|
||||
},
|
||||
}}
|
||||
src="/static/images/installation.png"
|
||||
alt="Save articles"
|
||||
/>
|
||||
<Box
|
||||
css={{
|
||||
gridColumn: '2',
|
||||
gridRow: '1',
|
||||
'@md': {
|
||||
marginTop: '$4',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StyledText
|
||||
css={{
|
||||
fontWeight: '600',
|
||||
fontSize: '12px',
|
||||
lineHeight: '18px',
|
||||
textAlign: 'right',
|
||||
color: '$grayTextContrast',
|
||||
'@md': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Learn more
|
||||
</StyledText>
|
||||
<StyledText
|
||||
as={'h3'}
|
||||
css={{
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
color: '$grayTextContrast',
|
||||
lineHeight: '22.5px',
|
||||
'@md': {
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Install Omnivore for iOS
|
||||
</StyledText>
|
||||
</Box>
|
||||
<StyledText
|
||||
css={{
|
||||
size: '14px',
|
||||
my: '$2',
|
||||
fontWeight: 400,
|
||||
color: '$grayTextContrast',
|
||||
maxWidth: '20rem',
|
||||
lineHeight: '21px',
|
||||
gridColumn: '1 / span 3',
|
||||
gridRow: '2 / 3',
|
||||
alignSelf: 'center',
|
||||
'@md': {
|
||||
gridColumn: '2',
|
||||
gridRow: '1',
|
||||
alignSelf: 'center',
|
||||
marginTop: '$4',
|
||||
},
|
||||
}}
|
||||
>
|
||||
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>
|
||||
</StyledText>
|
||||
<VStack alignment="center" css={{ mt: '16px', width: '100%' }}>
|
||||
<a href="https://omnivore.app/install/ios" style={{ display: 'inlineBlock', overflow: 'hidden', borderTopLeftRadius: '13px', borderTopRightRadius: '13px', borderBottomRightRadius: '13px', borderBottomLeftRadius: '13px', width: '250px', height: '83px' }}>
|
||||
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3" alt="Download on the App Store" style={{ borderTopLeftRadius: '13px', borderTopRightRadius: '13px', borderBottomRightRadius: '13px', borderBottomLeftRadius: '13px', width: '250px', height: '83px'}} />
|
||||
</a>
|
||||
</VStack>
|
||||
</VStack>
|
||||
<HStack
|
||||
css={{
|
||||
gridRow: '3',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gridColumn: '1 / span 2',
|
||||
justifyContent: 'space-between',
|
||||
'@md': {
|
||||
flexDirection: 'row-reverse',
|
||||
gridColumn: '3',
|
||||
gridRow: '1',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StyledImg
|
||||
css={{
|
||||
width: '45%',
|
||||
'@md': {
|
||||
marginLeft: '$3',
|
||||
width: '50%',
|
||||
},
|
||||
}}
|
||||
src="/static/media/appStoreBadge.png"
|
||||
alt="Save articles"
|
||||
/>
|
||||
<HStack
|
||||
css={{
|
||||
width: '40%',
|
||||
justifyContent: 'space-between',
|
||||
'@md': {
|
||||
width: '100%',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{platformSizes.map((item, idx) => (
|
||||
<TooltipWrapped
|
||||
key={`platformSize-${idx}`}
|
||||
tooltipContent={item.label}
|
||||
tooltipSide={'top'}
|
||||
style={TooltipStyle}
|
||||
arrowStyles={{ fill: '#F9D354' }}
|
||||
>
|
||||
<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}
|
||||
</Box>
|
||||
</TooltipWrapped>
|
||||
))}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -151,3 +151,6 @@ export const StyledList = styled('ul', {
|
||||
lineHeight: '1.35',
|
||||
color: '$grayTextContrast',
|
||||
})
|
||||
|
||||
export const StyledImg = styled('img', {
|
||||
})
|
||||
|
||||
79
packages/web/components/elements/Tooltip.tsx
Normal file
79
packages/web/components/elements/Tooltip.tsx
Normal file
@ -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<TooltipWrappedProps> = ({
|
||||
children,
|
||||
tooltipContent,
|
||||
tooltipSide,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent sideOffset={5} side={tooltipSide} {...props}>
|
||||
{tooltipContent}
|
||||
<TooltipArrow style={props.arrowStyles} />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
@ -1,32 +1,16 @@
|
||||
type ChromeIconProps = {
|
||||
fillColor: string
|
||||
fillColor?: string
|
||||
}
|
||||
|
||||
export function ChromeIcon(props: ChromeIconProps): JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 18.1219C10.8 18.1219 9.68437 17.7891 8.69062 17.1281C7.69687 16.4672 6.95156 15.6375 6.45469 14.6063L1.49062 6C0.454687 7.86094 0 9.89062 0 12C0 15.0188 0.99375 17.6297 2.93906 19.8609C4.88438 22.0922 7.32656 23.4187 10.2234 23.8734L13.7016 17.8312C13.3641 17.9578 12.7453 18.1219 12 18.1219Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<path
|
||||
d="M8.23594 7.03594C9.35156 6.16875 10.5938 5.79375 12 5.79375H22.3031C21.225 3.975 19.7812 2.64844 17.9578 1.6125C16.1391 0.539063 14.1516 0 12 0C10.1391 0 8.35781 0.4125 6.74531 1.2C5.13281 1.9875 3.6 3.14531 2.52656 4.63594L6 10.3453C6.33281 9.01875 7.11562 7.90313 8.23594 7.03594Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<path
|
||||
d="M23.0906 7.49063H16.1391C17.3391 8.69063 18.1688 10.2609 18.1688 12C18.1688 13.2844 17.7984 14.4422 17.0906 15.5156L12.1219 24C15.3891 23.9578 18.2062 22.8 20.5219 20.4422C22.8375 18.0844 24 15.2672 24 12C24 10.4672 23.7516 8.85469 23.0906 7.49063Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<path
|
||||
d="M12 7.44844C14.4844 7.44844 16.5516 9.51562 16.5516 12C16.5516 14.4844 14.4844 16.5516 12 16.5516C9.51562 16.5516 7.44844 14.4844 7.44844 12C7.44844 9.51562 9.51562 7.44844 12 7.44844Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9468 0.252006C11.9468 0.252006 19.0093 -0.0658779 22.7524 7.03165H11.3464C11.3464 7.03165 9.19246 6.96087 7.35602 9.57419C6.82659 10.669 6.26168 11.7991 6.89719 14.0234C5.97901 12.47 2.02399 5.58404 2.02399 5.58404C2.02399 5.58404 4.81381 0.534328 11.9468 0.252006Z" fill="#E14C40"/>
|
||||
<path d="M22.3846 18.2729C22.3846 18.2729 19.1279 24.5472 11.1094 24.239C12.0987 22.5269 16.8136 14.3621 16.8136 14.3621C16.8136 14.3621 17.952 12.5323 16.6081 9.63541C15.9248 8.62915 15.2288 7.57477 12.9844 7.01245C14.7894 6.99471 22.7298 7.01365 22.7298 7.01365C22.7298 7.01365 25.7071 11.955 22.3846 18.273" fill="#FFD24D"/>
|
||||
<path d="M1.55978 18.3206C1.55978 18.3206 -2.2456 12.3621 2.03127 5.57252L7.73199 15.4519C7.73199 15.4519 8.74745 17.3525 11.9285 17.6371C13.1414 17.5486 14.4024 17.4732 16.0114 15.8109C15.1246 17.3826 11.1373 24.2499 11.1373 24.2499C11.1373 24.2499 5.36956 24.3574 1.55978 18.3206Z" fill="#00AA60"/>
|
||||
<path d="M6.57373 12.3482C6.57373 9.39729 8.96612 7.00455 11.9176 7.00455C14.869 7.00455 17.2611 9.39729 17.2611 12.3482C17.2611 15.3 14.869 17.6924 11.9176 17.6924C8.96612 17.6924 6.57373 15.3 6.57373 12.3481" fill="white"/>
|
||||
<path d="M7.72754 12.3482C7.72754 10.0343 9.60367 8.15815 11.9179 8.15815C14.2314 8.15815 16.1079 10.0343 16.1079 12.3482C16.1079 14.6625 14.2315 16.5386 11.9179 16.5386C9.60367 16.5386 7.72754 14.6624 7.72754 12.3482Z" fill="#577FC0"/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,22 +1,127 @@
|
||||
type EdgeIconProps = {
|
||||
fillColor: string
|
||||
fillColor?: string
|
||||
}
|
||||
|
||||
export function EdgeIcon(props: EdgeIconProps): JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.2013 14.0356C14.2325 14.0054 14.26 13.9788 14.2781 13.9539C14.7563 13.3354 15.0187 12.5857 15.0187 12.0797C15.0187 12.0406 15.0181 11.9971 15.0167 11.9496C15.0152 11.9553 15.0138 11.9602 15.0127 11.9641C15.0106 11.9719 15.0094 11.9761 15.0094 11.9765C15 11.3392 14.7844 10.7301 14.4094 10.2241C13.8375 9.46498 12.9469 9.01515 12 9.00578C11.3409 8.9965 10.8472 9.23533 10.5555 9.37649L10.5469 9.38064L10.5459 9.38112L10.5562 9.38067C9.61873 9.88673 9.02811 10.8707 9.01873 11.939C9.01873 15.8469 12.8812 18.902 17.3156 18.902C18.4687 18.902 19.6031 18.6958 20.6812 18.2928C21.0187 18.171 21.3469 18.021 21.6656 17.8524C21.7875 17.7868 21.9281 17.7961 22.0594 17.8711C22.2281 17.9836 22.2844 18.2085 22.1719 18.3865C20.7094 20.7013 18.5156 22.4443 15.9281 23.3346L15.8062 23.3721C15.5771 23.4453 15.2972 23.5184 14.9984 23.5832C15.2698 23.532 15.5396 23.4648 15.8063 23.3814C10.0313 25.3025 3.73126 22.6036 1.14376 17.0932C0.384383 15.4533 -0.00936696 13.654 0.00938304 11.8453C0.00938304 11.5989 0.0269498 11.3499 0.061091 11.1001C0.0246027 11.3349 0.00397064 11.5738 0.000157058 11.816C0.0995428 5.26099 5.44106 0 12 0C16.6594 0 20.9531 2.23038 22.9406 6.11948C22.9592 6.15654 22.9794 6.19638 23.001 6.239C23.3403 6.90782 24.0264 8.26008 24 10.2335C24 12.2765 22.9125 14.1601 21.15 15.1909C20.2875 15.7064 19.3125 15.9781 18.3094 15.9781C18.3092 15.9781 18.3081 15.9782 18.3061 15.9783C18.2031 15.9824 15.7335 16.082 14.4094 15.1628C14.1281 14.966 13.9688 14.7317 13.9688 14.4881C13.9688 14.2607 14.1035 14.1303 14.2013 14.0356ZM7.50002 5.63217C3.74105 5.63217 0.539301 8.02176 0.061091 11.1001C0.500836 7.88196 3.69029 4.51691 7.5094 4.51691C16.9743 4.51691 15.1512 11.462 15.0167 11.9496C15 11.3813 14.8708 10.2405 14.3344 9.31511C13.7719 8.34986 12.9656 7.38461 11.4375 6.57868C9.70315 5.66029 7.82815 5.63217 7.50002 5.63217ZM9.90938 22.6223C9.07501 22.1068 8.35313 21.4227 7.78126 20.6262C5.31563 17.2525 6.05626 12.52 9.43126 10.0553C9.7872 9.80249 10.1525 9.56846 10.5459 9.38112C6.54195 9.55655 5.51248 13.731 5.51248 16.1748C5.51248 23.1002 11.8969 23.8031 13.275 23.8031C13.7642 23.8031 14.417 23.7091 14.9984 23.5832C13.2561 23.9115 11.4424 23.579 9.90938 22.6223Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<g clip-path="url(#clip0_444_32057)">
|
||||
<path
|
||||
d="M21.6609 18.613C21.3409 18.7803 21.0109 18.9278 20.6728 19.0545C19.5965 19.4572 18.4564 19.6624 17.3072 19.6601C12.8709 19.6601 9.00655 16.6086 9.00655 12.6926C9.01223 12.1674 9.15798 11.6532 9.42875 11.2031C9.69952 10.7531 10.0855 10.3834 10.5469 10.1323C6.53436 10.3011 5.50311 14.4823 5.50311 16.932C5.50311 23.8583 11.8866 24.5604 13.2619 24.5604C14.0034 24.5604 15.1219 24.3448 15.7931 24.1329L15.9159 24.0917C18.499 23.1987 20.701 21.4529 22.1597 19.1417C22.2044 19.0713 22.2243 18.988 22.2164 18.9051C22.2084 18.8221 22.1731 18.7441 22.1159 18.6834C22.0587 18.6228 21.9829 18.5829 21.9005 18.5702C21.8181 18.5574 21.7338 18.5725 21.6609 18.613Z"
|
||||
fill="url(#paint0_linear_444_32057)"
|
||||
/>
|
||||
<path
|
||||
opacity="0.35"
|
||||
d="M21.6609 18.613C21.3409 18.7803 21.0109 18.9278 20.6728 19.0545C19.5965 19.4572 18.4564 19.6624 17.3072 19.6601C12.8709 19.6601 9.00655 16.6086 9.00655 12.6926C9.01223 12.1674 9.15798 11.6532 9.42875 11.2031C9.69952 10.7531 10.0855 10.3834 10.5469 10.1323C6.53436 10.3011 5.50311 14.4823 5.50311 16.932C5.50311 23.8583 11.8866 24.5604 13.2619 24.5604C14.0034 24.5604 15.1219 24.3448 15.7931 24.1329L15.9159 24.0917C18.499 23.1987 20.701 21.4529 22.1597 19.1417C22.2044 19.0713 22.2243 18.988 22.2164 18.9051C22.2084 18.8221 22.1731 18.7441 22.1159 18.6834C22.0587 18.6228 21.9829 18.5829 21.9005 18.5702C21.8181 18.5574 21.7338 18.5725 21.6609 18.613Z"
|
||||
fill="url(#paint1_radial_444_32057)"
|
||||
/>
|
||||
<path
|
||||
d="M9.9103 23.3832C9.07411 22.8642 8.34944 22.1841 7.77842 21.3826C7.1276 20.4909 6.67974 19.4676 6.46626 18.3845C6.25278 17.3014 6.27885 16.1848 6.54264 15.1128C6.80642 14.0409 7.30154 13.0396 7.99327 12.1793C8.68499 11.319 9.55657 10.6204 10.5469 10.1326C10.8394 9.99475 11.339 9.74537 12.0037 9.75756C12.472 9.76097 12.9332 9.87278 13.351 10.0842C13.7689 10.2957 14.1321 10.601 14.4122 10.9763C14.7908 11.4818 14.9995 12.0942 15.0084 12.7257C15.0084 12.706 17.3015 5.26318 7.50842 5.26318C3.3928 5.26318 0.00842396 9.16881 0.00842396 12.5954C-0.00780986 14.408 0.380024 16.2014 1.14374 17.8454C2.39186 20.5084 4.57448 22.6204 7.27713 23.7802C9.97979 24.9401 13.0143 25.067 15.8044 24.1369C14.8274 24.445 13.7953 24.5374 12.7792 24.4079C11.7631 24.2784 10.7872 23.9301 9.91874 23.3869L9.9103 23.3832Z"
|
||||
fill="url(#paint2_linear_444_32057)"
|
||||
/>
|
||||
<path
|
||||
opacity="0.41"
|
||||
d="M9.9103 23.3832C9.07411 22.8642 8.34944 22.1841 7.77842 21.3826C7.1276 20.4909 6.67974 19.4676 6.46626 18.3845C6.25278 17.3014 6.27885 16.1848 6.54264 15.1128C6.80642 14.0409 7.30154 13.0396 7.99327 12.1793C8.68499 11.319 9.55657 10.6204 10.5469 10.1326C10.8394 9.99475 11.339 9.74537 12.0037 9.75756C12.472 9.76097 12.9332 9.87278 13.351 10.0842C13.7689 10.2957 14.1321 10.601 14.4122 10.9763C14.7908 11.4818 14.9995 12.0942 15.0084 12.7257C15.0084 12.706 17.3015 5.26318 7.50842 5.26318C3.3928 5.26318 0.00842396 9.16881 0.00842396 12.5954C-0.00780986 14.408 0.380024 16.2014 1.14374 17.8454C2.39186 20.5084 4.57448 22.6204 7.27713 23.7802C9.97979 24.9401 13.0143 25.067 15.8044 24.1369C14.8274 24.445 13.7953 24.5374 12.7792 24.4079C11.7631 24.2784 10.7872 23.9301 9.91874 23.3869L9.9103 23.3832Z"
|
||||
fill="url(#paint3_radial_444_32057)"
|
||||
/>
|
||||
<path
|
||||
d="M14.279 14.7056C14.2031 14.8041 13.9697 14.94 13.9697 15.2362C13.9697 15.4809 14.129 15.7163 14.4122 15.9141C15.7603 16.8516 18.3019 16.7278 18.3084 16.7278C19.3074 16.7254 20.2874 16.4551 21.1462 15.945C22.0127 15.4391 22.7318 14.7154 23.2322 13.8458C23.7326 12.9762 23.997 11.9908 23.9991 10.9875C24.0234 8.88656 23.249 7.48969 22.9359 6.87094C20.9494 2.985 16.6612 0.75 11.9981 0.75C8.84453 0.749688 5.81758 1.99078 3.57194 4.20485C1.32629 6.41892 0.042455 9.42799 -0.00189209 12.5812C0.0431079 9.15562 3.44811 6.38906 7.49811 6.38906C7.82623 6.38906 9.69748 6.42094 11.4356 7.33313C12.9675 8.1375 13.77 9.10875 14.3278 10.0716C14.9072 11.0719 15.0103 12.3356 15.0103 12.8391C15.0103 13.3425 14.7534 14.0887 14.279 14.7056Z"
|
||||
fill="url(#paint4_radial_444_32057)"
|
||||
/>
|
||||
<path
|
||||
d="M14.279 14.7056C14.2031 14.8041 13.9697 14.94 13.9697 15.2362C13.9697 15.4809 14.129 15.7163 14.4122 15.9141C15.7603 16.8516 18.3019 16.7278 18.3084 16.7278C19.3074 16.7254 20.2874 16.4551 21.1462 15.945C22.0127 15.4391 22.7318 14.7154 23.2322 13.8458C23.7326 12.9762 23.997 11.9908 23.9991 10.9875C24.0234 8.88656 23.249 7.48969 22.9359 6.87094C20.9494 2.985 16.6612 0.75 11.9981 0.75C8.84453 0.749688 5.81758 1.99078 3.57194 4.20485C1.32629 6.41892 0.042455 9.42799 -0.00189209 12.5812C0.0431079 9.15562 3.44811 6.38906 7.49811 6.38906C7.82623 6.38906 9.69748 6.42094 11.4356 7.33313C12.9675 8.1375 13.77 9.10875 14.3278 10.0716C14.9072 11.0719 15.0103 12.3356 15.0103 12.8391C15.0103 13.3425 14.7534 14.0887 14.279 14.7056Z"
|
||||
fill="url(#paint5_radial_444_32057)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_444_32057"
|
||||
x1="5.50311"
|
||||
y1="17.3483"
|
||||
x2="22.2225"
|
||||
y2="17.3483"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#0C59A4" />
|
||||
<stop offset="1" stop-color="#114A8B" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="paint1_radial_444_32057"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(14.7375 17.48) scale(8.94188 8.49478)"
|
||||
>
|
||||
<stop offset="0.72" stop-opacity="0" />
|
||||
<stop offset="0.95" stop-opacity="0.53" />
|
||||
<stop offset="1" />
|
||||
</radialGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_444_32057"
|
||||
x1="14.3175"
|
||||
y1="10.096"
|
||||
x2="3.87467"
|
||||
y2="21.4707"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#1B9DE2" />
|
||||
<stop offset="0.16" stop-color="#1595DF" />
|
||||
<stop offset="0.67" stop-color="#0680D7" />
|
||||
<stop offset="1" stop-color="#0078D4" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="paint3_radial_444_32057"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(6.61635 19.4071) rotate(-81.3844) scale(13.4462 10.8632)"
|
||||
>
|
||||
<stop offset="0.76" stop-opacity="0" />
|
||||
<stop offset="0.95" stop-opacity="0.5" />
|
||||
<stop offset="1" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint4_radial_444_32057"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(2.42272 5.19158) rotate(92.2906) scale(18.993 40.4511)"
|
||||
>
|
||||
<stop stop-color="#35C1F1" />
|
||||
<stop offset="0.11" stop-color="#34C1ED" />
|
||||
<stop offset="0.23" stop-color="#2FC2DF" />
|
||||
<stop offset="0.31" stop-color="#2BC3D2" />
|
||||
<stop offset="0.67" stop-color="#36C752" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint5_radial_444_32057"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(22.5049 8.00682) rotate(73.7398) scale(9.12563 7.42096)"
|
||||
>
|
||||
<stop stop-color="#66EB6E" />
|
||||
<stop offset="1" stop-color="#66EB6E" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_444_32057">
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
transform="translate(0 0.75)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +1,232 @@
|
||||
type FirefoxIconProps = {
|
||||
fillColor: string
|
||||
fillColor?: string
|
||||
}
|
||||
|
||||
export function FirefoxIcon(props: FirefoxIconProps): JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M24.0001 11.2949C24.0001 11.2949 23.9701 11.2949 24.0001 11.2949C23.9701 10.9945 23.9701 10.6941 23.9101 10.4238C23.9101 10.3937 23.9101 10.3637 23.9101 10.3637C23.8801 10.2135 23.8801 10.0633 23.8501 9.88311C23.8501 9.82303 23.8201 9.73292 23.7901 9.67285C23.7601 9.58273 23.7601 9.49262 23.7301 9.40251C23.7001 9.22228 23.6401 9.01202 23.5801 8.83179C23.5501 8.74168 23.5501 8.68161 23.5201 8.59149C23.4601 8.35119 23.3701 8.08086 23.2801 7.84056V7.81052C23.1901 7.57022 23.1001 7.29988 22.9801 7.05958C22.9501 6.96947 22.9201 6.90939 22.8601 6.81928C22.7701 6.63905 22.7101 6.48887 22.6201 6.30864C22.5601 6.21853 22.5301 6.12842 22.4701 6.0383C22.3801 5.88812 22.2901 5.70789 22.2001 5.5577C22.1401 5.46759 22.1101 5.40752 22.0501 5.3174C21.9001 5.0771 21.7501 4.86684 21.6001 4.65658C21.1801 4.1159 20.7301 3.60526 20.2501 3.1547C20.1901 3.09462 20.1601 3.06459 20.1001 3.00451C19.8901 2.79425 19.6801 2.61402 19.4401 2.4338C19.3501 2.34369 19.2301 2.28361 19.1401 2.1935C19.0801 2.16346 19.0201 2.10339 18.9901 2.07335C18.9601 2.04331 18.9301 2.01327 18.8701 1.98324C18.6601 1.83305 18.4501 1.68286 18.2101 1.56271C18.1201 1.50263 18.0001 1.44256 17.9101 1.38248C17.7601 1.29237 17.6101 1.2323 17.4301 1.14218C16.5901 0.721658 15.6901 0.391245 14.7601 0.180982C14.2501 0.0608323 13.7401 0.000757165 13.2301 -0.0593179C13.2001 -0.0593179 13.1401 -0.0593179 13.1101 -0.0593179C12.9601 -0.0593179 12.8401 -0.0893555 12.6901 -0.0893555C12.6301 -0.0893555 12.5701 -0.0893555 12.5101 -0.0893555C12.4501 -0.0893555 12.4201 -0.0893555 12.3601 -0.0893555C12.3001 -0.0893555 12.2101 -0.0893555 12.1501 -0.0893555C12.0301 -0.0893555 11.9401 -0.0893555 11.8501 -0.0893555C11.7601 -0.0893555 11.6701 -0.0893555 11.5801 -0.0893555C11.4601 -0.0893555 11.3401 -0.0593179 11.2201 -0.0593179C11.1301 -0.0593179 11.0101 -0.0292804 10.9201 -0.0292804C10.8001 -0.0292804 10.6501 0.000757165 10.5301 0.0307947C10.4401 0.0307947 10.3801 0.0608322 10.2901 0.0608322C10.2001 0.0608322 10.1101 0.0908698 10.0201 0.120907C9.96011 0.120907 9.87011 0.150945 9.81011 0.150945C9.66011 0.271095 9.57011 0.301133 9.48011 0.301133C9.4201 0.33117 9.36011 0.33117 9.30011 0.361208C9.18011 0.391245 9.09011 0.421283 8.97011 0.45132C8.94011 0.45132 8.94011 0.45132 8.91011 0.45132C7.83011 0.781733 6.87011 1.2323 6.12011 1.80301C6.12011 1.80301 6.12011 1.80301 6.09011 1.80301C5.91011 1.9532 5.73011 2.07335 5.58011 2.22354C5.82011 2.10339 6.03011 1.98324 6.27011 1.86308C6.30011 1.86308 6.33011 1.83305 6.36011 1.83305C6.54011 1.74293 6.75011 1.65282 6.96011 1.59275C7.02011 1.56271 7.11011 1.53267 7.1701 1.50263C7.35011 1.50263 7.50011 1.44256 7.6501 1.41252C7.77011 1.38248 7.89011 1.32241 8.01011 1.29237H8.0401C11.3701 0.481358 14.8801 1.38248 17.3701 3.72541C17.8801 4.20601 18.3001 4.74669 18.6601 5.3174C20.1301 7.72041 19.9801 10.7242 18.8401 12.4964C18.0001 13.818 16.2001 15.0496 14.5201 15.0496C14.4901 15.0496 14.4601 15.0496 14.4001 15.0496C13.5601 14.9895 12.8401 14.8093 12.2101 14.4789C9.57011 13.1272 9.18011 9.76296 11.1001 8.14093C11.0401 8.11089 10.9501 8.11089 10.8601 8.11089C10.4701 8.11089 9.99011 8.20101 9.51011 8.50138C9.33011 8.62153 9.15011 8.74168 8.97011 8.92191C8.7901 9.10213 8.64011 9.28236 8.4601 9.52266C8.37011 9.67285 8.2801 9.82303 8.22011 9.97322C8.19011 10.0633 8.16011 10.1234 8.13011 10.2135C8.07011 10.3637 8.0401 10.5439 7.98011 10.7242C7.95011 10.8143 7.95011 10.9044 7.9201 10.9945C7.80011 11.8656 7.9201 12.8268 8.1901 13.5777C8.1601 13.5477 8.16011 13.5177 8.13011 13.4876C7.86011 12.9169 7.68011 12.3161 7.59011 11.6854C7.14011 8.68161 8.55011 6.00827 10.3201 4.50639C10.9201 3.99575 11.5501 3.6353 12.1501 3.42504C11.6401 2.97447 10.8601 2.73417 9.9601 2.6741C9.81011 2.6741 9.6601 2.6741 9.48011 2.6741C9.3301 2.6741 9.15011 2.6741 9.0001 2.70414C8.73011 2.64406 8.40011 2.70414 8.0701 2.76421C7.38011 2.9144 6.69011 3.1547 6.03011 3.51515C5.70011 3.69537 5.37011 3.90564 5.07011 4.1159C4.35011 4.65658 3.75011 5.28736 3.24011 6.00827C3.21011 6.0383 3.18011 6.06834 3.18011 6.09838C3.09011 6.24857 3.00011 6.36872 2.91011 6.5189C2.85011 6.60902 2.79011 6.72917 2.73011 6.84932C2.70011 6.90939 2.67011 6.93943 2.64011 6.9995C2.46011 7.32992 2.31011 7.69037 2.19011 8.05082C2.13011 8.20101 2.10011 8.35119 2.04011 8.47134C2.07011 8.20101 2.10011 7.93067 2.16011 7.66033C2.16011 7.60026 2.19011 7.57022 2.19011 7.51014C2.22011 7.42003 2.22011 7.32992 2.25011 7.2398C2.28011 7.14969 2.28011 7.02954 2.31011 6.93943C2.31011 6.90939 2.34011 6.87935 2.34011 6.84932C2.55011 6.00827 2.88011 5.19725 3.27011 4.44631C2.43011 4.86684 1.38011 6.24857 0.870106 7.51014C0.120106 9.43255 -0.149894 11.5051 0.0901057 13.5777C0.120106 13.7279 0.120106 13.8781 0.150106 14.0283C1.29011 20.5464 7.50011 24.9319 14.0401 23.8205C20.1001 22.7392 24.3001 17.3024 24.0001 11.2949Z"
|
||||
fill={props.fillColor}
|
||||
/>
|
||||
<g clip-path="url(#clip0_444_32066)">
|
||||
<path
|
||||
d="M21.5832 4.95995C20.5149 3.54311 19.1419 2.38447 17.5656 1.56968C15.9893 0.754894 14.2501 0.304792 12.4764 0.252648C9.69 0.196848 7.7652 1.03415 6.6762 1.70735C8.1333 0.862248 10.242 0.382848 12.0882 0.406548C16.8372 0.466548 21.9378 3.70085 22.6953 9.53045C23.5653 16.2222 18.9042 21.8073 12.3474 21.8244C5.1339 21.8427 0.746397 15.4557 1.8933 9.71885C1.91463 9.43755 1.95603 9.15814 2.0172 8.88275C2.15872 7.41242 2.58601 5.98389 3.2751 4.67735C2.4444 5.10725 1.3866 6.46685 0.864598 7.72625C0.10473 9.64776 -0.163178 11.7286 0.0851976 13.7799C0.103198 13.9353 0.119398 14.0904 0.139798 14.2446C0.450869 16.0358 1.16424 17.7331 2.2262 19.2087C3.28817 20.6843 4.67105 21.8997 6.27073 22.7635C7.87042 23.6273 9.64522 24.1169 11.4615 24.1956C13.2778 24.2742 15.0883 23.9397 16.7566 23.2173C18.4249 22.495 19.9077 21.4035 21.0931 20.0252C22.2786 18.6469 23.1359 17.0176 23.6006 15.2599C24.0652 13.5023 24.1251 11.6622 23.7757 9.87809C23.4262 8.09399 22.6766 6.41241 21.5832 4.95995Z"
|
||||
fill="url(#paint0_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
opacity="0.67"
|
||||
d="M21.5832 4.95995C20.5149 3.54311 19.1419 2.38447 17.5656 1.56968C15.9893 0.754894 14.2501 0.304792 12.4764 0.252648C9.69 0.196848 7.7652 1.03415 6.6762 1.70735C8.1333 0.862248 10.242 0.382848 12.0882 0.406548C16.8372 0.466548 21.9378 3.70085 22.6953 9.53045C23.5653 16.2222 18.9042 21.8073 12.3474 21.8244C5.1339 21.8427 0.746397 15.4557 1.8933 9.71885C1.91463 9.43755 1.95603 9.15814 2.0172 8.88275C2.15872 7.41242 2.58601 5.98389 3.2751 4.67735C2.4444 5.10725 1.3866 6.46685 0.864598 7.72625C0.10473 9.64776 -0.163178 11.7286 0.0851976 13.7799C0.103198 13.9353 0.119398 14.0904 0.139798 14.2446C0.450869 16.0358 1.16424 17.7331 2.2262 19.2087C3.28817 20.6843 4.67105 21.8997 6.27073 22.7635C7.87042 23.6273 9.64522 24.1169 11.4615 24.1956C13.2778 24.2742 15.0883 23.9397 16.7566 23.2173C18.4249 22.495 19.9077 21.4035 21.0931 20.0252C22.2786 18.6469 23.1359 17.0176 23.6006 15.2599C24.0652 13.5023 24.1251 11.6622 23.7757 9.87809C23.4262 8.09399 22.6766 6.41241 21.5832 4.95995Z"
|
||||
fill="url(#paint1_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.5832 4.95995C20.5149 3.54311 19.1419 2.38447 17.5656 1.56968C15.9893 0.754894 14.2501 0.304792 12.4764 0.252648C9.69 0.196848 7.7652 1.03415 6.6762 1.70735C8.1333 0.862248 10.242 0.382848 12.0882 0.406548C16.8372 0.466548 21.9378 3.70085 22.6953 9.53045C23.5653 16.2222 18.9042 21.8073 12.3474 21.8244C5.1339 21.8427 0.746397 15.4557 1.8933 9.71885C1.91463 9.43755 1.95603 9.15814 2.0172 8.88275C2.15872 7.41242 2.58601 5.98389 3.2751 4.67735C2.4444 5.10725 1.3866 6.46685 0.864598 7.72625C0.10473 9.64776 -0.163178 11.7286 0.0851976 13.7799C0.103198 13.9353 0.119398 14.0904 0.139798 14.2446C0.450869 16.0358 1.16424 17.7331 2.2262 19.2087C3.28817 20.6843 4.67105 21.8997 6.27073 22.7635C7.87042 23.6273 9.64522 24.1169 11.4615 24.1956C13.2778 24.2742 15.0883 23.9397 16.7566 23.2173C18.4249 22.495 19.9077 21.4035 21.0931 20.0252C22.2786 18.6469 23.1359 17.0176 23.6006 15.2599C24.0652 13.5023 24.1251 11.6622 23.7757 9.87809C23.4262 8.09399 22.6766 6.41241 21.5832 4.95995Z"
|
||||
fill="url(#paint2_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.5832 4.95995C20.5149 3.54311 19.1419 2.38447 17.5656 1.56968C15.9893 0.754894 14.2501 0.304792 12.4764 0.252648C9.69 0.196848 7.7652 1.03415 6.6762 1.70735C8.1333 0.862248 10.242 0.382848 12.0882 0.406548C16.8372 0.466548 21.9378 3.70085 22.6953 9.53045C23.5653 16.2222 18.9042 21.8073 12.3474 21.8244C5.1339 21.8427 0.746397 15.4557 1.8933 9.71885C1.91463 9.43755 1.95603 9.15814 2.0172 8.88275C2.15872 7.41242 2.58601 5.98389 3.2751 4.67735C2.4444 5.10725 1.3866 6.46685 0.864598 7.72625C0.10473 9.64776 -0.163178 11.7286 0.0851976 13.7799C0.103198 13.9353 0.119398 14.0904 0.139798 14.2446C0.450869 16.0358 1.16424 17.7331 2.2262 19.2087C3.28817 20.6843 4.67105 21.8997 6.27073 22.7635C7.87042 23.6273 9.64522 24.1169 11.4615 24.1956C13.2778 24.2742 15.0883 23.9397 16.7566 23.2173C18.4249 22.495 19.9077 21.4035 21.0931 20.0252C22.2786 18.6469 23.1359 17.0176 23.6006 15.2599C24.0652 13.5023 24.1251 11.6622 23.7757 9.87809C23.4262 8.09399 22.6766 6.41241 21.5832 4.95995Z"
|
||||
fill="url(#paint3_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.5832 4.95995C20.5149 3.54311 19.1419 2.38447 17.5656 1.56968C15.9893 0.754894 14.2501 0.304792 12.4764 0.252648C9.69 0.196848 7.7652 1.03415 6.6762 1.70735C8.1333 0.862248 10.242 0.382848 12.0882 0.406548C16.8372 0.466548 21.9378 3.70085 22.6953 9.53045C23.5653 16.2222 18.9042 21.8073 12.3474 21.8244C5.1339 21.8427 0.746397 15.4557 1.8933 9.71885C1.91463 9.43755 1.95603 9.15814 2.0172 8.88275C2.15872 7.41242 2.58601 5.98389 3.2751 4.67735C2.4444 5.10725 1.3866 6.46685 0.864598 7.72625C0.10473 9.64776 -0.163178 11.7286 0.0851976 13.7799C0.103198 13.9353 0.119398 14.0904 0.139798 14.2446C0.450869 16.0358 1.16424 17.7331 2.2262 19.2087C3.28817 20.6843 4.67105 21.8997 6.27073 22.7635C7.87042 23.6273 9.64522 24.1169 11.4615 24.1956C13.2778 24.2742 15.0883 23.9397 16.7566 23.2173C18.4249 22.495 19.9077 21.4035 21.0931 20.0252C22.2786 18.6469 23.1359 17.0176 23.6006 15.2599C24.0652 13.5023 24.1251 11.6622 23.7757 9.87809C23.4262 8.09399 22.6766 6.41241 21.5832 4.95995Z"
|
||||
fill="url(#paint4_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M22.9875 9.19787C22.3122 3.10547 16.8789 0.367073 12.0882 0.406673C10.2417 0.421673 8.13331 0.862373 6.67621 1.70747C6.29064 1.9361 5.93234 2.20784 5.60821 2.51747C5.64691 2.48537 5.76241 2.39027 5.95381 2.25887L5.97271 2.24597L5.98951 2.23457C6.69659 1.75651 7.47565 1.39473 8.29711 1.16297C9.58397 0.807273 10.9178 0.651157 12.252 0.700073C14.7283 0.847945 17.0606 1.91308 18.7939 3.68765C20.5273 5.46222 21.5374 7.81894 21.627 10.298C21.7371 14.2601 18.4944 17.4191 14.7564 17.6021C12.0378 17.7353 9.47641 16.4198 8.22541 13.7882C7.93275 13.1888 7.73403 12.548 7.63621 11.8883C7.04341 7.88327 9.73291 4.46777 12.1992 3.62207C10.8687 2.45987 7.53481 2.53877 5.05351 4.36427C3.26671 5.67887 2.10751 7.67897 1.72351 10.0643C1.44724 11.8945 1.69047 13.7655 2.42551 15.4643C3.18899 17.2658 4.43663 18.8205 6.03001 19.956C7.62338 21.0915 9.50019 21.7634 11.4522 21.8972C11.75 21.92 12.0484 21.9313 12.3474 21.9311C20.286 21.9311 23.73 15.905 22.9875 9.19787Z"
|
||||
fill="url(#paint5_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M22.9875 9.19787C22.3122 3.10547 16.8789 0.367073 12.0882 0.406673C10.2417 0.421673 8.13331 0.862373 6.67621 1.70747C6.29064 1.9361 5.93234 2.20784 5.60821 2.51747C5.64691 2.48537 5.76241 2.39027 5.95381 2.25887L5.97271 2.24597L5.98951 2.23457C6.69659 1.75651 7.47565 1.39473 8.29711 1.16297C9.58397 0.807273 10.9178 0.651157 12.252 0.700073C14.7283 0.847945 17.0606 1.91308 18.7939 3.68765C20.5273 5.46222 21.5374 7.81894 21.627 10.298C21.7371 14.2601 18.4944 17.4191 14.7564 17.6021C12.0378 17.7353 9.47641 16.4198 8.22541 13.7882C7.93275 13.1888 7.73403 12.548 7.63621 11.8883C7.04341 7.88327 9.73291 4.46777 12.1992 3.62207C10.8687 2.45987 7.53481 2.53877 5.05351 4.36427C3.26671 5.67887 2.10751 7.67897 1.72351 10.0643C1.44724 11.8945 1.69047 13.7655 2.42551 15.4643C3.18899 17.2658 4.43663 18.8205 6.03001 19.956C7.62338 21.0915 9.50019 21.7634 11.4522 21.8972C11.75 21.92 12.0484 21.9313 12.3474 21.9311C20.286 21.9311 23.73 15.905 22.9875 9.19787Z"
|
||||
fill="url(#paint6_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
// style="mix-blend-mode:multiply"
|
||||
opacity="0.53"
|
||||
d="M22.9875 9.19787C22.3122 3.10547 16.8789 0.367073 12.0882 0.406673C10.2417 0.421673 8.13331 0.862373 6.67621 1.70747C6.29064 1.9361 5.93234 2.20784 5.60821 2.51747C5.64691 2.48537 5.76241 2.39027 5.95381 2.25887L5.97271 2.24597L5.98951 2.23457C6.69659 1.75651 7.47565 1.39473 8.29711 1.16297C9.58397 0.807273 10.9178 0.651157 12.252 0.700073C14.7283 0.847945 17.0606 1.91308 18.7939 3.68765C20.5273 5.46222 21.5374 7.81894 21.627 10.298C21.7371 14.2601 18.4944 17.4191 14.7564 17.6021C12.0378 17.7353 9.47641 16.4198 8.22541 13.7882C7.93275 13.1888 7.73403 12.548 7.63621 11.8883C7.04341 7.88327 9.73291 4.46777 12.1992 3.62207C10.8687 2.45987 7.53481 2.53877 5.05351 4.36427C3.26671 5.67887 2.10751 7.67897 1.72351 10.0643C1.44724 11.8945 1.69047 13.7655 2.42551 15.4643C3.18899 17.2658 4.43663 18.8205 6.03001 19.956C7.62338 21.0915 9.50019 21.7634 11.4522 21.8972C11.75 21.92 12.0484 21.9313 12.3474 21.9311C20.286 21.9311 23.73 15.905 22.9875 9.19787Z"
|
||||
fill="url(#paint7_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
// style="mix-blend-mode:multiply"
|
||||
opacity="0.53"
|
||||
d="M22.9875 9.19787C22.3122 3.10547 16.8789 0.367073 12.0882 0.406673C10.2417 0.421673 8.13331 0.862373 6.67621 1.70747C6.29064 1.9361 5.93234 2.20784 5.60821 2.51747C5.64691 2.48537 5.76241 2.39027 5.95381 2.25887L5.97271 2.24597L5.98951 2.23457C6.69659 1.75651 7.47565 1.39473 8.29711 1.16297C9.58397 0.807273 10.9178 0.651157 12.252 0.700073C14.7283 0.847945 17.0606 1.91308 18.7939 3.68765C20.5273 5.46222 21.5374 7.81894 21.627 10.298C21.7371 14.2601 18.4944 17.4191 14.7564 17.6021C12.0378 17.7353 9.47641 16.4198 8.22541 13.7882C7.93275 13.1888 7.73403 12.548 7.63621 11.8883C7.04341 7.88327 9.73291 4.46777 12.1992 3.62207C10.8687 2.45987 7.53481 2.53877 5.05351 4.36427C3.26671 5.67887 2.10751 7.67897 1.72351 10.0643C1.44724 11.8945 1.69047 13.7655 2.42551 15.4643C3.18899 17.2658 4.43663 18.8205 6.03001 19.956C7.62338 21.0915 9.50019 21.7634 11.4522 21.8972C11.75 21.92 12.0484 21.9313 12.3474 21.9311C20.286 21.9311 23.73 15.905 22.9875 9.19787Z"
|
||||
fill="url(#paint8_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M14.7564 17.602C19.8864 17.29 22.0824 13.042 22.2201 10.0285C22.4349 5.32001 19.6416 0.244005 12.252 0.700005C10.9177 0.651381 9.58389 0.807802 8.29708 1.1638C7.4793 1.4054 6.7017 1.7665 5.98948 2.2354L5.97268 2.2468L5.95378 2.2597C5.83898 2.3397 5.72668 2.4239 5.61688 2.5123C7.52961 1.44275 9.73964 1.02808 11.91 1.3315C16.1526 1.8883 20.0316 5.18861 20.0316 9.54341C20.0316 12.8941 17.4423 15.4534 14.4102 15.2695C9.90568 14.9995 8.77018 10.3795 11.1135 8.38331C10.4817 8.24741 9.29428 8.51381 8.46748 9.74981C7.72558 10.8598 7.76758 12.5728 8.22538 13.7881C8.79601 15.0133 9.72718 16.0351 10.8943 16.7166C12.0615 17.3982 13.4089 17.7071 14.7564 17.602Z"
|
||||
fill="url(#paint9_radial_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.6048 5.86771C21.2963 4.95823 20.797 4.12522 20.1402 3.42451C19.3598 2.61129 18.4346 1.9507 17.412 1.47661C16.5583 1.0558 15.6582 0.736716 14.73 0.52591C13.0939 0.16778 11.4008 0.157559 9.76052 0.49591C8.05562 0.85591 6.55652 1.59361 5.60822 2.51581C6.36435 2.08863 7.1748 1.76571 8.01752 1.55581C9.65506 1.14431 11.3698 1.15119 13.004 1.57581C14.6382 2.00044 16.1393 2.82918 17.3694 3.98581C17.868 4.4586 18.3044 4.99289 18.6681 5.57581C20.1366 7.96351 19.9977 10.9653 18.8526 12.7356C18.0021 14.0508 16.1805 15.2856 14.481 15.2712C15.7601 15.3678 17.0415 15.1154 18.1884 14.5411C19.3354 13.9667 20.3051 13.0919 20.994 12.0099C22.1907 10.1427 22.2315 7.76641 21.6048 5.86771Z"
|
||||
fill="url(#paint10_linear_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.6048 5.86771C21.2963 4.95823 20.797 4.12522 20.1402 3.42451C19.3598 2.61129 18.4346 1.9507 17.412 1.47661C16.5583 1.0558 15.6582 0.736716 14.73 0.52591C13.0939 0.16778 11.4008 0.157559 9.76052 0.49591C8.05562 0.85591 6.55652 1.59361 5.60822 2.51581C6.36435 2.08863 7.1748 1.76571 8.01752 1.55581C9.65506 1.14431 11.3698 1.15119 13.004 1.57581C14.6382 2.00044 16.1393 2.82918 17.3694 3.98581C17.868 4.4586 18.3044 4.99289 18.6681 5.57581C20.1366 7.96351 19.9977 10.9653 18.8526 12.7356C18.0021 14.0508 16.1805 15.2856 14.481 15.2712C15.7601 15.3678 17.0415 15.1154 18.1884 14.5411C19.3354 13.9667 20.3051 13.0919 20.994 12.0099C22.1907 10.1427 22.2315 7.76641 21.6048 5.86771Z"
|
||||
fill="url(#paint11_linear_444_32066)"
|
||||
/>
|
||||
<path
|
||||
d="M21.5832 4.96017C21.2617 4.53934 20.9128 4.14026 20.5386 3.76557C20.2414 3.4514 19.923 3.15811 19.5855 2.88777C19.7797 3.05689 19.9649 3.23614 20.1402 3.42477C20.7969 4.12552 21.2962 4.95853 21.6048 5.86797C22.2315 7.76667 22.1907 10.143 20.994 12.0093C20.3295 13.0551 19.4016 13.9076 18.3034 14.4813C17.2052 15.0551 15.9754 15.3297 14.7375 15.2778C14.6292 15.2778 14.52 15.2778 14.4102 15.2697C9.90568 14.9997 8.77018 10.3797 11.1138 8.38347C10.4817 8.24757 9.29428 8.51397 8.46748 9.74997C7.72558 10.86 7.76758 12.573 8.22538 13.7883C7.93282 13.1889 7.7342 12.5481 7.63648 11.8884C7.04338 7.88337 9.73288 4.46787 12.1992 3.62217C10.8687 2.45997 7.53478 2.53887 5.05348 4.36437C3.59409 5.45528 2.5314 6.99342 2.02738 8.74437C2.18801 7.32352 2.61108 5.94485 3.27508 4.67847C2.44438 5.10837 1.38658 6.46797 0.864575 7.72737C0.104857 9.64861 -0.163048 11.7291 0.0851753 13.7802C0.103175 13.9356 0.119375 14.0907 0.139775 14.2449C0.450846 16.0361 1.16422 17.7333 2.22618 19.2089C3.28814 20.6845 4.67102 21.9 6.27071 22.7638C7.8704 23.6275 9.6452 24.1172 11.4615 24.1958C13.2778 24.2744 15.0883 23.9399 16.7566 23.2175C18.4249 22.4952 19.9076 21.4038 21.0931 20.0254C22.2786 18.6471 23.1359 17.0178 23.6006 15.2602C24.0652 13.5025 24.1251 11.6624 23.7756 9.87831C23.4262 8.09421 22.6766 6.41263 21.5832 4.96017Z"
|
||||
fill="url(#paint12_linear_444_32066)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(23.0396 3.84352) scale(21.6041 21.5611)"
|
||||
>
|
||||
<stop stop-color="#FFF36E" />
|
||||
<stop offset="0.5" stop-color="#FC4055" />
|
||||
<stop offset="1" stop-color="#E31587" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint1_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(2.39569 4.56222) scale(16.8032 16.7698)"
|
||||
>
|
||||
<stop stop-color="#C60084" />
|
||||
<stop offset="1" stop-color="#FC4055" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint2_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(26.4002 2.16654) scale(31.926 31.8625)"
|
||||
>
|
||||
<stop stop-color="#FFDE67" stop-opacity="0.6" />
|
||||
<stop offset="0.66" stop-color="#FC4055" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint3_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(10.5572 12.468) scale(42.0079 41.9244)"
|
||||
>
|
||||
<stop offset="0.15" stop-color="#810220" />
|
||||
<stop offset="0.27" stop-color="#FC4055" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint4_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(12.7176 13.4262) scale(38.4072 38.3309)"
|
||||
>
|
||||
<stop offset="0.12" stop-color="#810220" />
|
||||
<stop offset="0.3" stop-color="#FC4055" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint5_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(20.9387 2.77398) scale(23.8353 23.8926)"
|
||||
>
|
||||
<stop stop-color="#FF9640" />
|
||||
<stop offset="0.8" stop-color="#FC4055" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint6_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(21.1535 4.28072) scale(24.2648 24.323)"
|
||||
>
|
||||
<stop offset="0.09" stop-color="#FFDE67" />
|
||||
<stop offset="0.82" stop-color="#FF9640" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint7_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(15.141 10.9534) scale(11.5956 11.6234)"
|
||||
>
|
||||
<stop offset="0.36" stop-color="#FC4055" />
|
||||
<stop offset="0.59" stop-color="#FF9640" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint8_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(12.9936 11.5992) scale(11.5956 11.6234)"
|
||||
>
|
||||
<stop offset="0.22" stop-color="#FC4055" stop-opacity="0.8" />
|
||||
<stop offset="0.47" stop-color="#FF9640" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="paint9_radial_444_32066"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(23.7268 1.0104) scale(28.2449 28.8162)"
|
||||
>
|
||||
<stop offset="0.05" stop-color="#FFF36E" />
|
||||
<stop offset="0.55" stop-color="#FF9640" />
|
||||
<stop offset="0.7" stop-color="#FF9640" />
|
||||
</radialGradient>
|
||||
<linearGradient
|
||||
id="paint10_linear_444_32066"
|
||||
x1="13.8068"
|
||||
y1="-0.201742"
|
||||
x2="17.8801"
|
||||
y2="12.3537"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#B833E1" />
|
||||
<stop offset="0.37" stop-color="#9059FF" />
|
||||
<stop offset="1" stop-color="#0090ED" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint11_linear_444_32066"
|
||||
x1="19.5458"
|
||||
y1="7.92083"
|
||||
x2="11.6976"
|
||||
y2="-1.92598"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#592ACB" stop-opacity="0.5" />
|
||||
<stop offset="0.24" stop-color="#722291" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint12_linear_444_32066"
|
||||
x1="17.9986"
|
||||
y1="4.77355"
|
||||
x2="7.13989"
|
||||
y2="25.1164"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#FFF36E" stop-opacity="0.8" />
|
||||
<stop offset="0.09" stop-color="#FFF36E" stop-opacity="0.7" />
|
||||
<stop offset="0.75" stop-color="#FFF36E" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_444_32066">
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
transform="translate(0 0.25)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -41,7 +41,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
|
||||
<StyledText style='menuTitle'>Theme</StyledText>
|
||||
<HStack css={{ mt: '6px', mb: '6px', width: '100%', gap: '8px' }}>
|
||||
<Button style='themeSwitch' css={{ background: "#FFFFFF", width: '50%' }} onClick={() => {
|
||||
props.actionHandler('apply-light-theme')
|
||||
props.actionHandler('apply-lighter-theme')
|
||||
setCurrentTheme(currentThemeName())
|
||||
}}>
|
||||
{ isDark ? '' : '✓' }
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import { config } from '../stitches.config'
|
||||
|
||||
type AngleDownIconProps = {
|
||||
color?: string
|
||||
color?: string;
|
||||
width?: number;
|
||||
height?: number
|
||||
}
|
||||
|
||||
export function AngleDownIcon(props: AngleDownIconProps): JSX.Element {
|
||||
const strokeColor = props.color || config.theme.colors.graySolid
|
||||
export function AngleDownIcon({color, height, width}: AngleDownIconProps): JSX.Element {
|
||||
const strokeColor = color || config.theme.colors.graySolid
|
||||
return (
|
||||
<svg
|
||||
width='9'
|
||||
height='6'
|
||||
width={width ?? '9'}
|
||||
height={height ?? '6'}
|
||||
viewBox="0 0 9 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -111,6 +111,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
|
||||
borderStyles: {},
|
||||
shadows: {
|
||||
panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
|
||||
cardBoxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)'
|
||||
},
|
||||
zIndices: {},
|
||||
transitions: {},
|
||||
@ -160,6 +161,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
|
||||
// Avatar Fallback color
|
||||
avatarBg: '#FFFFFF',
|
||||
avatarFont: '#0A0806',
|
||||
tooltipIcons: '#FDFAEC'
|
||||
},
|
||||
},
|
||||
media: {
|
||||
@ -206,13 +208,17 @@ const darkThemeSpec = {
|
||||
readerFontTransparent: 'rgba(185,185,185,0.65)',
|
||||
readerHeader: '#b9b9b9',
|
||||
readerTableHeader: '#FFFFFF',
|
||||
|
||||
// Avatar Fallback color
|
||||
tooltipIcons: '#5F5E58',
|
||||
avatarBg: '#000000',
|
||||
avatarFont: 'rgba(255, 255, 255, 0.8)',
|
||||
},
|
||||
shadows: {
|
||||
cardBoxShadow: '0px 0px 9px -2px rgba(255, 255, 255, 0.16), 0px 7px 12px rgba(255, 255, 255, 0.13)',
|
||||
}
|
||||
}
|
||||
|
||||
// Avatar Fallback color
|
||||
|
||||
// Dark and Darker theme now match each other.
|
||||
// Use the darkThemeSpec object to make updates.
|
||||
export const darkTheme = createTheme(ThemeId.Dark, darkThemeSpec)
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
"@radix-ui/react-id": "^0.1.1",
|
||||
"@radix-ui/react-popover": "^0.1.1",
|
||||
"@radix-ui/react-separator": "^0.1.0",
|
||||
"@radix-ui/react-tooltip": "^0.1.7",
|
||||
"@segment/analytics-next": "^1.33.5",
|
||||
"@sentry/nextjs": "^6.16.1",
|
||||
"@stitches/react": "^1.2.5",
|
||||
|
||||
@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Analytics, AnalyticsBrowser } from '@segment/analytics-next'
|
||||
import { segmentApiKey } from '../lib/appConfig'
|
||||
import { TooltipProvider } from '../components/elements/Tooltip'
|
||||
|
||||
function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
|
||||
const router = useRouter()
|
||||
@ -48,7 +49,9 @@ function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
|
||||
defaultLocale="en"
|
||||
messages={englishTranslations}
|
||||
>
|
||||
<Component {...pageProps} />
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Component {...pageProps} />
|
||||
</TooltipProvider>
|
||||
</IntlProvider>
|
||||
</IdProvider>
|
||||
)
|
||||
|
||||
@ -2,15 +2,38 @@ import React from 'react'
|
||||
import { SettingsLayout } from '../../../components/templates/SettingsLayout'
|
||||
import MobileInstallHelp from '../../../components/elements/MobileInstallHelp'
|
||||
import ExtensionInstallHelp from '../../../components/elements/ExtensionsInstallHelp'
|
||||
import { StyledText } from '../../../components/elements/StyledText'
|
||||
import { Box, VStack } from '../../../components/elements/LayoutPrimitives'
|
||||
import { Box } from '../../../components/elements/LayoutPrimitives'
|
||||
|
||||
export default function Installation(): JSX.Element {
|
||||
return (
|
||||
<SettingsLayout title="Installation">
|
||||
<MobileInstallHelp />
|
||||
<Box css={{ m: '32px' }} />
|
||||
<ExtensionInstallHelp />
|
||||
<Box
|
||||
css={{
|
||||
maxWidth: '50rem',
|
||||
margin: 'auto',
|
||||
marginBottom: '100px',
|
||||
padding: '10px',
|
||||
borderRadius: '6px',
|
||||
'@md': {
|
||||
backgroundColor: '$grayBg',
|
||||
border: '1px solid #0000000F',
|
||||
boxShadow: '0px 3px 11px 0px #201F1D0A',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MobileInstallHelp />
|
||||
<Box
|
||||
css={{
|
||||
my: '$2',
|
||||
'@md': {
|
||||
my: '12px',
|
||||
height: '1px',
|
||||
backgroundColor: '$grayBorder',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ExtensionInstallHelp />
|
||||
</Box>
|
||||
</SettingsLayout>
|
||||
)
|
||||
}
|
||||
|
||||
BIN
packages/web/public/static/images/installation.png
Normal file
BIN
packages/web/public/static/images/installation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
packages/web/public/static/media/appStoreBadge.png
Normal file
BIN
packages/web/public/static/media/appStoreBadge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
36
yarn.lock
36
yarn.lock
@ -3620,6 +3620,27 @@
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
|
||||
"@radix-ui/react-tooltip@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
|
||||
integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-popper" "0.1.4"
|
||||
"@radix-ui/react-portal" "0.1.4"
|
||||
"@radix-ui/react-presence" "0.1.2"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
"@radix-ui/react-use-escape-keydown" "0.1.0"
|
||||
"@radix-ui/react-use-previous" "0.1.1"
|
||||
"@radix-ui/react-use-rect" "0.1.1"
|
||||
"@radix-ui/react-visually-hidden" "0.1.4"
|
||||
|
||||
"@radix-ui/react-use-body-pointer-events@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.0.tgz#29b211464493f8ca5149ce34b96b95abbc97d741"
|
||||
@ -3673,6 +3694,13 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-previous@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
|
||||
integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-rect@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
|
||||
@ -3695,6 +3723,14 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-visually-hidden@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
|
||||
integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
|
||||
"@radix-ui/rect@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
|
||||
|
||||
Reference in New Issue
Block a user