From 84a0f1913c9b3d1215ad3f99a49ee61c11e3c138 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 8 Jun 2021 02:42:54 -0400
Subject: [PATCH] Formatted popup table

---
 public/vytal-1.svg | 91 ++++++++++++++++++++++++++++++++++++++++++++++
 public/vytal-2.svg | 91 ++++++++++++++++++++++++++++++++++++++++++++++
 src/App.css        | 45 ++++++++++++++++++++++-
 src/App.jsx        | 13 +++----
 src/popup.css      |  7 ++--
 5 files changed, 235 insertions(+), 12 deletions(-)
 create mode 100644 public/vytal-1.svg
 create mode 100644 public/vytal-2.svg

diff --git a/public/vytal-1.svg b/public/vytal-1.svg
new file mode 100644
index 0000000..308107c
--- /dev/null
+++ b/public/vytal-1.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="4389.000000pt"
+   height="1056.000000pt"
+   viewBox="0 0 4389.000000 1056.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg20"
+   sodipodi:docname="Vytal-full-c1.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata26">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs24" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="0.12590657"
+     inkscape:cx="4157.3023"
+     inkscape:cy="1857.2088"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg20" />
+  <g
+     transform="translate(0.000000,1056.000000) scale(0.100000,-0.100000)"
+     fill="#000000"
+     stroke="none"
+     id="g18"
+     style="fill:#943ec5;fill-opacity:1">
+    <path
+       d="M4890 10554 c-19 -2 -102 -11 -185 -20 -814 -84 -1627 -377 -2332 -841 -666 -437 -1242 -1047 -1652 -1748 -345 -590 -582 -1279 -670 -1950 -34 -261 -44 -422 -44 -710 0 -388 28 -679 99 -1035 417 -2090 2047 -3724 4134 -4144 360 -73 640 -99 1040 -99 488 0 847 44 1305 160 665 168 1310 477 1860 891 1004 754 1703 1833 1983 3062 146 636 168 1351 61 2010 -273 1699 -1362 3160 -2913 3911 -540 261 -1091 420 -1716 495 -100 12 -240 17 -535 19 -220 2 -416 1 -435 -1z m870 -978 c947 -115 1772 -494 2460 -1130 303 -281 615 -672 815 -1025 491 -866 669 -1875 504 -2861 -113 -681 -390 -1322 -814 -1885 -233 -310 -552 -627 -869 -862 -1529 -1139 -3637 -1136 -5161 7 -391 294 -746 669 -1012 1070 -367 553 -599 1170 -683 1814 -113 869 22 1705 399 2472 103 210 151 294 287 499 316 476 726 886 1199 1199 340 225 629 368 999 495 349 120 681 187 1106 225 112 10 641 -3 770 -18z"
+       id="path2"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M5045 8784 c-729 -59 -1353 -298 -1925 -740 -149 -114 -480 -445 -594 -594 -405 -524 -638 -1090 -722 -1755 -22 -172 -25 -595 -6 -760 86 -742 352 -1362 822 -1916 176 -207 457 -462 565 -513 153 -73 342 -56 483 44 140 98 210 245 199 420 -9 156 -62 251 -211 377 -479 408 -770 907 -876 1504 -31 174 -39 528 -16 719 93 759 503 1435 1121 1847 275 183 609 315 946 372 442 76 912 34 1329 -116 593 -214 1089 -664 1375 -1248 194 -396 270 -726 270 -1165 -1 -320 -34 -522 -135 -815 -143 -414 -360 -722 -786 -1116 -311 -287 -141 -788 284 -834 71 -8 180 13 256 51 97 47 353 285 519 482 474 563 751 1223 818 1954 17 188 6 625 -19 798 -99 656 -347 1220 -760 1730 -118 144 -361 385 -514 507 -520 416 -1102 662 -1770 748 -118 16 -543 28 -653 19z"
+       id="path4"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M5175 6514 c-92 -14 -198 -39 -260 -61 -458 -165 -766 -607 -768 -1103 -1 -309 89 -544 306 -792 141 -160 207 -284 259 -481 21 -80 22 -101 27 -972 l6 -890 24 -60 c79 -199 237 -332 440 -372 282 -56 561 117 657 407 17 51 19 120 24 935 6 867 6 881 28 958 51 183 137 343 254 474 207 230 308 486 308 782 0 328 -118 612 -349 842 -171 170 -340 263 -576 314 -69 16 -321 28 -380 19z"
+       id="path6"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M39255 8795 c-156 -35 -252 -89 -375 -214 -79 -79 -103 -111 -137 -181 -23 -47 -50 -112 -60 -145 -17 -57 -18 -203 -21 -2915 -2 -2552 -1 -2863 13 -2933 31 -154 97 -272 219 -392 93 -91 176 -144 291 -183 l80 -27 1972 -3 c2216 -3 2045 -8 2213 74 82 41 109 61 196 148 87 87 107 114 147 196 56 113 77 207 77 338 -1 222 -69 380 -232 538 -87 85 -141 122 -228 159 -131 55 -109 54 -1270 57 -591 2 -1274 4 -1517 6 l-443 2 -2 2433 -3 2432 -23 73 c-86 279 -301 480 -574 536 -92 19 -240 20 -323 1z"
+       id="path8"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M12765 8744 c-101 -17 -243 -74 -332 -136 -160 -109 -287 -325 -313 -531 -10 -84 -2 -193 21 -280 9 -37 516 -1310 1838 -4620 424 -1062 439 -1096 540 -1209 63 -71 201 -159 301 -192 130 -43 243 -53 364 -32 163 27 276 83 399 196 130 120 126 111 585 1263 231 578 735 1842 1120 2807 530 1328 705 1776 718 1840 59 295 -87 628 -344 784 -226 137 -480 151 -719 41 -147 -68 -257 -165 -333 -294 -21 -36 -377 -914 -790 -1950 l-753 -1884 -756 1890 c-416 1039 -772 1916 -791 1949 -48 81 -170 202 -255 252 -114 67 -240 104 -365 107 -58 2 -118 1 -135 -1z"
+       id="path10"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M26688 8740 c-304 -52 -566 -312 -619 -614 -18 -104 -7 -273 24 -369 75 -231 263 -414 512 -498 l70 -24 792 -3 793 -3 2 -2442 3 -2442 23 -70 c87 -258 284 -451 528 -516 108 -29 287 -29 396 -1 270 72 486 299 544 571 11 55 14 457 14 2484 l0 2417 753 0 c474 0 776 4 816 11 164 26 285 91 416 223 151 152 214 307 215 523 0 116 -11 179 -47 277 -66 176 -234 350 -413 426 -140 59 58 54 -2465 56 -1270 1 -2331 -2 -2357 -6z"
+       id="path12"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M34355 8735 c-232 -43 -433 -192 -538 -402 -33 -64 -2231 -5575 -2255 -5652 -13 -42 -17 -90 -17 -196 1 -131 3 -146 32 -227 78 -220 214 -370 416 -455 112 -47 194 -64 307 -65 143 0 264 32 382 103 119 70 223 181 285 304 12 22 357 879 768 1905 411 1026 750 1868 754 1872 3 4 339 -826 745 -1845 406 -1018 755 -1885 775 -1925 133 -274 456 -451 752 -413 109 14 155 29 279 88 79 38 107 59 180 132 71 71 94 103 133 181 89 180 112 363 68 530 -22 86 -2217 5595 -2263 5682 -150 281 -487 442 -803 383z"
+       id="path14"
+       style="fill:#943ec5;fill-opacity:1" />
+    <path
+       d="M19760 8661 c-129 -35 -236 -96 -337 -194 -264 -253 -298 -670 -80 -966 23 -31 467 -625 987 -1321 l945 -1265 5 -1255 5 -1255 24 -70 c65 -194 179 -338 343 -437 106 -63 202 -90 343 -95 153 -6 238 11 364 73 169 83 316 254 379 441 l27 78 5 1250 5 1250 1021 1280 c561 704 1039 1305 1062 1335 94 127 137 261 135 430 -2 240 -95 431 -283 581 -141 113 -312 167 -495 156 -199 -13 -348 -76 -478 -205 -29 -28 -421 -512 -872 -1075 l-819 -1025 -763 1018 c-419 561 -781 1040 -805 1066 -133 145 -329 224 -548 223 -68 0 -128 -6 -170 -18z"
+       id="path16"
+       style="fill:#943ec5;fill-opacity:1" />
+  </g>
+</svg>
diff --git a/public/vytal-2.svg b/public/vytal-2.svg
new file mode 100644
index 0000000..70a9f1f
--- /dev/null
+++ b/public/vytal-2.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="4389.000000pt"
+   height="1056.000000pt"
+   viewBox="0 0 4389.000000 1056.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg20"
+   sodipodi:docname="Vytal-full-c2.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata26">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs24" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="0.12590657"
+     inkscape:cx="4157.3023"
+     inkscape:cy="1857.2088"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg20" />
+  <g
+     transform="translate(0.000000,1056.000000) scale(0.100000,-0.100000)"
+     fill="#000000"
+     stroke="none"
+     id="g18"
+     style="fill:#9b59b6;fill-opacity:1">
+    <path
+       d="M4890 10554 c-19 -2 -102 -11 -185 -20 -814 -84 -1627 -377 -2332 -841 -666 -437 -1242 -1047 -1652 -1748 -345 -590 -582 -1279 -670 -1950 -34 -261 -44 -422 -44 -710 0 -388 28 -679 99 -1035 417 -2090 2047 -3724 4134 -4144 360 -73 640 -99 1040 -99 488 0 847 44 1305 160 665 168 1310 477 1860 891 1004 754 1703 1833 1983 3062 146 636 168 1351 61 2010 -273 1699 -1362 3160 -2913 3911 -540 261 -1091 420 -1716 495 -100 12 -240 17 -535 19 -220 2 -416 1 -435 -1z m870 -978 c947 -115 1772 -494 2460 -1130 303 -281 615 -672 815 -1025 491 -866 669 -1875 504 -2861 -113 -681 -390 -1322 -814 -1885 -233 -310 -552 -627 -869 -862 -1529 -1139 -3637 -1136 -5161 7 -391 294 -746 669 -1012 1070 -367 553 -599 1170 -683 1814 -113 869 22 1705 399 2472 103 210 151 294 287 499 316 476 726 886 1199 1199 340 225 629 368 999 495 349 120 681 187 1106 225 112 10 641 -3 770 -18z"
+       id="path2"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M5045 8784 c-729 -59 -1353 -298 -1925 -740 -149 -114 -480 -445 -594 -594 -405 -524 -638 -1090 -722 -1755 -22 -172 -25 -595 -6 -760 86 -742 352 -1362 822 -1916 176 -207 457 -462 565 -513 153 -73 342 -56 483 44 140 98 210 245 199 420 -9 156 -62 251 -211 377 -479 408 -770 907 -876 1504 -31 174 -39 528 -16 719 93 759 503 1435 1121 1847 275 183 609 315 946 372 442 76 912 34 1329 -116 593 -214 1089 -664 1375 -1248 194 -396 270 -726 270 -1165 -1 -320 -34 -522 -135 -815 -143 -414 -360 -722 -786 -1116 -311 -287 -141 -788 284 -834 71 -8 180 13 256 51 97 47 353 285 519 482 474 563 751 1223 818 1954 17 188 6 625 -19 798 -99 656 -347 1220 -760 1730 -118 144 -361 385 -514 507 -520 416 -1102 662 -1770 748 -118 16 -543 28 -653 19z"
+       id="path4"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M5175 6514 c-92 -14 -198 -39 -260 -61 -458 -165 -766 -607 -768 -1103 -1 -309 89 -544 306 -792 141 -160 207 -284 259 -481 21 -80 22 -101 27 -972 l6 -890 24 -60 c79 -199 237 -332 440 -372 282 -56 561 117 657 407 17 51 19 120 24 935 6 867 6 881 28 958 51 183 137 343 254 474 207 230 308 486 308 782 0 328 -118 612 -349 842 -171 170 -340 263 -576 314 -69 16 -321 28 -380 19z"
+       id="path6"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M39255 8795 c-156 -35 -252 -89 -375 -214 -79 -79 -103 -111 -137 -181 -23 -47 -50 -112 -60 -145 -17 -57 -18 -203 -21 -2915 -2 -2552 -1 -2863 13 -2933 31 -154 97 -272 219 -392 93 -91 176 -144 291 -183 l80 -27 1972 -3 c2216 -3 2045 -8 2213 74 82 41 109 61 196 148 87 87 107 114 147 196 56 113 77 207 77 338 -1 222 -69 380 -232 538 -87 85 -141 122 -228 159 -131 55 -109 54 -1270 57 -591 2 -1274 4 -1517 6 l-443 2 -2 2433 -3 2432 -23 73 c-86 279 -301 480 -574 536 -92 19 -240 20 -323 1z"
+       id="path8"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M12765 8744 c-101 -17 -243 -74 -332 -136 -160 -109 -287 -325 -313 -531 -10 -84 -2 -193 21 -280 9 -37 516 -1310 1838 -4620 424 -1062 439 -1096 540 -1209 63 -71 201 -159 301 -192 130 -43 243 -53 364 -32 163 27 276 83 399 196 130 120 126 111 585 1263 231 578 735 1842 1120 2807 530 1328 705 1776 718 1840 59 295 -87 628 -344 784 -226 137 -480 151 -719 41 -147 -68 -257 -165 -333 -294 -21 -36 -377 -914 -790 -1950 l-753 -1884 -756 1890 c-416 1039 -772 1916 -791 1949 -48 81 -170 202 -255 252 -114 67 -240 104 -365 107 -58 2 -118 1 -135 -1z"
+       id="path10"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M26688 8740 c-304 -52 -566 -312 -619 -614 -18 -104 -7 -273 24 -369 75 -231 263 -414 512 -498 l70 -24 792 -3 793 -3 2 -2442 3 -2442 23 -70 c87 -258 284 -451 528 -516 108 -29 287 -29 396 -1 270 72 486 299 544 571 11 55 14 457 14 2484 l0 2417 753 0 c474 0 776 4 816 11 164 26 285 91 416 223 151 152 214 307 215 523 0 116 -11 179 -47 277 -66 176 -234 350 -413 426 -140 59 58 54 -2465 56 -1270 1 -2331 -2 -2357 -6z"
+       id="path12"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M34355 8735 c-232 -43 -433 -192 -538 -402 -33 -64 -2231 -5575 -2255 -5652 -13 -42 -17 -90 -17 -196 1 -131 3 -146 32 -227 78 -220 214 -370 416 -455 112 -47 194 -64 307 -65 143 0 264 32 382 103 119 70 223 181 285 304 12 22 357 879 768 1905 411 1026 750 1868 754 1872 3 4 339 -826 745 -1845 406 -1018 755 -1885 775 -1925 133 -274 456 -451 752 -413 109 14 155 29 279 88 79 38 107 59 180 132 71 71 94 103 133 181 89 180 112 363 68 530 -22 86 -2217 5595 -2263 5682 -150 281 -487 442 -803 383z"
+       id="path14"
+       style="fill:#9b59b6;fill-opacity:1" />
+    <path
+       d="M19760 8661 c-129 -35 -236 -96 -337 -194 -264 -253 -298 -670 -80 -966 23 -31 467 -625 987 -1321 l945 -1265 5 -1255 5 -1255 24 -70 c65 -194 179 -338 343 -437 106 -63 202 -90 343 -95 153 -6 238 11 364 73 169 83 316 254 379 441 l27 78 5 1250 5 1250 1021 1280 c561 704 1039 1305 1062 1335 94 127 137 261 135 430 -2 240 -95 431 -283 581 -141 113 -312 167 -495 156 -199 -13 -348 -76 -478 -205 -29 -28 -421 -512 -872 -1075 l-819 -1025 -763 1018 c-419 561 -781 1040 -805 1066 -133 145 -329 224 -548 223 -68 0 -128 -6 -170 -18z"
+       id="path16"
+       style="fill:#9b59b6;fill-opacity:1" />
+  </g>
+</svg>
diff --git a/src/App.css b/src/App.css
index c6faecf..3224692 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,22 @@
+:root {
+ --text: #212121; 
+ --background: #fff;
+   --scrollbar: #ccc;
+}
+
+body {
+  color: var(--text);
+  background-color: var(--background);
+  font-size: 15px;
+  line-height: 22px;
+  width: 370px;
+  margin-right: 2px;
+}
+
 .title {
   font-weight: 600;
-  margin: 3px 0 0 0;
+  font-size: 16px;
+  margin: 6px 0 0 0;
 }
 
 table {
@@ -8,7 +24,15 @@ table {
 }
 
 tr {
-  margin: 3px 0;
+  margin: 8px 0;
+}
+
+td {
+  vertical-align: top;
+}
+
+.column-one {
+  width: 150px;
 }
 
 .itemWrap {
@@ -18,4 +42,21 @@ tr {
 
 .flagWrap {
   margin: 0 0 0 6px;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+::-webkit-scrollbar-track {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar);
+  border-radius: 2px;
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 4531e22..962df8a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -45,7 +45,7 @@ const App = () => {
 
     navigator.getBattery().then((battery) => {
       updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
-      updateDOM('batteryStatus', `${battery.charging ? '' : 'not'} charging`);
+      updateDOM('batteryStatus', battery.charging ? 'Charging' : 'Not charging');
     });
 
     updateDOM('memory', `${navigator.deviceMemory}GB`);
@@ -59,8 +59,7 @@ const App = () => {
   return (
     <div className="App">
       <table>
-        <col style="width:40%" />
-        <col style="width:60%" />
+        <col className="column-one" />
         <div className="title">Connection</div>
         <tr>
           <td>IP address:</td>
@@ -143,26 +142,26 @@ const App = () => {
         <tr>
           <td>Cookies enabled:</td>
           <td>
-            <div id="cookies" />
+            <div className="capitalize" id="cookies" />
           </td>
         </tr>
         <tr>
           <td>Java enabled:</td>
           <td>
-            <div id="java" />
+            <div className="capitalize" id="java" />
           </td>
         </tr>
         <tr>
           <td>DNT header enabled:</td>
           <td>
-            <div id="dnt" />
+            <div className="capitalize" id="dnt" />
           </td>
         </tr>
         <div className="title">Hardware</div>
         <tr>
           <td>Platform:</td>
           <td>
-            <div id="platform" />
+            <div className="capitalize" id="platform" />
           </td>
         </tr>
         <tr>
diff --git a/src/popup.css b/src/popup.css
index bd5a04f..2d5ec5c 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -1,6 +1,7 @@
-:root {
+/* :root {
  --text: #212121; 
  --background: #fff;
+   --scrollbar: #ccc;
 }
 
 body {
@@ -8,5 +9,5 @@ body {
   background-color: var(--background);
   font-size: 15px;
   line-height: 22px;
-  width: 400px;
-}
\ No newline at end of file
+  width: 380px;
+} */
\ No newline at end of file