Removed unused code

src/pages/Popup/IPData.tsx

@@ -18,7 +18,7 @@ interface IPDataProps {
 
 const IPData = ({ ip, setIP }: IPDataProps) => {
   return (
-    <Flex style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+    <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
       <Button
         onClick={() => {

src/pages/Popup/LocationPage.tsx

@@ -23,8 +23,6 @@ const LocationPage = ({ tab }: any) => {
   return (
     <Box
       sx={{
-        m: '12px',
-        width: '100%',
         display: tab === 'location' ? 'block' : 'none',
       }}
     >

src/pages/Popup/Main.jsx

@@ -1,83 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Navbar from './Navbar'
-import IPData from './IPData'
-import ProfileSelect from './ConfigurationSelect'
-import DebugSettings from './LocationInput'
-import UserAgentSettings from './UserAgentSettings'
-
-const getIP = () =>
-  fetch('http://ip-api.com/json/')
-    .then((response) => response.json())
-    .then((ipData) => {
-      chrome.storage.sync.set({ ipData })
-      return ipData
-    })
-
-const Popup = () => {
-  const [ip, setIP] = useState(null)
-  const [profile, setProfile] = useState('default')
-
-  useEffect(() => {
-    chrome.storage.sync.get(['profile', 'ipData'], (result) => {
-      result.profile && setProfile(result.profile)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
-  }, [])
-
-  return (
-    <div className="App">
-      <Navbar />
-      <div
-        style={{
-          padding: '12px',
-        }}
-      >
-        <IPData ip={ip} getIP={getIP} setIP={setIP} />
-        <ProfileSelect profile={profile} setProfile={setProfile} />
-        <DebugSettings
-          type="timezone"
-          title="Timezone"
-          ip={ip}
-          profile={profile}
-          setProfile={setProfile}
-        />
-        <DebugSettings
-          type="locale"
-          title="Locale"
-          ip={ip}
-          profile={profile}
-          setProfile={setProfile}
-        />
-        <DebugSettings
-          type="lat"
-          title="Latitude"
-          ip={ip}
-          profile={profile}
-          setProfile={setProfile}
-        />
-        <DebugSettings
-          type="lon"
-          title="Longitude"
-          ip={ip}
-          profile={profile}
-          setProfile={setProfile}
-        />
-        <UserAgentSettings ip={ip} type="lat" title="Latitude" />
-        <div
-          style={{
-            margin: '8px 0 0 0',
-            fontSize: '10px',
-          }}
-        >
-          Current tab won't be fully spoofed until after first or second reload.
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Popup

src/pages/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ThemeProvider, Flex, Box } from 'theme-ui'
+import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
 import { theme } from '../../theme'
 import { MapPin, Globe, ExternalLink } from 'react-feather'
 import TabItem from './TabItem'
@@ -40,17 +40,19 @@ const Popup = () => {
             onClick={() => window.open('https://vytal.io')}
           />
         </Flex>
-        <Box>
+        <Box sx={{ m: '12px', width: '100%' }}>
           <LocationPage tab={tab} />
           <UserAgentPage tab={tab} />
-          <div
+          <Text
-            style={{
+            sx={{
-              margin: '8px 0 0 0',
+              mb: '8px',
               fontSize: '11px',
+              position: 'fixed',
+              bottom: '0',
             }}
           >
-            Current tab won't be fully spoofed until after reload
+            Current tab won't be fully spoofed until after reload.
-          </div>
+          </Text>
         </Box>
       </Flex>
     </ThemeProvider>

src/pages/Popup/UserAgentPage.tsx

@@ -60,8 +60,6 @@ const UserAgentPage = ({ tab }: any) => {
   return (
     <Box
       sx={{
-        m: '12px',
-        width: '100%',
         display: tab === 'useragent' ? 'block' : 'none',
       }}
     >

src/pages/Popup/UserAgentSettings.js

@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import userAgents from '../../utils/userAgents'
-import detachDebugger from '../../utils/detachDebugger'
-
-const UserAgentSettings = () => {
-  const [userAgent, setUserAgent] = useState('')
-  const [randomUA, setRandomUA] = useState(false)
-  const [interval, setInterval] = useState(60)
-
-  useEffect(() => {
-    chrome.storage.sync.get(['userAgent', 'randomUA', 'interval'], (result) => {
-      result.interval && setInterval(result.interval)
-
-      result.randomUA && setRandomUA(true)
-
-      if (result.userAgent) {
-        setUserAgent(result.userAgent)
-      }
-    })
-  }, [])
-
-  const changeUserAgent = (e) => {
-    detachDebugger()
-    chrome.storage.sync.set({ userAgent: e.target.value })
-    setUserAgent(e.target.value)
-  }
-
-  const randomize = (e) => {
-    detachDebugger()
-    const randomUserAgent =
-      userAgents[Math.floor(Math.random() * userAgents.length)]
-    chrome.storage.sync.set({
-      userAgent: e.target.checked ? randomUserAgent : null,
-      randomUA: e.target.checked,
-    })
-    e.target.checked ? setUserAgent(randomUserAgent) : setUserAgent('')
-    setRandomUA(e.target.checked)
-    if (parseInt(interval)) {
-      chrome.alarms.create('userAgentAlarm', {
-        delayInMinutes: parseInt(interval),
-        periodInMinutes: parseInt(interval),
-      })
-    }
-  }
-
-  const changeInterval = (e) => {
-    chrome.storage.sync.set({ interval: e.target.value })
-    setInterval(e.target.value)
-    if (parseInt(e.target.value)) {
-      chrome.alarms.create('userAgentAlarm', {
-        delayInMinutes: parseInt(e.target.value),
-        periodInMinutes: parseInt(e.target.value),
-      })
-    }
-  }
-
-  return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          margin: '12px 0 0 0',
-        }}
-      >
-        <input
-          type="text"
-          value={userAgent}
-          onChange={changeUserAgent}
-          style={{
-            width: '206px',
-          }}
-        />
-        <label>User Agent</label>
-      </div>
-      <div
-        style={{
-          margin: '6px 0 0 0',
-        }}
-      >
-        <label
-          style={{
-            margin: '0 6px 0 0',
-          }}
-        >
-          <input type="checkbox" checked={randomUA} onChange={randomize} />
-          Randomize every
-        </label>
-        <label>
-          <input
-            type="number"
-            value={interval}
-            onChange={changeInterval}
-            style={{
-              width: '30px',
-              margin: '0 4px 0 0',
-            }}
-          />
-          minutes
-        </label>
-      </div>
-    </>
-  )
-}
-
-export default UserAgentSettings

src/theme.ts

@@ -53,19 +53,6 @@ export const theme: Theme = {
         bg: 'primaryDark',
       },
     },
-    power: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      py: '12px',
-      px: '16px',
-      color: 'background',
-      borderRadius: '50%',
-      cursor: 'pointer',
-      // '&:hover': {
-      //   bg: 'primaryDark',
-      // },
-    },
     close: {
       cursor: 'pointer',
       color: 'text',