diff --git a/src/pages/Popup/HomePage.tsx b/src/pages/Popup/HomePage.tsx index 1f048a4..07fcd0c 100644 --- a/src/pages/Popup/HomePage.tsx +++ b/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 ( { width: '100%', }} > - Location - - {configuration === 'match' && } - - - - + + + ) } diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx index 2c9403e..d6e31b3 100644 --- a/src/pages/Popup/Popup.tsx +++ b/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 ( @@ -24,11 +24,15 @@ const Popup = () => { flexDirection: 'column', }} > - setTab(0)} /> + {/* setTab(0)} /> */} setTab(1)} /> setTab(2)} /> - setTab(3)} /> - setTab(4)} /> + {/* setTab(3)} /> */} + setTab(3)} /> + window.open('https://vytal.io')} + /> diff --git a/src/theme.ts b/src/theme.ts index 6190f75..236b3b1 100644 --- a/src/theme.ts +++ b/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', + // }, + }, }, }