diff --git a/src/Popup/Pages/SettingsPage/index.tsx b/src/Popup/Pages/SettingsPage/index.tsx
index d5a5d42..9423f92 100644
--- a/src/Popup/Pages/SettingsPage/index.tsx
+++ b/src/Popup/Pages/SettingsPage/index.tsx
@@ -26,24 +26,8 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
.
- Vytal does not change your IP address. To change your IP you will need a
- VPN such as{' '}
-
- NordVPN
- {' '}
- or{' '}
-
- ProtonVPN
-
- .
+ Vytal does not change your IP address. To change your IP address you
+ will need a VPN or proxy.
{/*
Vytal utilizes the debugger API to spoof data which is completely
@@ -59,11 +43,30 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
*/}
You can test and compare Vytal and other spoofing extensions on{' '}
-
+
vytal.io
.
+
+ If you like this extension and wish to support us you can{' '}
+
+ rate the extension
+ {' '}
+ or{' '}
+
+ donate
+
+ .
+
)
}
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index 751d5fe..b9309b8 100644
--- a/src/Popup/Popup.tsx
+++ b/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',
}}
>
+ {/* }
+ active={tab === 'vpn'}
+ onClick={() => setTab('vpn')}
+ /> */}
}
active={tab === 'location'}
onClick={() => setTab('location')}
/>
+ {/* }
+ active={tab === 'vpn'}
+ onClick={() => setTab('vpn')}
+ /> */}
+ {/* }
+ active={tab === 'vpn'}
+ onClick={() => setTab('vpn')}
+ /> */}
}
active={tab === 'userAgent'}
onClick={() => setTab('userAgent')}
/>
+ {/* }
+ active={tab === 'vpn'}
+ onClick={() => setTab('vpn')}
+ /> */}
+ {/* }
+ active={tab === 'settings'}
+ onClick={() => setTab('settings')}
+ /> */}
}
active={tab === 'settings'}
onClick={() => setTab('settings')}
/>
-
+
diff --git a/src/Popup/TabItem.tsx b/src/Popup/TabItem.tsx
index 2bc44ce..3a8a0ce 100644
--- a/src/Popup/TabItem.tsx
+++ b/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
}
@@ -11,7 +11,7 @@ const TabItem = ({ Icon, onClick, active }: IconProps) => {
)
}
diff --git a/src/assets/global.css b/src/assets/global.css
index 133524b..cbaef07 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -7,8 +7,8 @@
body {
font-family: 'Nunito', Arial, Helvetica, sans-serif;
font-weight: 500;
- width: 350px;
- height: 440px;
+ width: 358px;
+ height: 448px;
}
input {
diff --git a/src/assets/vpnIcon.svg b/src/assets/vpnIcon.svg
new file mode 100644
index 0000000..8c13285
--- /dev/null
+++ b/src/assets/vpnIcon.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 0000000..9b9471d
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any
+ export default content
+}