From 4cf0fb3de7fcb79080479b9be3492348bbf4bc84 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@protonmail.com>
Date: Mon, 11 Jul 2022 16:50:02 -0400
Subject: [PATCH] Added/fixed styles

---
 src/pages/Popup/Icon.tsx         |  4 +--
 src/pages/Popup/LocationPage.tsx | 31 +++++++++++++++++++++
 src/pages/Popup/Popup.tsx        | 48 +++++++++++++++-----------------
 src/pages/Popup/index.css        | 27 ------------------
 src/pages/Popup/index.jsx        |  1 -
 src/theme.ts                     | 44 +++++++++++++++++++++++------
 6 files changed, 90 insertions(+), 65 deletions(-)
 create mode 100644 src/pages/Popup/LocationPage.tsx
 delete mode 100644 src/pages/Popup/index.css

diff --git a/src/pages/Popup/Icon.tsx b/src/pages/Popup/Icon.tsx
index 9a56c26..ca65cd8 100644
--- a/src/pages/Popup/Icon.tsx
+++ b/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',
         },
       }}
     >
diff --git a/src/pages/Popup/LocationPage.tsx b/src/pages/Popup/LocationPage.tsx
new file mode 100644
index 0000000..02bc61b
--- /dev/null
+++ b/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
diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
index 6cfe87c..5c15df5 100644
--- a/src/pages/Popup/Popup.tsx
+++ b/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,33 +18,28 @@ const Popup = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <div className="App">
-        <div
+      <Flex
+        sx={{
+          width: '350px',
+          height: '350px',
+        }}
+      >
+        <Flex
           sx={{
-            display: 'flex',
-            height: '350px',
-            width: '100%',
+            minWidth: '36px',
+            backgroundColor: 'primary',
+            alignItems: 'center',
+            flexDirection: 'column',
           }}
         >
-          <div
-            sx={{
-              width: '36px',
-              backgroundColor: 'var(--main)',
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'column',
-            }}
-          >
-            <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>
+          <Icon icon={<Home size={20} />} />
+          <Icon icon={<MapPin size={20} />} />
+          <Icon icon={<Globe size={20} />} />
+          <Icon icon={<List size={20} />} />
+          <Icon icon={<Users size={20} />} />
+        </Flex>
+        <LocationPage />
+      </Flex>
     </ThemeProvider>
   )
 }
diff --git a/src/pages/Popup/index.css b/src/pages/Popup/index.css
deleted file mode 100644
index ab76e6f..0000000
--- a/src/pages/Popup/index.css
+++ /dev/null
@@ -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
-}
diff --git a/src/pages/Popup/index.jsx b/src/pages/Popup/index.jsx
index 7d2320a..2228d31 100644
--- a/src/pages/Popup/index.jsx
+++ b/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'))
 
diff --git a/src/theme.ts b/src/theme.ts
index 2db45a8..e266a84 100644
--- a/src/theme.ts
+++ b/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',
   },
-}
\ No newline at end of file
+  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',
+      },
+    },
+  },
+}