Settings page setup

src/pages/Popup/Popup.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react'
 import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
 import { theme } from '../../theme'
-import { MapPin, Globe, ExternalLink } from 'react-feather'
+import { MapPin, Globe, Settings, ExternalLink } from 'react-feather'
 import TabItem from './TabItem'
 import LocationPage from './LocationPage'
 import UserAgentPage from './UserAgentPage'
+import SettingsPage from './SettingsPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('location')
+  const [tab, setTab] = useState('settings')
 
   return (
     <ThemeProvider theme={theme}>
@@ -35,6 +36,11 @@ const Popup = () => {
             active={tab === 'useragent'}
             onClick={() => setTab('useragent')}
           />
+          <TabItem
+            Icon={Settings}
+            active={tab === 'settings'}
+            onClick={() => setTab('settings')}
+          />
           <TabItem
             Icon={ExternalLink}
             onClick={() => window.open('https://vytal.io')}
@@ -43,6 +49,7 @@ const Popup = () => {
         <Box sx={{ m: '12px', width: '100%' }}>
           <LocationPage tab={tab} />
           <UserAgentPage tab={tab} />
+          <SettingsPage tab={tab} />
           <Text
             sx={{
               mb: '8px',

src/pages/Popup/SettingsCheckBox.tsx

@@ -0,0 +1,16 @@
+import { Label, Checkbox } from 'theme-ui'
+
+interface LocationPageProps {
+  title: string
+}
+
+const SettingsCheckBox = ({ title }: LocationPageProps) => {
+  return (
+    <Label sx={{ mb: '8px' }}>
+      <Checkbox defaultChecked={true} />
+      {title}
+    </Label>
+  )
+}
+
+export default SettingsCheckBox

src/pages/Popup/SettingsPage.tsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import { Box, Label, Checkbox, Select } from 'theme-ui'
+import SettingsCheckBox from './SettingsCheckBox'
+
+interface LocationPageProps {
+  tab: string
+}
+
+const SettingsPage = ({ tab }: LocationPageProps) => {
+  const [ip, setIP] = useState(null)
+
+  useEffect(() => {}, [])
+
+  return (
+    <Box
+      sx={{
+        display: tab === 'settings' ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>Settings</Box>
+      <SettingsCheckBox title={'Block WebRTC'} />
+      <SettingsCheckBox title={'Block Address Autofill Address'} />
+      <SettingsCheckBox title={'Dark Mode'} />
+      <Label htmlFor="configuration">Language</Label>
+      <Select
+        name="Language"
+        id="Language"
+        // value={configuration}
+        // onChange={changeConfiguration}
+      >
+        <option>English</option>
+        <option>French</option>
+        <option>Chinese</option>
+        <option>Russian</option>
+        <option>Farsi</option>
+
+        {/* {Object.keys(configurations).map((key) => (
+            <option value={key} key={key}>
+              {configurations[key].name}
+            </option>
+          ))} */}
+      </Select>
+    </Box>
+  )
+}
+
+export default SettingsPage

src/pages/Popup/TabItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import { Button } from 'theme-ui'
 interface IconProps {
   Icon: React.ElementType
   active?: boolean
@@ -8,7 +8,7 @@ interface IconProps {
 
 const TabItem = ({ Icon, onClick, active }: IconProps) => {
   return (
-    <div
+    <Button
       sx={{
         cursor: 'pointer',
         width: '36px',      
@@ -25,7 +25,7 @@ const TabItem = ({ Icon, onClick, active }: IconProps) => {
       onClick={onClick}
     >
       <Icon size={20} />
-    </div>
+    </Button>
   )
 }
 

src/pages/Popup/UserAgentPage.tsx

@@ -65,11 +65,10 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         display: tab === 'useragent' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>User Agent</Box>
       <Flex
         sx={{
           justifyContent: 'space-between',
-          mt: '12px',
           mb: '8px',
         }}
       >