Added Explanation text and read more links

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;

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

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
+      <b>Explanation:</b> The Intl object exposes info about your computer.{' '}
-      hardware. This information can be used to create a fingerprint.
+      <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>
 );

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

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

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

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
+      <b>Explanation:</b> The Screen interface exposes info about your computer.{' '}
-      hardware. This information can be used to create a fingerprint.
+      <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>
 );