support info text
This commit is contained in:
z0ccc
parent
fe2d070426
commit
d98b63ebc8
6 changed files with 81 additions and 29 deletions
|
|
@ -26,24 +26,8 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
|
|||
.
|
||||
</InfoItem>
|
||||
<InfoItem title={'Change IP Address'}>
|
||||
Vytal does not change your IP address. To change your IP you will need a
|
||||
VPN such as{' '}
|
||||
<Link
|
||||
variant="hover"
|
||||
href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
|
||||
target="_blank"
|
||||
>
|
||||
NordVPN
|
||||
</Link>{' '}
|
||||
or{' '}
|
||||
<Link
|
||||
variant="hover"
|
||||
href={`https://go.getproton.me/aff_c?offer_id=26&aff_id=3825`}
|
||||
target="_blank"
|
||||
>
|
||||
ProtonVPN
|
||||
</Link>
|
||||
.
|
||||
Vytal does not change your IP address. To change your IP address you
|
||||
will need a VPN or proxy.
|
||||
</InfoItem>
|
||||
{/* <InfoItem title={'Vytal vs Similar Extensions'}>
|
||||
Vytal utilizes the debugger API to spoof data which is completely
|
||||
|
|
@ -59,11 +43,30 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
|
|||
</InfoItem> */}
|
||||
<InfoItem title={'Test Extension'}>
|
||||
You can test and compare Vytal and other spoofing extensions on{' '}
|
||||
<Link variant="hover" href={`https://vytal.io`} target="_blank">
|
||||
<Link variant="hover" href={`https://vytal.io/#/scan`} target="_blank">
|
||||
vytal.io
|
||||
</Link>
|
||||
.
|
||||
</InfoItem>
|
||||
<InfoItem title={'Support Us'}>
|
||||
If you like this extension and wish to support us you can{' '}
|
||||
<Link
|
||||
variant="hover"
|
||||
href={`https://chrome.google.com/webstore/detail/vytal-spoof-timezone-loca/ncbknoohfjmcfneopnfkapmkblaenokb?utm_source=rate`}
|
||||
target="_blank"
|
||||
>
|
||||
rate the extension
|
||||
</Link>{' '}
|
||||
or{' '}
|
||||
<Link
|
||||
variant="hover"
|
||||
href={`https://vytal.io/#/donate`}
|
||||
target="_blank"
|
||||
>
|
||||
donate
|
||||
</Link>
|
||||
.
|
||||
</InfoItem>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import { useState } from 'react'
|
||||
import { ThemeProvider, Flex, Box } from 'theme-ui'
|
||||
import { theme } from '../theme'
|
||||
import { MapPin, Globe, Info } from 'react-feather'
|
||||
import {
|
||||
Wifi,
|
||||
MessageSquare,
|
||||
FileText,
|
||||
MapPin,
|
||||
Globe,
|
||||
Info,
|
||||
Settings,
|
||||
Sliders,
|
||||
} from 'react-feather'
|
||||
import VpnIcon from '../assets/vpnIcon.svg'
|
||||
import TabItem from './TabItem'
|
||||
import LocationPage from './Pages/LocationPage'
|
||||
import UserAgentPage from './Pages/UserAgentPage'
|
||||
|
|
@ -22,23 +32,48 @@ const Popup = () => {
|
|||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* <TabItem
|
||||
Icon={<Wifi size={20} />}
|
||||
active={tab === 'vpn'}
|
||||
onClick={() => setTab('vpn')}
|
||||
/> */}
|
||||
<TabItem
|
||||
Icon={MapPin}
|
||||
Icon={<MapPin size={20} />}
|
||||
active={tab === 'location'}
|
||||
onClick={() => setTab('location')}
|
||||
/>
|
||||
{/* <TabItem
|
||||
Icon={<FileText size={20} />}
|
||||
active={tab === 'vpn'}
|
||||
onClick={() => setTab('vpn')}
|
||||
/> */}
|
||||
{/* <TabItem
|
||||
Icon={<MessageSquare size={20} />}
|
||||
active={tab === 'vpn'}
|
||||
onClick={() => setTab('vpn')}
|
||||
/> */}
|
||||
<TabItem
|
||||
Icon={Globe}
|
||||
Icon={<Globe size={20} />}
|
||||
active={tab === 'userAgent'}
|
||||
onClick={() => setTab('userAgent')}
|
||||
/>
|
||||
{/* <TabItem
|
||||
Icon={<img src={VpnIcon} className="App-logo" alt="logo" />}
|
||||
active={tab === 'vpn'}
|
||||
onClick={() => setTab('vpn')}
|
||||
/> */}
|
||||
{/* <TabItem
|
||||
Icon={<Sliders size={20} />}
|
||||
active={tab === 'settings'}
|
||||
onClick={() => setTab('settings')}
|
||||
/> */}
|
||||
<TabItem
|
||||
Icon={Info}
|
||||
Icon={<Info size={20} />}
|
||||
active={tab === 'settings'}
|
||||
onClick={() => setTab('settings')}
|
||||
/>
|
||||
</Flex>
|
||||
<Box sx={{ m: '12px', width: '100%' }}>
|
||||
<Box sx={{ m: '16px', width: '100%' }}>
|
||||
<LocationPage tab={tab} />
|
||||
<UserAgentPage tab={tab} />
|
||||
<SettingsPage tab={tab} />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { Button } from 'theme-ui'
|
||||
interface IconProps {
|
||||
Icon: React.ElementType
|
||||
Icon: React.ReactNode
|
||||
active?: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ const TabItem = ({ Icon, onClick, active }: IconProps) => {
|
|||
<Button
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
width: '36px',
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -24,7 +24,7 @@ const TabItem = ({ Icon, onClick, active }: IconProps) => {
|
|||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon size={20} />
|
||||
{Icon}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
body {
|
||||
font-family: 'Nunito', Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
width: 350px;
|
||||
height: 440px;
|
||||
width: 358px;
|
||||
height: 448px;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
|
|||
10
src/assets/vpnIcon.svg
Normal file
10
src/assets/vpnIcon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="6.3182mm" height="6.3183mm" version="1.1" viewBox="0 0 6.3182 6.3183" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-45.871 -90.558)">
|
||||
<g fill="#fff" stroke-width=".26458" aria-label="VPN">
|
||||
<path d="m47.832 92.481q0.08819 0 0.15169 0.05997 0.06703 0.05644 0.06703 0.14464 0 0.04586-0.02117 0.09525l-0.87136 2.0391q-0.03175 0.07055-0.09172 0.10583-0.05645 0.03175-0.11642 0.03175-0.05644-0.0035-0.10936-0.03528-0.05292-0.03528-0.08114-0.09878l-0.87136-2.0461q-0.01058-0.02117-0.01411-0.04233-0.0035-0.0247-0.0035-0.04586 0-0.1023 0.07408-0.15522 0.07408-0.05644 0.14111-0.05644 0.13406 0 0.19403 0.13758l0.77258 1.8168-0.12347 0.0035 0.70908-1.8203q0.05997-0.13406 0.19403-0.13406z"/>
|
||||
<path d="m49.229 92.488q0.18344 0 0.34219 0.10583 0.16228 0.10583 0.26106 0.28575 0.09878 0.17992 0.09878 0.40217 0 0.21872-0.09878 0.39864-0.09878 0.17992-0.26106 0.28928-0.15875 0.10583-0.34219 0.10583h-0.64911l0.03528-0.0635v0.73025q0 0.09172-0.05645 0.15522-0.05644 0.05997-0.14817 0.05997-0.08819 0-0.14464-0.05997-0.05644-0.0635-0.05644-0.15522v-2.0391q0-0.09172 0.05997-0.1517 0.0635-0.0635 0.15522-0.0635zm0 1.1853q0.06703 0 0.13053-0.05644 0.0635-0.05645 0.10583-0.14464 0.04233-0.09172 0.04233-0.1905 0-0.1023-0.04233-0.1905-0.04233-0.08819-0.10583-0.14111-0.0635-0.05644-0.13053-0.05644h-0.65617l0.04233-0.0635v0.89958l-0.03881-0.05644z"/>
|
||||
<path d="m51.998 92.488q0.08467 0 0.13758 0.05644 0.05292 0.05644 0.05292 0.14111v2.0567q0 0.09172-0.0635 0.15522-0.05997 0.05997-0.1517 0.05997-0.04586 0-0.09525-0.01411-0.04586-0.01764-0.07056-0.04586l-1.3864-1.7604 0.09172-0.05644v1.6792q0 0.08467-0.05644 0.14111-0.05292 0.05644-0.14111 0.05644-0.08467 0-0.13758-0.05644-0.05292-0.05644-0.05292-0.14111v-2.0567q0-0.09172 0.05997-0.1517 0.0635-0.0635 0.15522-0.0635 0.04939 0 0.1023 0.02117 0.05292 0.01764 0.07761 0.05644l1.3441 1.7145-0.05997 0.04233v-1.6369q0-0.08467 0.05292-0.14111 0.05292-0.05644 0.14111-0.05644z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
4
src/custom.d.ts
vendored
Normal file
4
src/custom.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
declare module '*.svg' {
|
||||
const content: any
|
||||
export default content
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue