Updated connection loading

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',

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++) {

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

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

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 {