From d62d8f59a6ad9f25ee4486fe110c325a1fe3b2ac Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Fri, 23 Jul 2021 21:20:15 -0400
Subject: [PATCH] Updated connection loading

---
 frontend/src/components/ConnectBlock.js  | 10 +++++-----
 frontend/src/components/FontsBlock.js    |  2 +-
 frontend/src/components/LocationBlock.js |  2 +-
 frontend/src/components/ScanBlocks.js    |  8 ++++----
 frontend/src/styles/App.css              | 12 ++++++++----
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ConnectBlock.js b/frontend/src/components/ConnectBlock.js
index af32187..e824bcb 100644
--- a/frontend/src/components/ConnectBlock.js
+++ b/frontend/src/components/ConnectBlock.js
@@ -11,8 +11,8 @@ const ConnectBlock = () => {
       .then((response) => response.json())
       .then((data) => {
         setConnectData(data);
+        setDisplay('block');
       });
-    setDisplay('block');
   }, []);
 
   const detectTor = () => {
@@ -32,22 +32,22 @@ const ConnectBlock = () => {
     {
       key: 'ipAddress',
       title: 'IP address',
-      value: connectData.query,
+      value: connectData.query || 'N/A',
     },
     {
       key: 'isp',
       title: 'ISP',
-      value: connectData.isp,
+      value: connectData.isp || 'N/A',
     },
     {
       key: 'org',
       title: 'Organization',
-      value: connectData.org,
+      value: connectData.org || 'N/A',
     },
     {
       key: 'asn',
       title: 'ASN',
-      value: connectData.as,
+      value: connectData.as || 'N/A',
     },
     {
       key: 'tor',
diff --git a/frontend/src/components/FontsBlock.js b/frontend/src/components/FontsBlock.js
index f487b8b..1c85c35 100644
--- a/frontend/src/components/FontsBlock.js
+++ b/frontend/src/components/FontsBlock.js
@@ -11,7 +11,7 @@ const FontsBlock = () => {
     const height = [];
     const span = document.createElement('span');
 
-    span.innerHTML = 'AaBbCcWwLl:/!@';
+    span.innerHTML = 'AaBbCcWwLl:/!@的下ㅏㅎ平片';
     span.style.fontSize = '100px';
 
     for (let i = 0; i < famLen; i++) {
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 9b3c1e3..cc06c35 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -11,8 +11,8 @@ const LocationBlock = () => {
       .then((response) => response.json())
       .then((data) => {
         setLocationData(data);
+        setDisplay('block');
       });
-    setDisplay('block');
   }, []);
 
   const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index a833d3a..c3579ff 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -4,17 +4,17 @@ import HardwareBlock from './HardwareBlock';
 import SoftwareBlock from './SoftwareBlock';
 import ConnectBlock from './ConnectBlock';
 import FiltersBlock from './FiltersBlock';
-import FontsBlock from './FontsBlock';
+// import FontsBlock from './FontsBlock';
 
 const ScanBlocks = () => (
   <div>
     <FingerprintBlock />
+    <FiltersBlock />
     <LocationBlock />
     <ConnectBlock />
-    <HardwareBlock />
     <SoftwareBlock />
-    <FiltersBlock />
-    <FontsBlock />
+    <HardwareBlock />
+    {/* <FontsBlock /> */}
   </div>
 );
 
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index a4a57b0..63ee9cb 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -81,13 +81,13 @@
 
 h1 {
   margin: 0 0 12px 0;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 19px;
 }
 
 h2 {
   margin: 0 0 4px 0;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 17px;
 }
 
@@ -148,7 +148,7 @@ td {
 
 td:first-child {
   width: 180px;
-  font-weight: 500;
+  font-weight: 600;
   word-break: normal;
 }
 
@@ -156,6 +156,10 @@ p {
   margin: 12px 0 0 0;
 }
 
+b {
+    font-weight: 600;
+}
+
 img {
   width: 100%;
   border-radius: 6px;
@@ -167,7 +171,7 @@ img {
 
 .hash {
   text-align: center;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 form {