Added 'none' type for user agent

src/pages/Popup/UserAgentPage.tsx

@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react'
 import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
 import userAgents from '../../utils/userAgents'
 import detachDebugger from '../../utils/detachDebugger'
-import UserAgentSelect from './UserAgentSelect'
 
 const LocationPage = () => {
-  const [type, setType] = useState('desktop')
+  const [type, setType] = useState('None')
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
   const [userAgent, setUserAgent] = useState('')
@@ -28,17 +27,12 @@ const LocationPage = () => {
   }, [userAgent])
 
   useEffect(() => {
-    type !== 'custom' &&
+    type === 'preloaded' && setUserAgent(userAgents[operatingSystem][browser])
-      setUserAgent(userAgents[type][operatingSystem][browser])
   }, [operatingSystem, browser, type])
 
   const changeType = (e: any) => {
-    if (e.target.value === 'mobile') {
-      setOperatingSystem('Android')
-    } else if (e.target.value === 'desktop') {
-      setOperatingSystem('Windows')
-    }
     detachDebugger()
+    e.target.value === 'none' && setUserAgent('')
     chrome.storage.sync.set({ type: e.target.value })
     setType(e.target.value)
   }
@@ -71,24 +65,30 @@ const LocationPage = () => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
-      <Flex mt={'12px'} mb={'8px'}>
+      <Flex
+        sx={{
+          justifyContent: 'space-between',
+          mt: '12px',
+          mb: '8px',
+        }}
+      >
         <Label>
           <Radio
             name="type"
-            value="desktop"
+            value="none"
             onChange={changeType}
-            checked={type === 'desktop'}
+            checked={type === 'none'}
           />{' '}
-          Desktop
+          None
         </Label>
         <Label>
           <Radio
             name="type"
-            value="mobile"
+            value="preloaded"
             onChange={changeType}
-            checked={type === 'mobile'}
+            checked={type === 'preloaded'}
           />{' '}
-          Mobile
+          Preloaded
         </Label>
         <Label>
           <Radio
@@ -100,7 +100,7 @@ const LocationPage = () => {
           Custom
         </Label>
       </Flex>
-      {(type === 'desktop' || type === 'mobile') && (
+      {type === 'preloaded' && (
         <>
           <Label htmlFor="operatingSystem">Operating System</Label>
           <Select
@@ -108,9 +108,11 @@ const LocationPage = () => {
             id="operatingSystem"
             value={operatingSystem}
             onChange={changeOperatingSystem}
+            defaultValue=""
             mb={'8px'}
           >
-            {Object.keys(userAgents[type]).map((key) => (
+            <option sx={{ display: 'none' }}></option>
+            {Object.keys(userAgents).map((key) => (
               <option value={key} key={key}>
                 {key}
               </option>
@@ -122,9 +124,10 @@ const LocationPage = () => {
             id="browser"
             value={browser}
             onChange={changeBrowser}
+            defaultValue=""
             mb={'8px'}
           >
-            {Object.keys(userAgents[type][operatingSystem]).map((key) => (
+            {Object.keys(userAgents[operatingSystem]).map((key) => (
               <option value={key} key={key}>
                 {key}
               </option>

src/theme.ts

@@ -18,7 +18,7 @@ export const theme: Theme = {
     },
   },
   forms: {
-    label: {},
+    label: { width: 'auto' },
     input: {
       p: '2px 8px',
       mb: '8px',
@@ -36,9 +36,6 @@ export const theme: Theme = {
         outline: 'none',
       },
     },
-    // radio: {
-    //   userSelect: 'none',
-    // },
   },
   buttons: {
     primary: {

src/utils/userAgents.ts

@@ -1,5 +1,4 @@
 const userAgents: any = {
-  desktop: {
   Windows: {
     Chrome:
       'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36',
@@ -29,8 +28,6 @@ const userAgents: any = {
     Brave:
       'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/80.0.3987.99 Safari/537.36',
   },
-  },
-  mobile: {
   Android: {
     Samsung:
       'Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-G991B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.0 Chrome/92.0.4515.166 Mobile Safari/537.36',
@@ -53,7 +50,6 @@ const userAgents: any = {
     Brave:
       'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/602.1.38 (KHTML, like Gecko) Brave/1.2.9 Mobile/14A5297c Safari/602.1.38',
   },
-  },
 }
 
 export default userAgents