Added/fixed styles

src/pages/Popup/Icon.tsx

@@ -10,9 +10,9 @@ const Icon = ({ icon }: any) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: 'white',
+        color: 'background',
         ':hover': {
-          backgroundColor: '#8750A7',
+          backgroundColor: 'primaryDark',
         },
       }}
     >

src/pages/Popup/LocationPage.tsx

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Label, Input, Select } from 'theme-ui'
+
+const LocationPage = () => {
+  return (
+    <div
+      sx={{
+        m: '12px',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>
+      <Label htmlFor="configuration">Configuration</Label>
+      <Select name="configuration" id="configuration" mb={'8px'}>
+        <option>None</option>
+        <option>Custom</option>
+        <option>Match IP</option>
+      </Select>
+      <Label htmlFor="timezone">Timezone</Label>
+      <Input name="timezone" id="username" />
+      <Label htmlFor="locale">Locale</Label>
+      <Input name="locale" id="locale" />
+      <Label htmlFor="latitude">Latitude</Label>
+      <Input name="latitude" id="latitude" />
+      <Label htmlFor="longitude">Longitude</Label>
+      <Input name="longitude" id="longitude" />
+    </div>
+  )
+}
+
+export default LocationPage

src/pages/Popup/Popup.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { ThemeProvider } from 'theme-ui'
+import { ThemeProvider, Flex } from 'theme-ui'
 import { theme } from '../../theme'
-import { Home, MapPin, Globe, Command, Users, List } from 'react-feather'
+import { Home, MapPin, Globe, Users, List } from 'react-feather'
 import Icon from './Icon'
+import LocationPage from './LocationPage'
 // import Navbar from './Navbar'
 // import IpSettings from './IpSettings'
 // import ProfileSelect from './ProfileSelect'
@@ -17,19 +18,16 @@ const Popup = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <div className="App">
-        <div
+      <Flex
         sx={{
-            display: 'flex',
+          width: '350px',
           height: '350px',
-            width: '100%',
         }}
       >
-          <div
+        <Flex
           sx={{
-              width: '36px',
-              backgroundColor: 'var(--main)',
-              display: 'flex',
+            minWidth: '36px',
+            backgroundColor: 'primary',
             alignItems: 'center',
             flexDirection: 'column',
           }}
@@ -37,13 +35,11 @@ const Popup = () => {
           <Icon icon={<Home size={20} />} />
           <Icon icon={<MapPin size={20} />} />
           <Icon icon={<Globe size={20} />} />
-            <Icon icon={<Command size={20} />} />
           <Icon icon={<List size={20} />} />
           <Icon icon={<Users size={20} />} />
-          </div>
-          <div style={{}}></div>
-        </div>
-      </div>
+        </Flex>
+        <LocationPage />
+      </Flex>
     </ThemeProvider>
   )
 }

src/pages/Popup/index.css

@@ -1,27 +0,0 @@
-:root {
-  --main: #A965D1;
-  --text: #212121;
-  --background: #fff;
-  --scrollbar: #ccc;
-  --navbar: #A965D1;
-  --icon: #aab7b8;
-  --border: #f0f3f4;
-}
-
-body {
-  color: var(--text);
-  background-color: var(--background);
-  font-size: 13px;
-  line-height: 22px;
-  width: 350px;
-  height: 350px;
-  margin: 0;
-  font-family: 'Segoe UI', Tahoma, sans-serif;
-}
-
-input[type=checkbox] {
-  vertical-align: middle;
-  position: relative;
-  bottom: 1px;
-  margin: 0 4px 0 0
-}

src/pages/Popup/index.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { render } from 'react-dom'
 
 import Popup from './Popup'
-import './index.css'
 
 render(<Popup />, window.document.querySelector('#app-container'))
 

src/theme.ts

@@ -1,14 +1,40 @@
 import type { Theme } from 'theme-ui'
 
 export const theme: Theme = {
-  fonts: {
-    body: 'system-ui, sans-serif',
-    heading: '"Avenir Next", sans-serif',
-    monospace: 'Menlo, monospace',
-  },
   colors: {
-    text: '#000',
-    background: '#fff',
-    primary: '#33e',
+    text: '#333333',
+    background: '#FDFDFD',
+    primary: '#a965d1',
+    primaryDark: '#8750A7',
+  },
+  styles: {
+    root: {
+      backgroundColor: 'body',
+      color: 'text',
+      fontSize: '16px',
+      lineHeight: '22px',
+      margin: '0',
+      fontFamily: "'Segoe UI', Tahoma, sans-serif",
+    },
+  },
+  forms: {
+    label: {},
+    input: {
+      p: '2px 8px',
+      mb: '8px',
+      borderColor: 'gray',
+      '&:focus': {
+        borderColor: 'primaryDark',
+        outline: 'none',
+      },
+    },
+    select: {
+      p: '2px 8px',
+      borderColor: 'gray',
+      '&:focus': {
+        borderColor: 'primaryDark',
+        outline: 'none',
+      },
+    },
   },
 }