From 736fcac54b7ba2400f2655b2e4b7d8f77774f0a3 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Fri, 3 Feb 2023 18:16:02 -0500 Subject: [PATCH] Added vpn page --- src/_locales/bg/messages.json | 2 +- src/_locales/kn/messages.json | 2 +- src/_locales/ml/messages.json | 2 +- src/assets/proton.svg | 69 -------------------------- src/assets/surfShark.svg | 14 ++++++ src/popup/Popup.tsx | 10 ++-- src/popup/pages/locationPage/index.tsx | 11 ++-- src/popup/pages/settingsPage/index.tsx | 11 ++-- src/popup/pages/vpnPage/VpnItem.tsx | 5 +- src/popup/pages/vpnPage/index.tsx | 14 +++--- 10 files changed, 48 insertions(+), 92 deletions(-) delete mode 100644 src/assets/proton.svg create mode 100644 src/assets/surfShark.svg diff --git a/src/_locales/bg/messages.json b/src/_locales/bg/messages.json index 991e110..14e3e8b 100644 --- a/src/_locales/bg/messages.json +++ b/src/_locales/bg/messages.json @@ -1,5 +1,5 @@ { - "extName": { "message": "Vytal - Works With Surfshark VPN & BrowsecVPN" }, + "extName": { "message": "Vytal - Works With HolaVPN & Location Guard" }, "extDesc": { "message": "Фалшива часова зона, геолокация, локал и потребителски агент. Свържете данните за местоположението си с ip адреса на вашата VPN." } diff --git a/src/_locales/kn/messages.json b/src/_locales/kn/messages.json index c2a26a3..72ac9eb 100644 --- a/src/_locales/kn/messages.json +++ b/src/_locales/kn/messages.json @@ -1,5 +1,5 @@ { - "extName": { "message": "Vytal - Works With EpressVPN & Surf Shark VPN" }, + "extName": { "message": "Vytal - Works With ExpressVPN Surf Shark VPN" }, "extDesc": { "message": "ಸ್ಪೂಫ್ ಸಮಯ ವಲಯ, ಜಿಯೋಲೊಕೇಶನ್, ಲೊಕೇಲ್ ಮತ್ತು ಬಳಕೆದಾರ ಏಜೆಂಟ್. ನಿಮ್ಮ ಸ್ಥಳ ಡೇಟಾವನ್ನು ನಿಮ್ಮ VPN ನ ip ವಿಳಾಸಕ್ಕೆ ಹೊಂದಿಸಿ." } diff --git a/src/_locales/ml/messages.json b/src/_locales/ml/messages.json index ab199a6..740e76e 100644 --- a/src/_locales/ml/messages.json +++ b/src/_locales/ml/messages.json @@ -1,5 +1,5 @@ { - "extName": { "message": "Vytal - Works With 1click VPN & HolaVPN" }, + "extName": { "message": "Vytal - Works With 1click VPN & Surfshark VPN" }, "extDesc": { "message": "സ്പൂഫ് ടൈം സോൺ, ജിയോലൊക്കേഷൻ, ലോക്കൽ, യൂസർ ഏജന്റ്. നിങ്ങളുടെ VPN-ന്റെ ip വിലാസവുമായി നിങ്ങളുടെ ലൊക്കേഷൻ ഡാറ്റ പൊരുത്തപ്പെടുത്തുക." } diff --git a/src/assets/proton.svg b/src/assets/proton.svg deleted file mode 100644 index faa14b4..0000000 --- a/src/assets/proton.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/surfShark.svg b/src/assets/surfShark.svg new file mode 100644 index 0000000..8a1bd8d --- /dev/null +++ b/src/assets/surfShark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx index 223a67b..91606ea 100644 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -58,11 +58,11 @@ const Popup = () => { active={tab === 'userAgent'} onClick={() => setTab('userAgent')} /> - {/* } active={tab === 'vpn'} onClick={() => setTab('vpn')} - /> */} + /> {/* } active={tab === 'settings'} @@ -75,10 +75,10 @@ const Popup = () => { /> - + - {/* */} - + + diff --git a/src/popup/pages/locationPage/index.tsx b/src/popup/pages/locationPage/index.tsx index aeede28..dd2de5b 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, Select } from 'theme-ui' +import { Box, Button, Flex, Label, Select } from 'theme-ui' import Page from 'popup/components/Page' import Checkbox from 'popup/components/CheckBox' import DebouncedInput from 'popup/components/DebouncedInput' @@ -13,9 +13,10 @@ import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"; interface LocationPageProps { tab: string + setTab: (tab: string) => void } -const LocationPage = ({ tab }: LocationPageProps) => { +const LocationPage = ({ tab, setTab }: LocationPageProps) => { const [browserDefault, setBrowserDefault] = useState(true) const [ipData, setIpData] = useState() const [ipInfo, setIpInfo] = useState('loading...') @@ -256,7 +257,11 @@ const LocationPage = ({ tab }: LocationPageProps) => { }} > Vytal does not change your IP address. To change your IP address you - will need a VPN or proxy. + will need a{' '} + + . ) diff --git a/src/popup/pages/settingsPage/index.tsx b/src/popup/pages/settingsPage/index.tsx index 3ee9e86..9fe991b 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 'popup/components/Page' import InfoItem from './InfoItem' interface SettingsPageProps { tab: string + setTab: (tab: string) => void } -const SettingsPage = ({ tab }: SettingsPageProps) => { +const SettingsPage = ({ tab, setTab }: SettingsPageProps) => { return ( @@ -27,7 +28,11 @@ const SettingsPage = ({ tab }: SettingsPageProps) => { 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 index 863ba96..aabd8aa 100644 --- a/src/popup/pages/vpnPage/VpnItem.tsx +++ b/src/popup/pages/vpnPage/VpnItem.tsx @@ -2,10 +2,11 @@ import { Box, Link } from 'theme-ui' interface VpnItemProps { url: string + linkText: string children: React.ReactNode } -const VpnItem = ({ url, children }: VpnItemProps) => { +const VpnItem = ({ url, linkText, children }: VpnItemProps) => { return ( { }, }} > - Learn more + {linkText} ) diff --git a/src/popup/pages/vpnPage/index.tsx b/src/popup/pages/vpnPage/index.tsx index b24e868..49ac157 100644 --- a/src/popup/pages/vpnPage/index.tsx +++ b/src/popup/pages/vpnPage/index.tsx @@ -2,7 +2,7 @@ import { Box, Image } from 'theme-ui' import Page from 'popup/components/Page' import VpnItem from './VpnItem' import nordLogo from 'assets/nord.svg' -import protonLogo from 'assets/proton.svg' +import protonLogo from 'assets/surfShark.svg' interface VpnPageProps { tab: string @@ -11,18 +11,18 @@ interface VpnPageProps { const VpnPage = ({ tab }: VpnPageProps) => { return ( - - Vpn logo + + NordVPN logo
  • Verified zero-logs policy & no IP leaks
  • 5,600+ servers in 59 countries
  • 24/7 live chat support
    •  - - Proton logo + + Surf Shark logo
  • Verified zero-logs policy & no IP leaks
    • -
  • 1,885 servers in 67 countries
    • -
  • All apps are open-source & audited
    • +
  • 3200+ servers in 100 countries
    • +
  • Unlimited device connections
    •