diff --git a/src/Popup/Pages/LocationPage/index.tsx b/src/Popup/Pages/LocationPage/index.tsx index 7881175..f95a904 100644 --- a/src/Popup/Pages/LocationPage/index.tsx +++ b/src/Popup/Pages/LocationPage/index.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, ChangeEvent, useCallback } from 'react' -import { Box, Flex, Label, Radio, Select } from 'theme-ui' +import { Box, Button, Flex, Label, Link, Radio, Select } from 'theme-ui' import Page from '../../Components/Page' import DebouncedInput from '../../Components/DebouncedInput' import detachDebugger from '../../../utils/detachDebugger' @@ -12,9 +12,10 @@ import { RotateCw } from 'react-feather' interface LocationPageProps { tab: string + setTab: (tab: string) => void } -const LocationPage = ({ tab }: LocationPageProps) => { +const LocationPage = ({ tab, setTab }: LocationPageProps) => { const [ipData, setIpData] = useState() const [ipInfo, setIpInfo] = useState('loading...') const [locationType, setLocationType] = useState('') @@ -273,7 +274,22 @@ const LocationPage = ({ tab }: LocationPageProps) => { onChange={changeInputText} mb="12px" /> - + + Vytal does not change your IP address. To change your IP address you + will need a{' '} + + . + ) } diff --git a/src/Popup/Pages/SettingsPage/InfoItem.tsx b/src/Popup/Pages/SettingsPage/InfoItem.tsx index 731fed7..cac16c8 100644 --- a/src/Popup/Pages/SettingsPage/InfoItem.tsx +++ b/src/Popup/Pages/SettingsPage/InfoItem.tsx @@ -5,7 +5,7 @@ interface InfoItemProps { children: React.ReactNode } -const SettingsPage = ({ title, children }: InfoItemProps) => { +const InfoItem = ({ title, children }: InfoItemProps) => { return ( {title} @@ -14,4 +14,4 @@ const SettingsPage = ({ title, children }: InfoItemProps) => { ) } -export default SettingsPage +export default InfoItem diff --git a/src/Popup/Pages/SettingsPage/index.tsx b/src/Popup/Pages/SettingsPage/index.tsx index 9423f92..5c3bdae 100644 --- a/src/Popup/Pages/SettingsPage/index.tsx +++ b/src/Popup/Pages/SettingsPage/index.tsx @@ -1,12 +1,13 @@ -import { Link, Text } from 'theme-ui' +import { Button, Link, Text } from 'theme-ui' import Page from '../../Components/Page' import InfoItem from './InfoItem' -interface SystemPageProps { +interface SettingsPageProps { tab: string + setTab: (tab: string) => void } -const SettingsPage = ({ tab }: SystemPageProps) => { +const SettingsPage = ({ tab, setTab }: SettingsPageProps) => { return ( @@ -27,7 +28,11 @@ const SettingsPage = ({ tab }: SystemPageProps) => { Vytal does not change your IP address. To change your IP address you - will need a VPN or proxy. + will need a{' '} + + . {/* Vytal utilizes the debugger API to spoof data which is completely diff --git a/src/Popup/Pages/VpnPage/VpnItem.tsx b/src/Popup/Pages/VpnPage/VpnItem.tsx new file mode 100644 index 0000000..863ba96 --- /dev/null +++ b/src/Popup/Pages/VpnPage/VpnItem.tsx @@ -0,0 +1,43 @@ +import { Box, Link } from 'theme-ui' + +interface VpnItemProps { + url: string + children: React.ReactNode +} + +const VpnItem = ({ url, children }: VpnItemProps) => { + return ( + + {children} + + Learn more + + + ) +} + +export default VpnItem diff --git a/src/Popup/Pages/VpnPage/index.tsx b/src/Popup/Pages/VpnPage/index.tsx new file mode 100644 index 0000000..85dfbb4 --- /dev/null +++ b/src/Popup/Pages/VpnPage/index.tsx @@ -0,0 +1,32 @@ +import { Box, Image } from 'theme-ui' +import Page from '../../Components/Page' +import VpnItem from './VpnItem' +import nordLogo from '../../../assets/nord.svg' +import protonLogo from '../../../assets/proton.svg' + +interface VpnPageProps { + tab: string +} + +const VpnPage = ({ tab }: VpnPageProps) => { + return ( + + + Vpn logo +
  • Verified zero-logs policy & no IP leaks
    • +
  • 5,600+ servers in 59 countries
    • +
  • 24/7 live chat support
    • +     + + Proton logo + +
  • Verified zero-logs policy & no IP leaks
    • +
  • 1,885 servers in 67 countries
    • +
  • All apps are open-source & audited
    • +     +     +     + ) +} + +export default VpnPage diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx index b9309b8..6b242f8 100644 --- a/src/Popup/Popup.tsx +++ b/src/Popup/Popup.tsx @@ -15,6 +15,7 @@ import VpnIcon from '../assets/vpnIcon.svg' import TabItem from './TabItem' import LocationPage from './Pages/LocationPage' import UserAgentPage from './Pages/UserAgentPage' +import VpnPage from './Pages/VpnPage' import SettingsPage from './Pages/SettingsPage' import '../assets/global.css' @@ -57,11 +58,11 @@ const Popup = () => { active={tab === 'userAgent'} onClick={() => setTab('userAgent')} /> - {/* } active={tab === 'vpn'} onClick={() => setTab('vpn')} - /> */} + /> {/* } active={tab === 'settings'} @@ -74,9 +75,10 @@ const Popup = () => { /> - + - + + diff --git a/src/assets/nord.svg b/src/assets/nord.svg new file mode 100644 index 0000000..1703145 --- /dev/null +++ b/src/assets/nord.svg @@ -0,0 +1,14 @@ + + + + nord-logo-horizontal + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/src/assets/proton.svg b/src/assets/proton.svg new file mode 100644 index 0000000..faa14b4 --- /dev/null +++ b/src/assets/proton.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/theme.ts b/src/theme.ts index 46456c1..e109133 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -19,12 +19,14 @@ export const theme: Theme = { fontSize: '18px', lineHeight: '22px', margin: '0', + li: { + mb: '4px', + }, }, }, forms: { label: { width: 'auto', alignItems: 'center' }, input: { - // border: '2px solid', p: '4px 8px', mb: '8px', borderColor: 'grey', @@ -34,7 +36,6 @@ export const theme: Theme = { }, }, select: { - // border: '2px solid', cursor: 'pointer', p: '4px 8px', borderColor: 'grey', @@ -67,6 +68,15 @@ export const theme: Theme = { p: 0, m: 0, }, + text: { + all: 'unset', + cursor: 'pointer', + color: 'primaryDark', + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }, }, links: { footer: { @@ -81,4 +91,11 @@ export const theme: Theme = { }, }, }, + images: { + vpnLogo: { + height: '28px', + width: 'auto', + mb: '6px', + }, + }, }