diff --git a/.eslintrc.js b/.eslintrc.js index e62fd38..d81584b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -45,5 +45,6 @@ module.exports = { 'nonblock-statement-body-position': 'off', 'react/button-has-type': 'off', 'no-unused-vars': 'warn', + indent: 'off', }, }; diff --git a/package-lock.json b/package-lock.json index dc203d2..6313631 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "locatejs", + "name": "vytal", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "locatejs", + "name": "vytal", "version": "0.1.0", "dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", diff --git a/package.json b/package.json index 6f0456c..1421ad9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "homepage": "https://locatejs.com", - "name": "locatejs", + "homepage": "https://vytal.io", + "name": "vytal", "version": "0.1.0", "private": true, "dependencies": { diff --git a/public/index.html b/public/index.html index 2510954..4fc6f5f 100644 --- a/public/index.html +++ b/public/index.html @@ -39,8 +39,8 @@ const initialDataObj = { content="Check if your location is actually hidden." /> - - + + - + - LocateJS - Check if your location is actually hidden + Vytal diff --git a/public/manifest.json b/public/manifest.json index b379d6b..1be8c90 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "LocateJS", - "name": "LocateJS", + "short_name": "Vytal", + "name": "Vytal", "icons": [ { "src": "favicon.ico", diff --git a/src/components/App.css b/src/components/App.css index 73ebd88..35b7566 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -21,20 +21,6 @@ body { font-size: 14px; } -.background { - position: fixed; - width: 100%; - height: 100%; - background: var(--main); - z-index: -1; -} - -.App { - min-height: 100vh; - display: flex; - flex-direction: column; -} - h1 { margin: 0 0 10px 0; font-weight: 600; @@ -90,54 +76,6 @@ ul { margin: 0px; } -.link { - color: var(--link); - text-decoration: none; -} - -.link:hover { - text-decoration: underline; -} - -.checkBox { - margin: 0 0 10px 0; - display: block; -} - -input[type="checkbox"] { - margin: 0 6px 0 0; -} - -.button { - display: block; - background-color: var(--main); - color: #fff; - border-radius: 4px; - box-sizing: border-box; - text-align: center; - width: 100%; - height: 46px; - border: none; - cursor: pointer; - font-family: inherit; - font-size: inherit; - -webkit-appearance: none; -} - -.button:hover { - opacity: 0.7; -} - -.boxWrap { - border: 1px solid var(--border); - border-radius: 4px; - padding: 10px; -} - -.hash { - text-align: center; - font-weight: 600; -} @media screen and (max-width: 575px) { body { @@ -148,12 +86,6 @@ input[type="checkbox"] { font-size: 15px; } - .contentIcon { - flex: none; - margin: 0 18px 0 0; - width: 28px !important; - } - td:first-child { width: 70px; } diff --git a/src/components/App.js b/src/components/App.js index cd3f150..b1a2c5b 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,3 +1,5 @@ +/** @jsxImportSource theme-ui */ + import { ThemeProvider } from 'theme-ui'; import theme from './theme.ts'; import './App.css'; @@ -5,8 +7,16 @@ import MainColumn from './MainColumn'; const App = () => ( -
-
+
+
diff --git a/src/components/Block.js b/src/components/Block.js index 1e35fa7..78ac1a7 100644 --- a/src/components/Block.js +++ b/src/components/Block.js @@ -1,5 +1,21 @@ +/** @jsxImportSource theme-ui */ + const ContentBlock = ({ children }) => ( -
{children}
+
+ {children} +
); export default ContentBlock; diff --git a/src/components/Blocks.css b/src/components/Blocks.css deleted file mode 100644 index d8ad609..0000000 --- a/src/components/Blocks.css +++ /dev/null @@ -1,25 +0,0 @@ -.contentBlock { - color: var(--text); - background-color: #fff; - border-radius: 4px; - box-sizing: border-box; - padding: 20px; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; - margin: 0 0 24px 0; - min-width: 500px; -} - -.loadBlock { - margin: 0 12px 12px 12px !important; - min-width: 1024px; - -} - -@media screen and (max-width: 575px) { - .contentBlock { - padding: 18px; - width: 100%; - min-width: 0; - margin: 0 0 12px 0; - } -} diff --git a/src/components/Blocks.js b/src/components/Blocks.js index e2aeaa7..c9af0a5 100644 --- a/src/components/Blocks.js +++ b/src/components/Blocks.js @@ -1,4 +1,5 @@ -import './Blocks.css'; +/** @jsxImportSource theme-ui */ + import { useState, useEffect } from 'react'; import DataContext from './Context'; import InfoBlock from './InfoBlock'; @@ -52,7 +53,7 @@ const Blocks = () => { workerData, }} > -
+
{ />
-
+
{
-
+
{ const { initialData, delayedData, frameData, workerData } = useContext(DataContext); - // const test = !workerData || !window.Worker.length; - const isWorkerValid = workerData && window.Worker.length; - // if(workerData && window.Worker.length) { - // isWorkerValid = true - // } - - // console.log(isWorkerValid); + const getWorkerValue = () => { + if (isWorkerValid) return workerData[type].value; + if (!window.Worker.length) return 'null'; + return null; + }; return ( @@ -40,7 +38,7 @@ const DataBlock = ({ title, type }) => { /> { const [geolocationData, setGeolocationData] = useState(); - const [buttonValue, setbuttonValue] = useState('Allow Geolocation API'); + const [buttonValue, setButtonValue] = useState('Allow Geolocation API'); return (

HTML Geolocation API

{geolocationData ? ( <> {typeof geolocationData === 'string' ? ( -
-
{`${geolocationData}`}
+
+
+ {`${geolocationData}`} +
) : ( <> @@ -39,9 +49,26 @@ const GeolocationBlock = () => { type="submit" onClick={() => { getGeolocation(setGeolocationData); - setbuttonValue('Loading...'); + setButtonValue('Loading...'); + }} + sx={{ + display: 'block', + backgroundColor: 'var(--main)', + color: '#fff', + borderRadius: '4px', + boxSizing: 'border-box', + textAlign: 'center', + width: '100%', + height: '46px', + border: 'none', + cursor: 'pointer', + fontFamily: 'inherit', + fontSize: 'inherit', + WebkitAppearance: 'none', + ':hover': { + opacity: '0.7', + }, }} - className="button" value={buttonValue} /> )} diff --git a/src/components/HeaderBar.css b/src/components/HeaderBar.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/HeaderBar.js b/src/components/HeaderBar.js index 7bb5566..54043ee 100644 --- a/src/components/HeaderBar.js +++ b/src/components/HeaderBar.js @@ -1,6 +1,5 @@ /** @jsxImportSource theme-ui */ -import './HeaderBar.css'; import { ReactComponent as LogoImg } from '../images/logo.svg'; import HeaderButton from './HeaderButton'; import chromeImage from '../images/chrome.png'; @@ -11,28 +10,38 @@ const HeaderBar = () => ( sx={{ display: ['block', 'block', 'flex'], alignItems: 'center', - justifyContent: 'space-between', - width: '1024px', - margin: '18px 0', + justifyContent: ['center', 'center', 'space-between'], + width: ['500px', '500px', '1024px'], + margin: ['12px', '18px', '18px'], }} > - - - + + + +
( display: 'flex', alignItems: 'center', backgroundColor: '#fff', - height: '50px', + height: ['36px', '50px', '50px'], borderRadius: '4px', - padding: '0 18px', + px: ['10px', '18px', '18px'], boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px', - fontSize: '15px', + fontSize: ['13px', '15px', '15px'], textDecoration: 'none', color: '#000', ':hover': { @@ -25,10 +25,10 @@ const HeaderButton = ({ url, image, text, alt }) => ( {alt} {text} diff --git a/src/components/InfoBlock.js b/src/components/InfoBlock.js index 4c9cb24..b753c61 100644 --- a/src/components/InfoBlock.js +++ b/src/components/InfoBlock.js @@ -5,8 +5,8 @@ const InfoBlock = () => ( Vytal is a browser extension that utilizes the chrome.debugger API to mock device data that could otherwise reveal information about you. This website scans your browser for such data. A red x signifies that the scanner has - detected tampered data that is inaccurate. A green check means that no - tampering has been detected. To read more visit the Github. + detected inaccurate tampered data. A green check means that no tampering has + been detected. ); diff --git a/src/components/MainColumn.css b/src/components/MainColumn.css deleted file mode 100644 index 073b865..0000000 --- a/src/components/MainColumn.css +++ /dev/null @@ -1,25 +0,0 @@ -.centerBlockOuter { - display: flex; - justify-content: center; - gap: 24px; -} - -.centerBlockInner { - max-width: 500px; -} - -.centerBlockMobile { - max-width: 500px; - padding: 0 12px; - display: none; -} - -@media screen and (max-width: 1100px) { - .centerBlockInner { - display: none; - } - - .centerBlockMobile { - display: block; - } -} diff --git a/src/components/MainColumn.js b/src/components/MainColumn.js index 3a35b7d..d006d4d 100644 --- a/src/components/MainColumn.js +++ b/src/components/MainColumn.js @@ -1,10 +1,11 @@ -import './MainColumn.css'; +/** @jsxImportSource theme-ui */ + import HeaderBar from './HeaderBar'; import Blocks from './Blocks'; const MainColumn = () => (
( }} > -
+
diff --git a/src/components/TableRow.css b/src/components/TableRow.css deleted file mode 100644 index fb13b37..0000000 --- a/src/components/TableRow.css +++ /dev/null @@ -1,36 +0,0 @@ -.circleButton { - display: flex; - width: 20px; -} - -.modalHeader { - display: flex; - justify-content: space-between; - margin: 0 0 6px 0; - height: 20px; -} - -.modalTitle { - font-weight: 600; -} - -.closeButton { - fill: var(--border); - display: flex; - width: 12px; - cursor: pointer; - margin: 0 0 0 12px; -} - -.closeButton:hover { - fill: var(--grey); -} - -.issue { - cursor: pointer; -} - -.issue:hover { - background-color: var(--issueBackground); - color: var(--issueText); -} \ No newline at end of file diff --git a/src/components/TableRow.js b/src/components/TableRow.js index 1ca40a7..cb8542f 100644 --- a/src/components/TableRow.js +++ b/src/components/TableRow.js @@ -1,4 +1,5 @@ -import './TableRow.css'; +/** @jsxImportSource theme-ui */ + import Modal from 'react-modal'; import { useState } from 'react'; import { ReactComponent as XCircle } from '../images/xCircle.svg'; @@ -35,16 +36,33 @@ const TableRow = ({ title, value, issues }) => { }; return ( <> - + {title} - {Array.isArray(value) ? JSON.stringify(value) : dataValue} - - {issuesExist ? ( - - ) : ( - - )} - + {value ? ( + <> + {Array.isArray(value) ? JSON.stringify(value) : dataValue} + + {issuesExist ? ( + + ) : ( + + )} + + + ) : null} { style={modalStyles} contentLabel="Issues Modal" > -
-
{title} issues
- +
+
{title} issues
+
    {issues.filter(Boolean).map((ele, index) => ( diff --git a/src/components/theme.ts b/src/components/theme.ts index 26d7ae8..5e52fc3 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -1,7 +1,7 @@ import type { Theme } from 'theme-ui'; const theme: Theme = { - breakpoints: ['575px', '1100px'], + breakpoints: ['575px', '1060px'], colors: { white90: 'rgb(255, 255, 255, 0.90)', },