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',
'react/button-has-type': 'off',
'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",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "locatejs",
"name": "vytal",
"version": "0.1.0",
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",

4
package.json
View file

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

8
public/index.html
View file

@ -39,8 +39,8 @@ const initialDataObj = {
content="Check if your location is actually hidden."
/>
<meta name="author" content="z0ccc" />
<meta property="og:title" content="LocateJS" />
<meta property="og:url" content="https://locatejs.com" />
<meta property="og:title" content="Vytal" />
<meta property="og:url" content="https://vytal.io" />
<meta
property="og:image:secure"
content="https://locatejs.com/preview.png"
@ -57,7 +57,7 @@ const initialDataObj = {
name="twitter:card"
content="https://locatejs.com/preview.png"
/>
<meta name="twitter:title" content="LocateJS" />
<meta name="twitter:title" content="Vytal" />
<meta
name="twitter:description"
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/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>LocateJS - Check if your location is actually hidden</title>
<title>Vytal</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

4
public/manifest.json
View file

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

68
src/components/App.css
View file

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

14
src/components/App.js
View file

@ -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 = () => (
<ThemeProvider theme={theme}>
<div className="App">
<div className="background" />
<div sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
<div
sx={{
position: 'fixed',
width: '100%',
height: '100%',
background: 'var(--main)',
zIndex: '-1',
}}
/>
<MainColumn />
</div>
</ThemeProvider>

18
src/components/Block.js
View file

@ -1,5 +1,21 @@
/** @jsxImportSource theme-ui */
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;

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 DataContext from './Context';
import InfoBlock from './InfoBlock';
@ -52,7 +53,7 @@ const Blocks = () => {
workerData,
}}
>
<div className="centerBlockInner">
<div sx={{ display: ['none', 'none', 'block'], maxWidth: '500px' }}>
<InfoBlock />
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone"
@ -64,7 +65,7 @@ const Blocks = () => {
/>
<DataBlock title="navigator.userAgent" type="userAgent" />
</div>
<div className="centerBlockInner">
<div sx={{ display: ['none', 'none', 'block'], maxWidth: '500px' }}>
<DataBlock
title="new Date().getTimezoneOffset()"
type="timezoneOffset"
@ -73,7 +74,13 @@ const Blocks = () => {
<DataBlock title="new Date().toString()" type="dateString" />
<GeolocationBlock />
</div>
<div className="centerBlockMobile">
<div
sx={{
display: ['block', 'block', 'none'],
maxWidth: '500px',
margin: '0 12px',
}}
>
<InfoBlock />
<DataBlock
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 } =
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 (
<Block>
@ -40,7 +38,7 @@ const DataBlock = ({ title, type }) => {
/>
<TableRow
title="Web worker"
value={isWorkerValid ? workerData[type].value : ''}
value={getWorkerValue()}
issues={
isWorkerValid
? workerData[type].issues

37
src/components/GeolocationBlock.js
View file

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

0
src/components/HeaderBar.css
View file

25
src/components/HeaderBar.js
View file

@ -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'],
}}
>
<div
sx={{
display: 'flex',
justifyContent: 'center',
mb: ['12px', '18px', '0'],
}}
>
<a
href="."
style={{
display: 'block',
width: '206px',
height: '50px',
}}
alt="LocateJS logo"
alt="Vytal logo"
>
<LogoImg />
</a>
</div>
<div
style={{
sx={{
display: 'flex',
alignItems: 'center',
height: '50px',
gap: '24px',
justifyContent: 'center',
height: ['36px', '50px', '50px'],
gap: ['12px', '24px', '24px'],
}}
>
<HeaderButton

14
src/components/HeaderButton.js
View file

@ -10,11 +10,11 @@ const HeaderButton = ({ url, image, text, alt }) => (
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 }) => (
<img
src={image}
alt={alt}
height="28"
width="28"
style={{
marginRight: '8px',
sx={{
marginRight: ['5px', '8px', '8px'],
height: ['22px', '28px', '28px'],
width: ['22px', '28px', '28px'],
}}
/>
{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
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.
</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 Blocks from './Blocks';
const MainColumn = () => (
<div
style={{
sx={{
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
@ -12,7 +13,7 @@ const MainColumn = () => (
}}
>
<HeaderBar />
<div className="centerBlockOuter">
<div sx={{ display: 'flex', justifyContent: 'center', gap: '24px' }}>
<Blocks />
</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);
}

51
src/components/TableRow.js
View file

@ -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 (
<>
<tr className={issuesExist ? 'issue' : ''} onClick={openModal}>
<tr
sx={
issuesExist
? {
cursor: 'pointer',
':hover': {
backgroundColor: 'var(--issueBackground)',
color: 'var(--issueText)',
},
}
: null
}
onClick={openModal}
>
<td>{title}</td>
{value ? (
<>
<td>{Array.isArray(value) ? JSON.stringify(value) : dataValue}</td>
<td>
{issuesExist ? (
<XCircle className="circleButton" />
<XCircle sx={{ display: 'flex', width: '20px' }} />
) : (
<CheckCircle className="circleButton" />
<CheckCircle sx={{ display: 'flex', width: '20px' }} />
)}
</td>
</>
) : null}
</tr>
<Modal
isOpen={modalIsOpen}
@ -52,9 +70,28 @@ const TableRow = ({ title, value, issues }) => {
style={modalStyles}
contentLabel="Issues Modal"
>
<div className="modalHeader">
<div className="modalTitle">{title} issues</div>
<X className="closeButton" onClick={closeModal} />
<div
sx={{
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>
<ul>
{issues.filter(Boolean).map((ele, index) => (

2
src/components/theme.ts
View file

@ -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)',
},