From 2a8597f213639cc50d36e0b2204fe918a613e887 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 15:16:11 -0400
Subject: [PATCH] Added Explanation text and read more links

---
 frontend/src/components/App.css            | 12 ++++++++++--
 frontend/src/components/ConnectionBlock.js | 11 ++++++++++-
 frontend/src/components/IntlBlock.js       | 12 ++++++++++--
 frontend/src/components/LocationBlock.js   | 11 ++++++++++-
 frontend/src/components/NavigatorBlock.js  | 11 ++++++++++-
 frontend/src/components/OtherBlock.js      |  4 ----
 frontend/src/components/ScreenBlock.js     | 12 ++++++++++--
 7 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/App.css b/frontend/src/components/App.css
index 25580d4..7f3dacf 100644
--- a/frontend/src/components/App.css
+++ b/frontend/src/components/App.css
@@ -4,9 +4,8 @@
   --text: #4b5563;
   --border: #ddd;
   --issueBackground: #f8d7da;
-  --issueHover: #f4c1c6;
-  --issueBorder: #f5c6cb;
   --issueText: #721c24;
+  --link: #943ec5;
 }
 
 body {
@@ -68,6 +67,15 @@ img {
   margin: 0 0 12px 0;
 }
 
+.link {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
 @media screen and (max-width: 500px) {
   body {
     font-size: 14px;
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index 479e3d7..c138cdc 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -8,7 +8,16 @@ const LocationBlock = ({ connectionData }) => (
     <Table data={getConnection(connectionData)} />
     <p>
       <b>Explanation:</b> Your IP address reveals information about your
-      connection. Using a VPN or Tor will hide your connection info.
+      connection.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about ip connection"
+        href="https://en.wikipedia.org/wiki/IP_address"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 85ae198..062c5df 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -7,8 +7,16 @@ const IntlBlock = ({ workerData }) => (
     <h1>Intl</h1>
     <Table data={getIntl(workerData)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> The Intl object exposes info about your computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about intl"
+        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index d9ef891..6e7ef87 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -9,7 +9,16 @@ const LocationBlock = ({ connectionData, workerData }) => (
     <Table data={getLocation(connectionData, workerData)} />
     <p>
       <b>Explanation:</b> Your IP address can be used to determine your
-      location. Using a VPN or Tor will hide your true location.
+      location.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about ip location"
+        href="https://en.wikipedia.org/wiki/IP_address"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index a9e4fde..5a0841c 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -8,7 +8,16 @@ const NavigatorBlock = ({ workerData }) => (
     <Table data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> The Navigator interface exposes info about your
-      computer.
+      computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about navigator"
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index fe2ade8..3f269f3 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -35,10 +35,6 @@ const OtherBlock = ({ workerData }) => {
       {battery && adBlock !== undefined && (
         <Table data={getOther(battery, adBlock, workerData)} />
       )}
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
     </Block>
   );
 };
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index fa547d7..c2c4132 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -7,8 +7,16 @@ const ScreenBlock = () => (
     <h1>Screen</h1>
     <Table data={getScreen()} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> The Screen interface exposes info about your computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about screen"
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Screen"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );