Added new font

src/Popup/Pages/AutofillPage/index.tsx

@@ -26,7 +26,9 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
         display: tab === 'autofill' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Autofill Options</Box>
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        Autofill Options
+      </Box>
     </Box>
   )
 }

src/Popup/Pages/CurrentPage/index.tsx

@@ -11,7 +11,9 @@ const CurrentPage = ({ tab }: CurrentPageProps) => {
         display: tab === 'current' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>Current Info</Box>
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        Current Info
+      </Box>
     </Box>
   )
 }

src/Popup/Pages/SettingsPage/index.tsx

@@ -32,7 +32,9 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
         display: tab === 'settings' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>Settings</Box>
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        Settings
+      </Box>
       {/* <SettingsCheckBox
         title={'Disable WebRTC'}
         onChange={setWebRtcPolicy}

src/Popup/Pages/SystemPage/SystemInput.tsx

@@ -3,7 +3,7 @@ import { Label, Input } from 'theme-ui'
 import detachDebugger from '../../../utils/detachDebugger'
 import debounce from 'lodash.debounce'
 
-interface LocationInputProps {
+interface SystemInputProps {
   name: string
   title: string
   value: string
@@ -11,13 +11,13 @@ interface LocationInputProps {
   onChange: () => void
 }
 
-const LocationInput = ({
+const SystemInput = ({
   name,
   title,
   value,
   setValue,
   onChange,
-}: LocationInputProps) => {
+}: SystemInputProps) => {
   const debouncedChangeHandler = useMemo(
     () =>
       debounce((e) => {
@@ -41,4 +41,4 @@ const LocationInput = ({
   )
 }
 
-export default LocationInput
+export default SystemInput

src/Popup/Pages/SystemPage/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
 import { Box, Flex, Label, Radio, Select } from 'theme-ui'
-import LocationInput from './LocationInput'
+import SystemInput from './SystemInput'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
@@ -120,7 +120,9 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
         display: tab === 'system' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>System Data</Box>
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        System Data
+      </Box>
       <Flex
         sx={{
           justifyContent: 'space-between',
@@ -173,28 +175,28 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
           </Select>
         </>
       )}
-      <LocationInput
+      <SystemInput
         name="timezone"
         title="Timezone"
         value={timezone}
         setValue={setTimezone}
         onChange={changeInputText}
       />
-      <LocationInput
+      <SystemInput
         name="locale"
         title="Locale"
         value={locale}
         setValue={setLocale}
         onChange={changeInputText}
       />
-      <LocationInput
+      <SystemInput
         name="lat"
         title="Latitude"
         value={lat}
         setValue={setLatitude}
         onChange={changeInputText}
       />
-      <LocationInput
+      <SystemInput
         name="lon"
         title="Longitude"
         value={lon}

src/Popup/Pages/UserAgentPage/index.tsx

@@ -65,7 +65,9 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         display: tab === 'useragent' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>Other Options</Box>
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        Other Options
+      </Box>
       <Flex
         sx={{
           justifyContent: 'space-between',

src/Popup/Pages/WebRtcPage/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Box, Button, Select } from 'theme-ui'
+import { Box, Button, Label, Radio, Select, Text } from 'theme-ui'
 import getWebRTCData from './getWebRTCData'
 import handleWebRtcPolicy from './handleWebRtcPolicy'
 
@@ -30,8 +30,76 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
         display: tab === 'webRtc' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>WebRTC Policy</Box>
-      <Select
+      <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'}
+        />
+        <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'}
+        />
+        <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'}
+        />
+        <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>
+        <Radio
+          name="webRtcPolicy"
+          value="disable_non_proxied_udp"
+          onChange={(e) => handleWebRtcPolicy(e.target.value)}
+          checked={webRtcPolicy === 'disable_non_proxied_udp'}
+        />
+        <Box>
+          <Text sx={{ fontWeight: '700' }}>Disable non proxied udp</Text>
+          <Box sx={{ mb: '12px', fontSize: '12px' }}>
+            Force the use of a proxy, and only allow WebRTC traffic over UDP
+            proxies.
+          </Box>
+        </Box>
+      </Label>
+
+      {/* <Select
         name="webRtcPolicy"
         id="webRtcPolicy"
         value={webRtcPolicy}
@@ -45,8 +113,8 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
           Default public interface only
         </option>
         <option value="disable_non_proxied_udp">Disable non proxied udp</option>
-      </Select>
-      <Box sx={{ fontSize: '12px', mb: '8px' }}>
+      </Select> */}
+      {/* <Box sx={{ fontSize: '12px', mb: '8px' }}>
         IP: {JSON.stringify(webRtcIp)}
       </Box>
       <Button
@@ -59,7 +127,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
         }}
       >
         Reload
-      </Button>
+      </Button> */}
     </Box>
   )
 }

src/Popup/Popup.tsx

@@ -19,9 +19,10 @@ import WebRtcPage from './Pages/WebRtcPage'
 import CurrentPage from './Pages/CurrentPage'
 import { ipData } from '../types'
 import getIp from '../utils/getIp'
+import '../assets/global.css'
 
 const Popup = () => {
-  const [tab, setTab] = useState('current')
+  const [tab, setTab] = useState('webRtc')
   const [ipData, setIpData] = useState<ipData | undefined>(undefined)
 
   useEffect(() => {

src/assets/global.css

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'Nunito';
+  src: url(./Nunito-VariableFont_wght.ttf);
+  font-weight: 400 800;
+}
+
+body {
+  font-family: 'Nunito';
+  font-weight: 500;
+}

src/theme.ts

@@ -14,12 +14,11 @@ export const theme: Theme = {
   },
   styles: {
     root: {
-      backgroundColor: 'body',
+      backgroundColor: 'background',
       color: 'text',
       fontSize: '18px',
       lineHeight: '22px',
       margin: '0',
-      fontFamily: "'Segoe UI', Tahoma, sans-serif",
     },
   },
 

webpack.config.js

@@ -131,7 +131,7 @@ var options = {
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: 'src/assets/img/icon128.png',
+          from: 'src/assets/icon128.png',
           to: path.join(__dirname, 'build'),
           force: true,
         },
@@ -140,7 +140,16 @@ var options = {
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: 'src/assets/img/icon32.png',
+          from: 'src/assets/icon32.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/Nunito-VariableFont_wght.ttf',
           to: path.join(__dirname, 'build'),
           force: true,
         },