vpn page

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<ipData>()
   const [ipInfo, setIpInfo] = useState('loading...')
   const [locationType, setLocationType] = useState('')
@@ -273,7 +274,22 @@ const LocationPage = ({ tab }: LocationPageProps) => {
         onChange={changeInputText}
         mb="12px"
       />
-      <FooterLink />
+      <Box
+        sx={{
+          color: 'text',
+          mb: '8px',
+          fontSize: '11px',
+          position: 'fixed',
+          bottom: '0',
+        }}
+      >
+        Vytal does not change your IP address. To change your IP address you
+        will need a{' '}
+        <Button variant="text" onClick={() => setTab('vpn')}>
+          VPN or proxy
+        </Button>
+        .
+      </Box>
     </Page>
   )
 }

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 (
     <Box sx={{ mb: '12px' }}>
       <Flex sx={{ fontWeight: '700', mb: '2px' }}>{title}</Flex>
@@ -14,4 +14,4 @@ const SettingsPage = ({ title, children }: InfoItemProps) => {
   )
 }
 
-export default SettingsPage
+export default InfoItem

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 (
     <Page isCurrentTab={tab === 'settings'} title={'Info'}>
       <InfoItem title={'Hide Debugging Notification Bar'}>
@@ -27,7 +28,11 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
       </InfoItem>
       <InfoItem title={'Change IP Address'}>
         Vytal does not change your IP address. To change your IP address you
-        will need a VPN or proxy.
+        will need a{' '}
+        <Button variant="text" onClick={() => setTab('vpn')}>
+          VPN or proxy
+        </Button>
+        .
       </InfoItem>
       {/* <InfoItem title={'Vytal vs Similar Extensions'}>
         Vytal utilizes the debugger API to spoof data which is completely

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 (
+    <Link
+      href={url}
+      sx={{
+        border: '1px solid',
+        borderRadius: '4px',
+        borderColor: 'grey',
+        p: '16px',
+        mb: '16px',
+        display: 'block',
+        textDecoration: 'none',
+        color: 'text',
+        '&:hover': {
+          borderColor: 'primary',
+        },
+      }}
+      target="_blank"
+    >
+      {children}
+      <Box
+        sx={{
+          color: 'primaryDark',
+          textDecoration: 'none',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        }}
+      >
+        Learn more
+      </Box>
+    </Link>
+  )
+}
+
+export default VpnItem

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 (
+    <Page isCurrentTab={tab === 'vpn'} title={'VPN Recommendations'}>
+      <VpnItem url="https://go.nordvpn.net/aff_c?offer_id=658&aff_id=79520">
+        <Image src={nordLogo} alt="Vpn logo" variant="vpnLogo" />
+        <li>Verified zero-logs policy & no IP leaks</li>
+        <li>5,600+ servers in 59 countries</li>
+        <li>24/7 live chat support</li>
+      </VpnItem>
+      <VpnItem url="https://go.getproton.me/aff_c?offer_id=26&aff_id=3825">
+        <Image src={protonLogo} alt="Proton logo" variant="vpnLogo" />
+        <Box>
+          <li>Verified zero-logs policy & no IP leaks</li>
+          <li>1,885 servers in 67 countries</li>
+          <li>All apps are open-source & audited</li>
+        </Box>
+      </VpnItem>
+    </Page>
+  )
+}
+
+export default VpnPage

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')}
           />
-          {/* <TabItem
+          <TabItem
             Icon={<img src={VpnIcon} className="App-logo" alt="logo" />}
             active={tab === 'vpn'}
             onClick={() => setTab('vpn')}
-          /> */}
+          />
           {/* <TabItem
             Icon={<Sliders size={20} />}
             active={tab === 'settings'}
@@ -74,9 +75,10 @@ const Popup = () => {
           />
         </Flex>
         <Box sx={{ m: '16px', width: '100%' }}>
-          <LocationPage tab={tab} />
+          <LocationPage tab={tab} setTab={setTab} />
           <UserAgentPage tab={tab} />
-          <SettingsPage tab={tab} />
+          <VpnPage tab={tab} />
+          <SettingsPage tab={tab} setTab={setTab} />
         </Box>
       </Flex>
     </ThemeProvider>

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',
+    },
+  },
 }