Added power button and external link

src/pages/Popup/HomePage.tsx

@@ -1,24 +1,24 @@
 import React, { useState, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import { Box, Flex, Button } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
 import getIP from '../../utils/getIP'
+import { Power } from 'react-feather'
 
 const LocationPage = () => {
-  const [ip, setIP] = useState(null)
-  const [configuration, setConfiguration] = useState('default')
+  const [on, setOn] = useState(true)
 
-  useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
-      result.configuration && setConfiguration(result.configuration)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
-  }, [])
+  // useEffect(() => {
+  //   chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+  //     result.configuration && setConfiguration(result.configuration)
+  //     if (result.ipData) {
+  //       setIP(result.ipData)
+  //     } else {
+  //       Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+  //     }
+  //   })
+  // }, [])
 
   return (
     <Box
@@ -27,40 +27,34 @@ const LocationPage = () => {
         width: '100%',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>
-      <ConfigurationSelect
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      <LocationInput
-        type="timezone"
-        title="Timezone"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="locale"
-        title="Locale"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lat"
-        title="Latitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lon"
-        title="Longitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
+      <Flex
+        sx={{ justifyContent: 'center', alignItems: 'center', height: '100%' }}
+      >
+        <Button
+          variant="power"
+          onClick={() => {
+            setOn(!on)
+          }}
+          sx={{
+            bg: on ? 'green' : 'red',
+            '&:hover': {
+              bg: on ? 'greenDark' : 'redDark',
+            },
+            transition: 'background 0.25s',
+          }}
+        >
+          <Box
+            sx={{
+              height: '108px',
+              width: '100px',
+              transform: on ? 'rotate(0deg)' : 'rotate(-180deg)',
+              transition: 'transform 0.25s',
+            }}
+          >
+            <Power size={100} />
+          </Box>
+        </Button>
+      </Flex>
     </Box>
   )
 }

src/pages/Popup/Popup.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import { ThemeProvider, Flex } from 'theme-ui'
 import { theme } from '../../theme'
-import { Home, MapPin, Globe, Command, List } from 'react-feather'
+import { Home, MapPin, Globe, Command, List, ExternalLink } from 'react-feather'
 import TabItem from './TabItem'
 import Page from './Page'
 
 const Popup = () => {
-  const [tab, setTab] = useState(2)
+  const [tab, setTab] = useState(1)
 
   return (
     <ThemeProvider theme={theme}>
@@ -24,11 +24,15 @@ const Popup = () => {
             flexDirection: 'column',
           }}
         >
-          <TabItem Icon={Home} onClick={() => setTab(0)} />
+          {/* <TabItem Icon={Home} onClick={() => setTab(0)} /> */}
           <TabItem Icon={MapPin} onClick={() => setTab(1)} />
           <TabItem Icon={Globe} onClick={() => setTab(2)} />
-          <TabItem Icon={Command} onClick={() => setTab(3)} />
-          <TabItem Icon={List} onClick={() => setTab(4)} />
+          {/* <TabItem Icon={Command} onClick={() => setTab(3)} /> */}
+          <TabItem Icon={List} onClick={() => setTab(3)} />
+          <TabItem
+            Icon={ExternalLink}
+            onClick={() => window.open('https://vytal.io')}
+          />
         </Flex>
         <Page tab={tab} />
       </Flex>

src/theme.ts

@@ -4,8 +4,13 @@ export const theme: Theme = {
   colors: {
     text: '#333333',
     background: '#FDFDFD',
-    primary: '#a965d1',
-    primaryDark: '#8750A7',
+    primary: '#a55eea',
+    primaryDark: '#9454d2',
+    red: '#fc5c65',
+    redDark: '#e2525a',
+    green: '#26de81',
+    greenDark: '#22c774',
+    grey: '#BCC2C9',
   },
   styles: {
     root: {
@@ -48,5 +53,18 @@ 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',
+      // },
+    },
   },
 }