From b28764705b82d476e85d9db40ab327ea0653e276 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 7 Jun 2021 22:30:00 -0400
Subject: [PATCH] Finished switching to table

---
 src/App.css   |   6 +-
 src/App.jsx   | 176 ++++++++++++++++++++++++++++++++------------------
 src/popup.css |   2 +-
 3 files changed, 115 insertions(+), 69 deletions(-)

diff --git a/src/App.css b/src/App.css
index 36002c5..c6faecf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,10 @@
 .title {
   font-weight: 600;
+  margin: 3px 0 0 0;
 }
 
 table {
   width: 100%;
-  margin: 0 0 6px 0;
 }
 
 tr {
@@ -18,8 +18,4 @@ tr {
 
 .flagWrap {
   margin: 0 0 0 6px;
-}
-
-.loadingFlag {
-  display: none;
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index d8d6149..4531e22 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -58,14 +58,15 @@ const App = () => {
 
   return (
     <div className="App">
-      <div className="title">Connection</div>
       <table>
+        <col style="width:40%" />
+        <col style="width:60%" />
+        <div className="title">Connection</div>
         <tr>
           <td>IP address:</td>
           <td>
             <div id="ipAddress" />
           </td>
-          <td>?</td>
         </tr>
         <tr>
           <td>Country:</td>
@@ -77,96 +78,145 @@ const App = () => {
               </div>
             </div>
           </td>
-          <td>?</td>
         </tr>
         <tr>
           <td>Region:</td>
           <td>
             <div id="region" />
           </td>
-          <td>?</td>
         </tr>
         <tr>
           <td>City:</td>
           <td>
             <div id="city" />
           </td>
-          <td>?</td>
         </tr>
         <tr>
           <td>Zip:</td>
           <td>
             <div id="zip" />
           </td>
-          <td>?</td>
         </tr>
         <tr>
           <td>Provider:</td>
           <td>
             <div id="provider" />
           </td>
-          <td>?</td>
+        </tr>
+        <div className="title">Software</div>
+        <tr>
+          <td>Browser:</td>
+          <td>
+            <div id="browser" />
+          </td>
+        </tr>
+        <tr>
+          <td>Browser version:</td>
+          <td>
+            <div id="browserVersion" />
+          </td>
+        </tr>
+        <tr>
+          <td>Browser engine:</td>
+          <td>
+            <div id="browserEngine" />
+          </td>
+        </tr>
+        <tr>
+          <td>Operating system:</td>
+          <td>
+            <div id="os" />
+          </td>
+        </tr>
+        <tr>
+          <td>Language:</td>
+          <td>
+            <div id="language" />
+          </td>
+        </tr>
+        <tr>
+          <td>Timezone:</td>
+          <td>
+            <div id="timezone" />
+          </td>
+        </tr>
+        <tr>
+          <td>Cookies enabled:</td>
+          <td>
+            <div id="cookies" />
+          </td>
+        </tr>
+        <tr>
+          <td>Java enabled:</td>
+          <td>
+            <div id="java" />
+          </td>
+        </tr>
+        <tr>
+          <td>DNT header enabled:</td>
+          <td>
+            <div id="dnt" />
+          </td>
+        </tr>
+        <div className="title">Hardware</div>
+        <tr>
+          <td>Platform:</td>
+          <td>
+            <div id="platform" />
+          </td>
+        </tr>
+        <tr>
+          <td>Screen resolution:</td>
+          <td>
+            <div id="screenSize" />
+          </td>
+        </tr>
+        <tr>
+          <td>Color Resolution:</td>
+          <td>
+            <div id="color" />
+          </td>
+        </tr>
+        <tr>
+          <td>Battery level:</td>
+          <td>
+            <div id="batteryLevel" />
+          </td>
+        </tr>
+        <tr>
+          <td>Battery status:</td>
+          <td>
+            <div id="batteryStatus" />
+          </td>
+        </tr>
+        <tr>
+          <td>Device memory:</td>
+          <td>
+            <div id="memory" />
+          </td>
+        </tr>
+        <tr>
+          <td># of CPU cores:</td>
+          <td>
+            <div id="cores" />
+          </td>
+        </tr>
+        <tr>
+          <td>WebGL vendor:</td>
+          <td>
+            <div id="vendor" />
+          </td>
+        </tr>
+        <tr>
+          <td>WebGL renderer:</td>
+          <td>
+            <div id="renderer" />
+          </td>
         </tr>
       </table>
-      <div className="title">Software</div>
-      <div className="item" id="browser">
-        Browser:{' '}
-      </div>
-      <div className="item" id="browserVersion">
-        Browser version:{' '}
-      </div>
-      <div className="item" id="browserEngine">
-        Browser engine:{' '}
-      </div>
-      <div className="item" id="os">
-        Operating system:{' '}
-      </div>
-      <div className="item" id="language">
-        Language:{' '}
-      </div>
-      <div className="item" id="timezone">
-        Timezone:{' '}
-      </div>
-      <div className="item" id="cookies">
-        Cookies enabled:{' '}
-      </div>
-      <div className="item" id="java">
-        Java enabled:{' '}
-      </div>
-      <div className="item" id="dnt">
-        DNT header enabled:{' '}
-      </div>
       {/* <div className="item" id="plugins">
         Plugins:{' '}
       </div> */}
-      <div className="title">Hardware</div>
-      <div className="item" id="platform">
-        Platform:{' '}
-      </div>
-      <div className="item" id="screenSize">
-        Screen resolution:{' '}
-      </div>
-      <div className="item" id="color">
-        Color Resolution:{' '}
-      </div>
-      <div className="item" id="batteryLevel">
-        Battery level:{' '}
-      </div>
-      <div className="item" id="batteryStatus">
-        Battery status:{' '}
-      </div>
-      <div className="item" id="memory">
-        Device memory:{' '}
-      </div>
-      <div className="item" id="cores">
-        # of CPU cores:{' '}
-      </div>
-      <div className="item" id="vendor">
-        WebGL vendor:{' '}
-      </div>
-      <div className="item" id="renderer">
-        WebGL renderer:{' '}
-      </div>
     </div>
   );
 };
diff --git a/src/popup.css b/src/popup.css
index 47c5f34..bd5a04f 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -8,5 +8,5 @@ body {
   background-color: var(--background);
   font-size: 15px;
   line-height: 22px;
-  width: 350px;
+  width: 400px;
 }
\ No newline at end of file