From 213220e9fbd3f0e873a96eaf2e30f2641442204c Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 19:44:44 -0400
Subject: [PATCH] Formatted fingerprint table

---
 frontend/src/components/FingerprintBlock.js | 28 +++++++++------------
 frontend/src/components/ScreenBlock.js      |  2 +-
 frontend/src/styles/App.css                 | 10 +++++---
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 48c3d3b..ffc7d06 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -16,8 +16,6 @@ const FingerprintBlock = ({ workerData }) => {
     if (signature) {
       postSignature(hash, signature);
     } else {
-      console.log(signature);
-
       getSignature(hash, setSignature);
     }
   }, [signature]);
@@ -28,7 +26,9 @@ const FingerprintBlock = ({ workerData }) => {
       <h1>Fingerprint</h1>
       <>
         {signature ? (
-          <Table data={getFingerprint(signature, hash)} />
+          <div className="fingerprintTable">
+            <Table data={getFingerprint(signature, hash)} />
+          </div>
         ) : (
           <div className="boxWrap">
             <div className="hash">{hash}</div>
@@ -41,19 +41,15 @@ const FingerprintBlock = ({ workerData }) => {
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      {signature ? (
-        <p>Success! Reload page.</p>
-      ) : (
-        <form onSubmit={(e) => setSignature(e.target[0].value)}>
-          <input
-            type="text"
-            id="name"
-            name="name"
-            placeholder="Enter signature"
-          />
-          <input type="submit" id="saveButton" value="Save" maxLength="100" />
-        </form>
-      )}
+      <form onSubmit={(e) => setSignature(e.target[0].value)}>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          placeholder="Enter signature"
+        />
+        <input type="submit" id="saveButton" value="Save" maxLength="100" />
+      </form>
     </Block>
   );
 };
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index b5b2862..fa547d7 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -5,7 +5,7 @@ import getScreen from '../utils/screen';
 const ScreenBlock = () => (
   <Block>
     <h1>Screen</h1>
-    <Table type="screen" data={getScreen()} />
+    <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.
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index a702a74..f1d82b7 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -146,12 +146,14 @@ td {
   padding: 12px;
 }
 
-td:nth-child(2):first-letter {
-  text-transform: uppercase;
+td:first-child {
+  width: 150px;
+  font-weight: 600;
+  word-break: normal;
 }
 
-td:first-child {
-  width: 180px;
+.fingerprintTable td:first-child {
+  width: 80px;
   font-weight: 600;
   word-break: normal;
 }