me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switched to component css

Browse source
This commit is contained in:
z0ccc 2022-05-25 00:02:59 -04:00
parent 708a9d7f33
commit 44baad7bb8
21 changed files with 177 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.js
View file

@ -45,5 +45,6 @@ module.exports = {
'nonblock-statement-body-position': 'off', 'nonblock-statement-body-position': 'off',
'react/button-has-type': 'off', 'react/button-has-type': 'off',
'no-unused-vars': 'warn', 'no-unused-vars': 'warn',
indent: 'off',
}, },
}; };

4
package-lock.json generated
View file

@ -1,11 +1,11 @@
{ {
"name": "locatejs", "name": "vytal",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "locatejs", "name": "vytal",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3",

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"homepage": "https://locatejs.com", "homepage": "https://vytal.io",
"name": "locatejs", "name": "vytal",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {

8
public/index.html
View file

@ -39,8 +39,8 @@ const initialDataObj = {
content="Check if your location is actually hidden." content="Check if your location is actually hidden."
/> />
<meta name="author" content="z0ccc" /> <meta name="author" content="z0ccc" />
<meta property="og:title" content="LocateJS" /> <meta property="og:title" content="Vytal" />
<meta property="og:url" content="https://locatejs.com" /> <meta property="og:url" content="https://vytal.io" />
<meta <meta
property="og:image:secure" property="og:image:secure"
content="https://locatejs.com/preview.png" content="https://locatejs.com/preview.png"
@ -57,7 +57,7 @@ const initialDataObj = {
name="twitter:card" name="twitter:card"
content="https://locatejs.com/preview.png" content="https://locatejs.com/preview.png"
/> />
<meta name="twitter:title" content="LocateJS" /> <meta name="twitter:title" content="Vytal" />
<meta <meta
name="twitter:description" name="twitter:description"
content="Check if your location is actually hidden." content="Check if your location is actually hidden."
@ -73,7 +73,7 @@ const initialDataObj = {
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>LocateJS - Check if your location is actually hidden</title> <title>Vytal</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

4
public/manifest.json
View file

@ -1,6 +1,6 @@
{ {
"short_name": "LocateJS", "short_name": "Vytal",
"name": "LocateJS", "name": "Vytal",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

68
src/components/App.css
View file

@ -21,20 +21,6 @@ body {
font-size: 14px; 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 { h1 {
margin: 0 0 10px 0; margin: 0 0 10px 0;
font-weight: 600; font-weight: 600;
@ -90,54 +76,6 @@ ul {
margin: 0px; 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) { @media screen and (max-width: 575px) {
body { body {
@ -148,12 +86,6 @@ input[type="checkbox"] {
font-size: 15px; font-size: 15px;
} }
.contentIcon {
flex: none;
margin: 0 18px 0 0;
width: 28px !important;
}
td:first-child { td:first-child {
width: 70px; width: 70px;
} }

14
src/components/App.js
View file

@ -1,3 +1,5 @@
/** @jsxImportSource theme-ui */
import { ThemeProvider } from 'theme-ui'; import { ThemeProvider } from 'theme-ui';
import theme from './theme.ts'; import theme from './theme.ts';
import './App.css'; import './App.css';
@ -5,8 +7,16 @@ import MainColumn from './MainColumn';
const App = () => ( const App = () => (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<div className="App"> <div sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
<div className="background" /> <div
sx={{
position: 'fixed',
width: '100%',
height: '100%',
background: 'var(--main)',
zIndex: '-1',
}}
/>
<MainColumn /> <MainColumn />
</div> </div>
</ThemeProvider> </ThemeProvider>

18
src/components/Block.js
View file

@ -1,5 +1,21 @@
/** @jsxImportSource theme-ui */
const ContentBlock = ({ children }) => ( const ContentBlock = ({ children }) => (
<div className="contentBlock">{children}</div> <div
sx={{
color: 'var(--text)',
backgroundColor: '#fff',
borderRadius: '4px',
boxSizing: 'border-box',
padding: ['18px', '20px', '20px'],
boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px',
mb: ['12px', '24px', '24px'],
width: ['100%', 'auto', 'auto'],
minWidth: ['0', '500px', '500px'],
}}
>
{children}
</div>
); );
export default ContentBlock; export default ContentBlock;

25
src/components/Blocks.css
View file

@ -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;
}
}

15
src/components/Blocks.js
View file

@ -1,4 +1,5 @@
import './Blocks.css'; /** @jsxImportSource theme-ui */
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import DataContext from './Context'; import DataContext from './Context';
import InfoBlock from './InfoBlock'; import InfoBlock from './InfoBlock';
@ -52,7 +53,7 @@ const Blocks = () => {
workerData, workerData,
}} }}
> >
<div className="centerBlockInner"> <div sx={{ display: ['none', 'none', 'block'], maxWidth: '500px' }}>
<InfoBlock /> <InfoBlock />
<DataBlock <DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone" title="Intl.DateTimeFormat().resolvedOptions().timeZone"
@ -64,7 +65,7 @@ const Blocks = () => {
/> />
<DataBlock title="navigator.userAgent" type="userAgent" /> <DataBlock title="navigator.userAgent" type="userAgent" />
</div> </div>
<div className="centerBlockInner"> <div sx={{ display: ['none', 'none', 'block'], maxWidth: '500px' }}>
<DataBlock <DataBlock
title="new Date().getTimezoneOffset()" title="new Date().getTimezoneOffset()"
type="timezoneOffset" type="timezoneOffset"
@ -73,7 +74,13 @@ const Blocks = () => {
<DataBlock title="new Date().toString()" type="dateString" /> <DataBlock title="new Date().toString()" type="dateString" />
<GeolocationBlock /> <GeolocationBlock />
</div> </div>
<div className="centerBlockMobile"> <div
sx={{
display: ['block', 'block', 'none'],
maxWidth: '500px',
margin: '0 12px',
}}
>
<InfoBlock /> <InfoBlock />
<DataBlock <DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone" title="Intl.DateTimeFormat().resolvedOptions().timeZone"

14
src/components/DataBlock.js
View file

@ -7,15 +7,13 @@ const DataBlock = ({ title, type }) => {
const { initialData, delayedData, frameData, workerData } = const { initialData, delayedData, frameData, workerData } =
useContext(DataContext); useContext(DataContext);
// const test = !workerData || !window.Worker.length;
const isWorkerValid = workerData && window.Worker.length; const isWorkerValid = workerData && window.Worker.length;
// if(workerData && window.Worker.length) { const getWorkerValue = () => {
// isWorkerValid = true if (isWorkerValid) return workerData[type].value;
// } if (!window.Worker.length) return 'null';
return null;
// console.log(isWorkerValid); };
return ( return (
<Block> <Block>
@ -40,7 +38,7 @@ const DataBlock = ({ title, type }) => {
/> />
<TableRow <TableRow
title="Web worker" title="Web worker"
value={isWorkerValid ? workerData[type].value : ''} value={getWorkerValue()}
issues={ issues={
isWorkerValid isWorkerValid
? workerData[type].issues ? workerData[type].issues

37
src/components/GeolocationBlock.js
View file

@ -1,3 +1,5 @@
/** @jsxImportSource theme-ui */
import { useState } from 'react'; import { useState } from 'react';
import Block from './Block'; import Block from './Block';
import getGeolocation from '../utils/geolocation'; import getGeolocation from '../utils/geolocation';
@ -5,15 +7,23 @@ import TableRow from './TableRow';
const GeolocationBlock = () => { const GeolocationBlock = () => {
const [geolocationData, setGeolocationData] = useState(); const [geolocationData, setGeolocationData] = useState();
const [buttonValue, setbuttonValue] = useState('Allow Geolocation API'); const [buttonValue, setButtonValue] = useState('Allow Geolocation API');
return ( return (
<Block> <Block>
<h1>HTML Geolocation API</h1> <h1>HTML Geolocation API</h1>
{geolocationData ? ( {geolocationData ? (
<> <>
{typeof geolocationData === 'string' ? ( {typeof geolocationData === 'string' ? (
<div className="boxWrap"> <div
<div className="hash">{`${geolocationData}`}</div> sx={{
border: '1px solid var(--border)',
borderRadius: '4px',
padding: '10px',
}}
>
<div sx={{ textAlign: 'center', fontWeight: '600' }}>
{`${geolocationData}`}
</div>
</div> </div>
) : ( ) : (
<> <>
@ -39,9 +49,26 @@ const GeolocationBlock = () => {
type="submit" type="submit"
onClick={() => { onClick={() => {
getGeolocation(setGeolocationData); 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} value={buttonValue}
/> />
)} )}

0
src/components/HeaderBar.css
View file

39
src/components/HeaderBar.js
View file

@ -1,6 +1,5 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import './HeaderBar.css';
import { ReactComponent as LogoImg } from '../images/logo.svg'; import { ReactComponent as LogoImg } from '../images/logo.svg';
import HeaderButton from './HeaderButton'; import HeaderButton from './HeaderButton';
import chromeImage from '../images/chrome.png'; import chromeImage from '../images/chrome.png';
@ -11,28 +10,38 @@ const HeaderBar = () => (
sx={{ sx={{
display: ['block', 'block', 'flex'], display: ['block', 'block', 'flex'],
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: ['center', 'center', 'space-between'],
width: '1024px', width: ['500px', '500px', '1024px'],
margin: '18px 0', margin: ['12px', '18px', '18px'],
}} }}
> >
<a <div
href="." sx={{
style={{ display: 'flex',
width: '206px', justifyContent: 'center',
height: '50px', mb: ['12px', '18px', '0'],
}} }}
alt="LocateJS logo"
> >
<LogoImg /> <a
</a> href="."
style={{
display: 'block',
width: '206px',
height: '50px',
}}
alt="Vytal logo"
>
<LogoImg />
</a>
</div>
<div <div
style={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
height: '50px', justifyContent: 'center',
gap: '24px', height: ['36px', '50px', '50px'],
gap: ['12px', '24px', '24px'],
}} }}
> >
<HeaderButton <HeaderButton

14
src/components/HeaderButton.js
View file

@ -10,11 +10,11 @@ const HeaderButton = ({ url, image, text, alt }) => (
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
backgroundColor: '#fff', backgroundColor: '#fff',
height: '50px', height: ['36px', '50px', '50px'],
borderRadius: '4px', borderRadius: '4px',
padding: '0 18px', px: ['10px', '18px', '18px'],
boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px', boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
fontSize: '15px', fontSize: ['13px', '15px', '15px'],
textDecoration: 'none', textDecoration: 'none',
color: '#000', color: '#000',
':hover': { ':hover': {
@ -25,10 +25,10 @@ const HeaderButton = ({ url, image, text, alt }) => (
<img <img
src={image} src={image}
alt={alt} alt={alt}
height="28" sx={{
width="28" marginRight: ['5px', '8px', '8px'],
style={{ height: ['22px', '28px', '28px'],
marginRight: '8px', width: ['22px', '28px', '28px'],
}} }}
/> />
{text} {text}

4
src/components/InfoBlock.js
View file

@ -5,8 +5,8 @@ const InfoBlock = () => (
Vytal is a browser extension that utilizes the chrome.debugger API to mock Vytal is a browser extension that utilizes the chrome.debugger API to mock
device data that could otherwise reveal information about you. This website 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 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 detected inaccurate tampered data. A green check means that no tampering has
tampering has been detected. To read more visit the Github. been detected.
</Block> </Block>
); );

25
src/components/MainColumn.css
View file

@ -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;
}
}

7
src/components/MainColumn.js
View file

@ -1,10 +1,11 @@
import './MainColumn.css'; /** @jsxImportSource theme-ui */
import HeaderBar from './HeaderBar'; import HeaderBar from './HeaderBar';
import Blocks from './Blocks'; import Blocks from './Blocks';
const MainColumn = () => ( const MainColumn = () => (
<div <div
style={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
@ -12,7 +13,7 @@ const MainColumn = () => (
}} }}
> >
<HeaderBar /> <HeaderBar />
<div className="centerBlockOuter"> <div sx={{ display: 'flex', justifyContent: 'center', gap: '24px' }}>
<Blocks /> <Blocks />
</div> </div>
</div> </div>

36
src/components/TableRow.css
View file

@ -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);
}

63
src/components/TableRow.js
View file

@ -1,4 +1,5 @@
import './TableRow.css'; /** @jsxImportSource theme-ui */
import Modal from 'react-modal'; import Modal from 'react-modal';
import { useState } from 'react'; import { useState } from 'react';
import { ReactComponent as XCircle } from '../images/xCircle.svg'; import { ReactComponent as XCircle } from '../images/xCircle.svg';
@ -35,16 +36,33 @@ const TableRow = ({ title, value, issues }) => {
}; };
return ( return (
<> <>
<tr className={issuesExist ? 'issue' : ''} onClick={openModal}> <tr
sx={
issuesExist
? {
cursor: 'pointer',
':hover': {
backgroundColor: 'var(--issueBackground)',
color: 'var(--issueText)',
},
}
: null
}
onClick={openModal}
>
<td>{title}</td> <td>{title}</td>
<td>{Array.isArray(value) ? JSON.stringify(value) : dataValue}</td> {value ? (
<td> <>
{issuesExist ? ( <td>{Array.isArray(value) ? JSON.stringify(value) : dataValue}</td>
<XCircle className="circleButton" /> <td>
) : ( {issuesExist ? (
<CheckCircle className="circleButton" /> <XCircle sx={{ display: 'flex', width: '20px' }} />
)} ) : (
</td> <CheckCircle sx={{ display: 'flex', width: '20px' }} />
)}
</td>
</>
) : null}
</tr> </tr>
<Modal <Modal
isOpen={modalIsOpen} isOpen={modalIsOpen}
@ -52,9 +70,28 @@ const TableRow = ({ title, value, issues }) => {
style={modalStyles} style={modalStyles}
contentLabel="Issues Modal" contentLabel="Issues Modal"
> >
<div className="modalHeader"> <div
<div className="modalTitle">{title} issues</div> sx={{
<X className="closeButton" onClick={closeModal} /> display: 'flex',
justifyContent: 'space-between',
margin: '0 0 6px 0',
height: '20px',
}}
>
<div sx={{ fontWeight: '600' }}>{title} issues</div>
<X
sx={{
fill: 'var(--border)',
display: 'flex',
width: '12px',
cursor: 'pointer',
margin: '0 0 0 12px',
':hover': {
fill: 'var(--grey)',
},
}}
onClick={closeModal}
/>
</div> </div>
<ul> <ul>
{issues.filter(Boolean).map((ele, index) => ( {issues.filter(Boolean).map((ele, index) => (

2
src/components/theme.ts
View file

@ -1,7 +1,7 @@
import type { Theme } from 'theme-ui'; import type { Theme } from 'theme-ui';
const theme: Theme = { const theme: Theme = {
breakpoints: ['575px', '1100px'], breakpoints: ['575px', '1060px'],
colors: { colors: {
white90: 'rgb(255, 255, 255, 0.90)', white90: 'rgb(255, 255, 255, 0.90)',
}, },