From fbab10d3f5b4c737442881c2f406670ebcdf4a6b Mon Sep 17 00:00:00 2001 From: z0ccc Date: Thu, 22 Jul 2021 23:50:45 -0400 Subject: [PATCH] Added mobile css --- frontend/src/components/ContentList.js | 4 +- frontend/src/components/FingerprintBlock.js | 4 +- frontend/src/components/StartBlock.js | 22 +++++----- frontend/src/images/desktop.svg | 5 --- frontend/src/images/fingerprint.svg | 5 +++ frontend/src/styles/App.css | 47 ++++++++++++++++++++- 6 files changed, 66 insertions(+), 21 deletions(-) delete mode 100644 frontend/src/images/desktop.svg create mode 100644 frontend/src/images/fingerprint.svg diff --git a/frontend/src/components/ContentList.js b/frontend/src/components/ContentList.js index b46d1aa..5af1a5b 100644 --- a/frontend/src/components/ContentList.js +++ b/frontend/src/components/ContentList.js @@ -1,11 +1,11 @@ import { ReactComponent as WifiIcon } from '../images/wifi.svg'; import { ReactComponent as BrowserIcon } from '../images/browser.svg'; -import { ReactComponent as DesktopIcon } from '../images/desktop.svg'; +import { ReactComponent as FingerprintIcon } from '../images/fingerprint.svg'; const Icons = { wifi: , browser: , - desktop: , + fingerprint: , }; const ContentList = ({ items }) => ( diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js index 7e47876..d45508e 100644 --- a/frontend/src/components/FingerprintBlock.js +++ b/frontend/src/components/FingerprintBlock.js @@ -132,9 +132,9 @@ const FingerprintBlock = () => { )}

- Explanation: This fingerprint is a unique identifier that can be + Explanation: This is a unique identifier that can be used to follow you around the web. Even if you clear cookies, change - your IP or use private mode the fingerprint will stay the same. Enter + your IP or use private mode the hash will stay the same. Enter your name below and reload the page in private mode to test it out.

{saved ? ( diff --git a/frontend/src/components/StartBlock.js b/frontend/src/components/StartBlock.js index fb59f60..05da916 100644 --- a/frontend/src/components/StartBlock.js +++ b/frontend/src/components/StartBlock.js @@ -4,13 +4,8 @@ import ScanBlock from './ScanBlock'; const contentItems = [ { - title: 'Hardware', - icon: 'desktop', - body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.', - }, - { - title: 'Software', - icon: 'browser', + title: 'Fingerprint', + icon: 'fingerprint', body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.', }, { @@ -18,6 +13,11 @@ const contentItems = [ icon: 'wifi', body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.', }, + { + title: 'Software', + icon: 'browser', + body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.', + }, ]; const StartBlock = ({ onScanClick }) => { @@ -27,6 +27,7 @@ const StartBlock = ({ onScanClick }) => { document.getElementById('scanButton').value = 'Loading...'; await delay(100); startScan(); + window.scrollTo(0, 0); }; const startScan = useCallback(() => { @@ -37,10 +38,9 @@ const StartBlock = ({ onScanClick }) => {

About

- With the Vytal Browser Privacy Check, you can determine which traces you - or your browser leave while surfing. Our test is intended to raise - awareness of which data can be used by websites and advertisers to - create a profile of you or to track your activities online. + Vytal shows you what traces your browser leaves behind while surfing the + web. This scan allows you to understand how easy it is to identify and + track your browser even while using private mode.
- - - - \ No newline at end of file diff --git a/frontend/src/images/fingerprint.svg b/frontend/src/images/fingerprint.svg new file mode 100644 index 0000000..97fab3f --- /dev/null +++ b/frontend/src/images/fingerprint.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 99e80f9..dfc8fa0 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -30,6 +30,7 @@ align-items: center; justify-content: center; flex: 1 0 auto; + margin: 0 18px; } .centerBlockInner { @@ -176,7 +177,7 @@ input[type='text'] { border-radius: 6px; padding: 6px; margin: 0 6px 0 0; - width: 30%; + width: 200px; outline: none; } @@ -192,3 +193,47 @@ input[type='text'] { #saveButton:hover { background-color: var(--border); } + +@media screen and (max-width: 500px) { + body { + font-size: 14px; + } + + .contentBlock { + padding: 18px; + margin: 0 0 18px 0; + } + + .centerBlockInner { + width: 650px; + margin: 12px 0 0 0; + } + + .logo { + width: 185px; + margin: 0 0 12px 0; + } + + h1 { + font-size: 16px; + } + + h2 { + margin: 0 0 3px 0; + font-size: 15px; + } + + .contentIcon { + flex: none; + margin: 0 18px 0 0; + width: 28px !important; + } + + td:first-child { + width: 70px; + } + + .boxWrap { + padding: 8px; + } +}