Fixed types, removed console logs, fixed form errorss

src/pages/Popup/ConfigurationSelect.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import React, { Dispatch, SetStateAction, ChangeEvent } from 'react'
 import { Label, Select } from 'theme-ui'
 import configurations from '../../utils/configurations'
 import detachDebugger from '../../utils/detachDebugger'
@@ -12,7 +12,7 @@ const ConfigurationSelect = ({
   configuration,
   setConfiguration,
 }: ConfigurationSelectProps) => {
-  const changeConfiguration = (e: any) => {
+  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
     chrome.storage.sync.set({
       configuration: e.target.value,

src/pages/Popup/LocationInput.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'
+import React, {
+  useState,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+  ChangeEvent,
+} from 'react'
 import configurations from '../../utils/configurations'
 import countryLocales from '../../utils/countryLocales'
 import detachDebugger from '../../utils/detachDebugger'
@@ -42,7 +48,7 @@ const LocationInput = ({
     }
   }, [ip, configuration, type, value])
 
-  const changeTextValue = (e: any) => {
+  const changeTextValue = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
     chrome.storage.sync.set({ [type]: e.target.value })
     setValue(e.target.value)

src/pages/Popup/LocationPage.tsx

@@ -5,7 +5,11 @@ import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
 import getIP from '../../utils/getIP'
 
-const LocationPage = ({ tab }: any) => {
+interface LocationPageProps {
+  tab: string
+}
+
+const LocationPage = ({ tab }: LocationPageProps) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
 

src/pages/Popup/Popup.tsx

@@ -46,12 +46,12 @@ const Popup = () => {
           <Text
             sx={{
               mb: '8px',
-              fontSize: '11px',
+              fontSize: '10px',
               position: 'fixed',
               bottom: '0',
             }}
           >
-            Current tab won't be fully spoofed until after reload.
+            Current tab won't be fully spoofed until after 1st or 2nd reload.
           </Text>
         </Box>
       </Flex>

src/pages/Popup/UserAgentPage.tsx

@@ -1,10 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ChangeEvent } from 'react'
 import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
 import userAgents from '../../utils/userAgents'
 import detachDebugger from '../../utils/detachDebugger'
 
-const UserAgentPage = ({ tab }: any) => {
-  const [type, setType] = useState('None')
+interface UserAgentPageProps {
+  tab: string
+}
+
+const UserAgentPage = ({ tab }: UserAgentPageProps) => {
+  const [type, setType] = useState('none')
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
   const [userAgent, setUserAgent] = useState('')
@@ -30,27 +34,25 @@ const UserAgentPage = ({ tab }: any) => {
     type === 'preloaded' && setUserAgent(userAgents[operatingSystem][browser])
   }, [operatingSystem, browser, type])
 
-  const changeType = (e: any) => {
+  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
     e.target.value === 'none' && setUserAgent('')
     chrome.storage.sync.set({ type: e.target.value })
     setType(e.target.value)
   }
 
-  const changeOperatingSystem = (e: any) => {
-    console.log(e.target.value)
+  const changeOperatingSystem = (e: ChangeEvent<HTMLSelectElement>) => {
     chrome.storage.sync.set({ operatingSystem: e.target.value })
     setOperatingSystem(e.target.value)
   }
 
-  const changeBrowser = (e: any) => {
+  const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
     chrome.storage.sync.set({ browser: e.target.value })
     setBrowser(e.target.value)
   }
 
-  const changeUserAgent = (e: any) => {
+  const changeUserAgent = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
-    console.log(e.target.value)
     chrome.storage.sync.set({ userAgent: e.target.value })
     chrome.storage.sync.set({ type: 'custom' })
     setUserAgent(e.target.value)
@@ -107,7 +109,6 @@ const UserAgentPage = ({ tab }: any) => {
             id="operatingSystem"
             value={operatingSystem}
             onChange={changeOperatingSystem}
-            defaultValue=""
             mb={'8px'}
           >
             <option sx={{ display: 'none' }}></option>
@@ -123,7 +124,6 @@ const UserAgentPage = ({ tab }: any) => {
             id="browser"
             value={browser}
             onChange={changeBrowser}
-            defaultValue=""
             mb={'8px'}
           >
             {Object.keys(userAgents[operatingSystem]).map((key) => (

src/pages/Popup/UserAgentSelect.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import React, { Dispatch, SetStateAction, ChangeEvent } from 'react'
 import { Label, Select } from 'theme-ui'
 import configurations from '../../utils/configurations'
 import detachDebugger from '../../utils/detachDebugger'
@@ -14,7 +14,7 @@ const UserAgentSelect = ({
   configuration,
   setConfiguration,
 }: ConfigurationSelectProps) => {
-  const changeConfiguration = (e: any) => {
+  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
     chrome.storage.sync.set({
       configuration: e.target.value,