diff --git a/src/Popup/Components/FooterLink.tsx b/src/Popup/Components/FooterLink.tsx index 77f50b5..e9c15d3 100644 --- a/src/Popup/Components/FooterLink.tsx +++ b/src/Popup/Components/FooterLink.tsx @@ -1,25 +1,29 @@ -import { Link, Text } from 'theme-ui' +import { Link } from 'theme-ui' -interface FooterLinkProps { - link: string - text: string - hoverText: string -} - -const FooterLink = ({ link, text, hoverText }: FooterLinkProps) => { +const FooterLink = () => { return ( - - {text}{' '} - + Vytal does not change your IP address. To change your IP you will need to + use a VPN such as{' '} + - {hoverText} - + NordVPN + {' '} + or{' '} + + ProtonVPN + ) } diff --git a/src/Popup/Components/Table.tsx b/src/Popup/Components/Table.tsx index 30b628a..8e2f2f8 100644 --- a/src/Popup/Components/Table.tsx +++ b/src/Popup/Components/Table.tsx @@ -9,7 +9,8 @@ const Table = ({ children }: TableProps) => { { borderBottomColor: 'grey', }} > - {title} + {title} { > Autofill Current Page - ) } diff --git a/src/Popup/Pages/ConnectionPage/index.tsx b/src/Popup/Pages/ConnectionPage/index.tsx index dbdd81d..3317ee2 100644 --- a/src/Popup/Pages/ConnectionPage/index.tsx +++ b/src/Popup/Pages/ConnectionPage/index.tsx @@ -48,11 +48,6 @@ const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => { noBorder /> - ) } diff --git a/src/Popup/Pages/SystemPage/index.tsx b/src/Popup/Pages/LocationPage/index.tsx similarity index 77% rename from src/Popup/Pages/SystemPage/index.tsx rename to src/Popup/Pages/LocationPage/index.tsx index 481f76b..b06a72d 100644 --- a/src/Popup/Pages/SystemPage/index.tsx +++ b/src/Popup/Pages/LocationPage/index.tsx @@ -6,17 +6,18 @@ import detachDebugger from '../../../utils/detachDebugger' import countryLocales from '../../../utils/countryLocales' import { ipData } from '../../../types' import configurations from '../../../utils/configurations' -import CheckBox from '../../Components/CheckBox' import FooterLink from '../../Components/FooterLink' +import Table from '../../Components/Table' +import TableRow from '../../Components/TableRow' -interface SystemPageProps { +interface LocationPageProps { tab: string ipData?: ipData geolocation?: GeolocationCoordinates } -const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => { - const [systemType, setSystemType] = useState('') +const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => { + const [locationType, setLocationType] = useState('') const [timezone, setTimezone] = useState('') const [locale, setLocale] = useState('') const [lat, setLatitude] = useState('') @@ -27,9 +28,9 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => { useEffect(() => { chrome.storage.local.get( - ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'], + ['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'], (storage) => { - if (!storage.systemType || storage.systemType === 'default') { + if (!storage.locationType || storage.locationType === 'default') { setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone) setLocale(Intl.DateTimeFormat().resolvedOptions().locale) if (geolocation) { @@ -37,7 +38,7 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => { setLongitude(`${geolocation.longitude}`) } } - if (storage.systemType === 'matchIp' && ipData) { + if (storage.locationType === 'matchIp' && ipData) { setTimezone(ipData.timezone) setLocale(countryLocales[ipData.countryCode].locale) setLatitude(`${ipData.lat}`) @@ -48,24 +49,24 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => { lat: ipData.lat, lon: ipData.lon, }) - } else if (storage.systemType === 'custom') { + } else if (storage.locationType === 'custom') { storage.configuration && setConfiguration(storage.configuration) storage.timezone && setTimezone(storage.timezone) storage.locale && setLocale(storage.locale) storage.lat && setLatitude(storage.lat) storage.lon && setLongitude(storage.lon) } - storage.systemType - ? setSystemType(storage.systemType) - : setSystemType('default') + storage.locationType + ? setLocationType(storage.locationType) + : setLocationType('default') } ) }, [geolocation, ipData]) const changeType = (e: ChangeEvent) => { detachDebugger() - setSystemType(e.target.value) - chrome.storage.local.set({ systemType: e.target.value }) + setLocationType(e.target.value) + chrome.storage.local.set({ locationType: e.target.value }) if (e.target.value === 'default') { setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone) @@ -129,18 +130,26 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => { } const changeInputText = () => { - if (systemType !== 'custom' || configuration !== 'custom') { + if (locationType !== 'custom' || configuration !== 'custom') { setConfiguration('custom') - setSystemType('custom') + setLocationType('custom') chrome.storage.local.set({ configuration: 'custom', - systemType: 'custom', + locationType: 'custom', }) } } + const getFlagEmoji = (countryCode: string) => { + const codePoints = countryCode + .toUpperCase() + .split('') + .map((char) => 127397 + char.charCodeAt(0)) + return String.fromCodePoint(...codePoints) + } + return ( - + { > - {systemType === 'custom' && ( + {locationType === 'matchIp' && ( + + +
+ )} + {locationType === 'custom' && ( <>