support info text

src/Popup/Pages/SettingsPage/index.tsx

@@ -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
+        Vytal does not change your IP address. To change your IP address you
-        VPN such as{' '}
+        will need a VPN or proxy.
-        <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>
-        .
       </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>
   )
 }

src/Popup/Popup.tsx

@@ -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} />

src/Popup/TabItem.tsx

@@ -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
 }
@@ -24,7 +24,7 @@ const TabItem = ({ Icon, onClick, active }: IconProps) => {
       }}
       onClick={onClick}
     >
-      <Icon size={20} />
+      {Icon}
     </Button>
   )
 }

src/assets/global.css

@@ -7,8 +7,8 @@
 body {
   font-family: 'Nunito', Arial, Helvetica, sans-serif;
   font-weight: 500;
-  width: 350px;
+  width: 358px;
-  height: 440px;
+  height: 448px;
 }
 
 input {

src/assets/vpnIcon.svg

@@ -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>

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}