Added other options page

src/Popup/Pages/OtherOptionsPage/index.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect, ChangeEvent } from 'react'
+import { Box, Label, Radio, Flex, Input, Select, Divider } from 'theme-ui'
+import userAgents from '../../../utils/userAgents'
+import detachDebugger from '../../../utils/detachDebugger'
+import SettingsCheckBox from '../SettingsPage/SettingsCheckBox'
+
+interface OtherOptionsPageProps {
+  tab: string
+}
+
+const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => {
+  return (
+    <Box
+      sx={{
+        display: tab === 'otherOptions' ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        Other Options
+      </Box>
+
+      <SettingsCheckBox title={'Network Prediction Enabled'} />
+      <SettingsCheckBox title={'Alternate Error Pages Enabled'} />
+      <SettingsCheckBox title={'Search Suggest Enabled'} />
+      <SettingsCheckBox title={'Spelling Service Enabled'} />
+      <SettingsCheckBox title={'Translation Service Enabled'} />
+      <SettingsCheckBox title={'Hyperlink Auditing Enabled'} />
+      <SettingsCheckBox title={'Referrers Enabled'} />
+      <SettingsCheckBox title={'Third Party Cookies Allowed'} />
+    </Box>
+  )
+}
+
+export default OtherOptionsPage

src/Popup/Pages/SystemPage/index.tsx

@@ -24,7 +24,6 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
       ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
       (storage) => {
         if (storage.systemType === 'custom') {
-          console.log(storage.configuration)
           storage.configuration && setConfiguration(storage.configuration)
           storage.timezone && setTimezone(storage.timezone)
           storage.locale && setLocale(storage.locale)
@@ -104,7 +103,6 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
 
   const changeInputText = () => {
     if (systemType !== 'custom' || configuration !== 'custom') {
-      console.log(2)
       setConfiguration('custom')
       setSystemType('custom')
       chrome.storage.local.set({

src/Popup/Pages/UserAgentPage/index.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
+import { Box, Label, Radio, Flex, Input, Select, Divider } from 'theme-ui'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
+import SettingsCheckBox from '../SettingsPage/SettingsCheckBox'
 
 interface UserAgentPageProps {
   tab: string
@@ -66,7 +67,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
       }}
     >
       <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        Other Options
+        User Agent
       </Box>
       <Flex
         sx={{

src/Popup/Pages/WebRtcPage/RadioButton.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect, ChangeEvent } from 'react'
+import { Box, Label, Radio, Text } from 'theme-ui'
+import handleWebRtcPolicy from './handleWebRtcPolicy'
+
+interface RadioButtonProps {
+  value: string
+  name: string
+  description: string
+  webRtcPolicy: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+}
+
+const RadioButton = ({
+  value,
+  name,
+  description,
+  webRtcPolicy,
+  onChange,
+}: RadioButtonProps) => {
+  //   const [webRtcPolicy, setWebRtcPolicy] = useState('default')
+
+  //   useEffect(() => {
+  //     chrome.storage.local.get(['webRtcPolicy'], (storage) => {
+  //       storage.webRtcPolicy && setWebRtcPolicy(storage.webRtcPolicy)
+  //     })
+  //   }, [])
+
+  //   chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function (
+  //     details
+  //   ) {
+  //     console.log(details)
+  //     setWebRtcPolicy(details.value)
+  //   })
+
+  return (
+    <>
+      <Label sx={{ cursor: 'pointer' }}>
+        <Radio
+          name="webRtcPolicy"
+          value={value}
+          onChange={onChange}
+          checked={webRtcPolicy === value}
+        />
+        <Text sx={{ fontWeight: '700' }}>{name}</Text>
+      </Label>
+      <Box sx={{ ml: '32px', mb: '12px', fontSize: '12px' }}>{description}</Box>
+    </>
+  )
+}
+
+export default RadioButton

src/Popup/Pages/WebRtcPage/index.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react'
-import { Box, Button, Label, Radio, Select, Text } from 'theme-ui'
-import getWebRTCData from './getWebRTCData'
+import { useState, useEffect, ChangeEvent } from 'react'
+import { Box, Label, Radio, Text } from 'theme-ui'
 import handleWebRtcPolicy from './handleWebRtcPolicy'
+import RadioButton from './RadioButton'
 
 interface SystemPageProps {
   tab: string
@@ -9,7 +9,6 @@ interface SystemPageProps {
 
 const WebRtcPage = ({ tab }: SystemPageProps) => {
   const [webRtcPolicy, setWebRtcPolicy] = useState('default')
-  const [webRtcIp, setWebRtcIp] = useState([])
 
   useEffect(() => {
     chrome.storage.local.get(['webRtcPolicy'], (storage) => {
@@ -17,12 +16,17 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
     })
   }, [])
 
-  chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function (
-    details
-  ) {
-    console.log(details)
-    setWebRtcPolicy(details.value)
-  })
+  // chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function (
+  //   details
+  // ) {
+  //   console.log(details)
+  //   setWebRtcPolicy(details.value)
+  // })
+
+  const changeRadioValue = (e: ChangeEvent<HTMLInputElement>) => {
+    handleWebRtcPolicy(e.target.value)
+    setWebRtcPolicy(e.target.value)
+  }
 
   return (
     <Box
@@ -33,57 +37,43 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
       <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
         WebRTC Policy
       </Box>
-      <Label>
-        <Radio
-          name="webRtcPolicy"
-          value="default"
-          onChange={(e) => handleWebRtcPolicy(e.target.value)}
-          checked={webRtcPolicy === 'default'}
+      <RadioButton
+        value={'default'}
+        name={'Default'}
+        description={
+          'Same as above, except allow WebRTC traffic through the default private'
+        }
+        webRtcPolicy={webRtcPolicy}
+        onChange={changeRadioValue}
       />
-        <Box>
-          <Text sx={{ fontWeight: '700' }}>Default</Text>
-          <Box sx={{ mb: '12px', fontSize: '12px' }}>
-            Same as above, except allow WebRTC traffic through the default
-            private
-          </Box>
-        </Box>
-      </Label>
-
-      <Label>
-        <Radio
-          name="webRtcPolicy"
-          value="default_public_and_private_interfaces"
-          onChange={(e) => handleWebRtcPolicy(e.target.value)}
-          checked={webRtcPolicy === 'default_public_and_private_interfaces'}
+      <RadioButton
+        value={'disable_non_proxied_udp'}
+        name={'Disable non-proxied UDP (force proxy)'}
+        description={
+          'Same as above, except allow WebRTC traffic through the default private'
+        }
+        webRtcPolicy={webRtcPolicy}
+        onChange={changeRadioValue}
       />
-        <Box>
-          <Text sx={{ fontWeight: '700' }}>
-            Default public and private interfaces
-          </Text>
-          <Box sx={{ mb: '12px', fontSize: '12px' }}>
-            Send WebRTC traffic via the default public network adapter to the
-            Internet. This will be.
-          </Box>
-        </Box>
-      </Label>
-
-      <Label>
-        <Radio
-          name="webRtcPolicy"
-          value="default_public_interface_only"
-          onChange={(e) => handleWebRtcPolicy(e.target.value)}
-          checked={webRtcPolicy === 'default_public_interface_only'}
+      <RadioButton
+        value={'default_public_and_private_interfaces'}
+        name={'Default public and private interfaces'}
+        description={
+          'Same as above, except allow WebRTC traffic through the default private'
+        }
+        webRtcPolicy={webRtcPolicy}
+        onChange={changeRadioValue}
       />
-        <Box>
-          <Text sx={{ fontWeight: '700' }}>Default public interface only</Text>
-          <Box sx={{ mb: '12px', fontSize: '12px' }}>
-            Same as above, except allow WebRTC traffic through the default
-            private interface to your.
-          </Box>
-        </Box>
-      </Label>
-
-      <Label>
+      <RadioButton
+        value={'default_public_interface_only'}
+        name={'Default public interface only'}
+        description={
+          'Same as above, except allow WebRTC traffic through the default private'
+        }
+        webRtcPolicy={webRtcPolicy}
+        onChange={changeRadioValue}
+      />
+      {/* <Label>
         <Radio
           name="webRtcPolicy"
           value="disable_non_proxied_udp"
@@ -97,37 +87,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
             proxies.
           </Box>
         </Box>
-      </Label>
-
-      {/* <Select
-        name="webRtcPolicy"
-        id="webRtcPolicy"
-        value={webRtcPolicy}
-        onChange={(e) => handleWebRtcPolicy(e.target.value)}
-      >
-        <option value="default">Default</option>
-        <option value="default_public_and_private_interfaces">
-          Default public and private interfaces
-        </option>
-        <option value="default_public_interface_only">
-          Default public interface only
-        </option>
-        <option value="disable_non_proxied_udp">Disable non proxied udp</option>
-      </Select> */}
-      {/* <Box sx={{ fontSize: '12px', mb: '8px' }}>
-        IP: {JSON.stringify(webRtcIp)}
-      </Box>
-      <Button
-        onClick={() => {
-          getWebRTCData(setWebRtcIp)
-          // getWebRTCData().then((ip) => {
-          //   console.log(ip)
-          //   setWebRtcIp(ip)
-          // })
-        }}
-      >
-        Reload
-      </Button> */}
+      </Label> */}
     </Box>
   )
 }

src/Popup/Popup.tsx

@@ -6,6 +6,7 @@ import {
   HardDrive,
   FileText,
   MessageSquare,
+  Globe,
   Sliders,
   Settings,
   ExternalLink,
@@ -20,6 +21,7 @@ import CurrentPage from './Pages/CurrentPage'
 import { ipData } from '../types'
 import getIp from '../utils/getIp'
 import '../assets/global.css'
+import OtherOptionsPage from './Pages/OtherOptionsPage'
 
 const Popup = () => {
   const [tab, setTab] = useState('webRtc')
@@ -36,7 +38,7 @@ const Popup = () => {
       <Flex
         sx={{
           width: '350px',
-          height: '390px',
+          height: '400px',
         }}
       >
         <Flex
@@ -68,19 +70,24 @@ const Popup = () => {
             onClick={() => setTab('webRtc')}
           />
           <TabItem
-            Icon={Sliders}
+            Icon={Globe}
             active={tab === 'useragent'}
             onClick={() => setTab('useragent')}
           />
+          <TabItem
+            Icon={Sliders}
+            active={tab === 'otherOptions'}
+            onClick={() => setTab('otherOptions')}
+          />
           <TabItem
             Icon={Settings}
             active={tab === 'settings'}
             onClick={() => setTab('settings')}
           />
-          <TabItem
+          {/* <TabItem
             Icon={ExternalLink}
             onClick={() => window.open('https://vytal.io')}
-          />
+          /> */}
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <CurrentPage tab={tab} />
@@ -88,6 +95,7 @@ const Popup = () => {
           <AutofillPage tab={tab} />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
+          <OtherOptionsPage tab={tab} />
           <SettingsPage tab={tab} />
           {/* <Text
             sx={{

src/assets/global.css

@@ -8,3 +8,7 @@ body {
   font-family: 'Nunito';
   font-weight: 500;
 }
+
+input {
+  font-family: 'Nunito';
+}

src/theme.ts

@@ -21,9 +21,8 @@ export const theme: Theme = {
       margin: '0',
     },
   },
-
   forms: {
-    label: { width: 'auto' },
+    label: { width: 'auto', alignItems: 'center' },
     input: {
       p: '2px 8px',
       mb: '8px',