From 113f57d1dde48a3da4e6812fa69eb0a13f5b4987 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@protonmail.com>
Date: Sun, 15 May 2022 16:03:12 -0400
Subject: [PATCH] Added Header bar

---
 src/components/App.js        |  2 --
 src/components/Blocks.css    |  2 ++
 src/components/HeaderBar.js  | 27 +++++++++++++++
 src/components/Logo.css      |  5 ---
 src/components/Logo.js       | 12 -------
 src/components/MainColumn.js | 15 ++++++---
 src/images/logo.svg          | 64 ++++++++++--------------------------
 7 files changed, 57 insertions(+), 70 deletions(-)
 create mode 100644 src/components/HeaderBar.js
 delete mode 100644 src/components/Logo.js

diff --git a/src/components/App.js b/src/components/App.js
index 3c140d3..6f449d8 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,10 +1,8 @@
 import './App.css';
-import GitHub from './GitHub';
 import MainColumn from './MainColumn';
 
 const App = () => (
   <div className="App">
-    <GitHub />
     <div className="background" />
     <MainColumn />
   </div>
diff --git a/src/components/Blocks.css b/src/components/Blocks.css
index 0b9cdd6..9722ef5 100644
--- a/src/components/Blocks.css
+++ b/src/components/Blocks.css
@@ -11,6 +11,8 @@
 
 .loadBlock {
   margin: 0 12px 12px 12px !important;
+  min-width: 1024px;
+  
 }
 
 @media screen and (max-width: 575px) {
diff --git a/src/components/HeaderBar.js b/src/components/HeaderBar.js
new file mode 100644
index 0000000..cc3127c
--- /dev/null
+++ b/src/components/HeaderBar.js
@@ -0,0 +1,27 @@
+import './Logo.css';
+import { ReactComponent as LogoImg } from '../images/logo.svg';
+
+const HeaderBar = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '1024px',
+    }}
+  >
+    <a
+      href="."
+      style={{
+        width: '180px',
+        margin: '18px 0',
+      }}
+      alt="LocateJS logo"
+    >
+      <LogoImg />
+    </a>
+    <div>Download</div>
+  </div>
+);
+
+export default HeaderBar;
diff --git a/src/components/Logo.css b/src/components/Logo.css
index a575b74..5bcc053 100644
--- a/src/components/Logo.css
+++ b/src/components/Logo.css
@@ -4,11 +4,6 @@
   justify-content: center;
 }
 
-.logo {
-  width: 225px;
-  margin: 24px 0 18px 0;
-}
-
 @media screen and (max-width: 575px) {
   .logo {
     width: 160px;
diff --git a/src/components/Logo.js b/src/components/Logo.js
deleted file mode 100644
index c18709c..0000000
--- a/src/components/Logo.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import './Logo.css';
-import { ReactComponent as LogoImg } from '../images/logo.svg';
-
-const Logo = () => (
-  <div className="logoWrap">
-    <a href="." className="logo" alt="LocateJS logo">
-      <LogoImg />
-    </a>
-  </div>
-);
-
-export default Logo;
diff --git a/src/components/MainColumn.js b/src/components/MainColumn.js
index 3109a39..3a35b7d 100644
--- a/src/components/MainColumn.js
+++ b/src/components/MainColumn.js
@@ -1,14 +1,21 @@
 import './MainColumn.css';
-import Logo from './Logo';
+import HeaderBar from './HeaderBar';
 import Blocks from './Blocks';
 
 const MainColumn = () => (
-  <>
-    <Logo />
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      width: '100%',
+    }}
+  >
+    <HeaderBar />
     <div className="centerBlockOuter">
       <Blocks />
     </div>
-  </>
+  </div>
 );
 
 export default MainColumn;
diff --git a/src/images/logo.svg b/src/images/logo.svg
index dc5bbd4..a4a0eb6 100644
--- a/src/images/logo.svg
+++ b/src/images/logo.svg
@@ -1,48 +1,18 @@
 <svg
-   version="1.0"
-   viewBox="0 0 2499.4541 511.75159"
-   preserveAspectRatio="xMidYMid meet">
-  <g
-     transform="matrix(0.1,0,0,-0.1,-5.0666667,511.8606)"
-     fill="#000000"
-     stroke="none"
-     id="g2722"
-     style="fill:#ffffff">
-    <path
-       d="M 1680,5105 C 1318,5059 988,4917 711,4685 387,4415 163,4035 80,3614 52,3477 42,3197 59,3065 139,2455 531,1669 1206,763 1435,456 1742,81 1806,31 c 56,-44 143,-39 201,12 48,42 315,363 467,560 757,988 1193,1837 1267,2471 17,142 7,403 -21,540 -85,430 -317,817 -654,1091 -389,315 -894,461 -1386,400 z m 373,-920 c 355,-62 640,-315 743,-660 36,-122 44,-313 19,-436 -58,-289 -241,-528 -502,-659 -229,-114 -515,-126 -753,-32 -152,61 -305,175 -399,298 -63,84 -133,223 -161,324 -28,96 -38,290 -21,396 82,505 572,857 1074,769 z"
-       id="path2704"
-       style="fill:#ffffff" />
-    <path
-       d="m 5156,4363 c -66,-17 -137,-96 -156,-173 -8,-32 -10,-516 -8,-1665 l 3,-1620 22,-40 c 25,-47 64,-85 113,-111 34,-18 79,-19 1071,-19 h 1036 l 48,30 c 75,47 109,101 113,185 2,38 -1,84 -8,105 -15,45 -59,96 -108,127 l -37,23 -885,5 -885,5 -5,1500 c -5,1375 -6,1503 -22,1530 -23,43 -77,91 -120,109 -35,15 -130,20 -172,9 z"
-       id="path2706"
-       style="fill:#ffffff" />
-    <path
-       d="m 16280,4359 c -45,-19 -89,-59 -117,-107 l -28,-47 -3,-462 -3,-461 -88,-4 c -77,-3 -94,-7 -137,-33 -136,-85 -152,-277 -31,-380 50,-43 90,-55 184,-55 h 72 l 4,-667 c 5,-720 5,-730 61,-895 91,-272 300,-440 619,-497 107,-19 263,-25 311,-11 99,27 170,121 169,225 0,69 -18,117 -62,167 -41,47 -95,68 -195,74 -102,8 -189,29 -242,59 -53,31 -121,105 -143,158 -39,90 -41,131 -41,767 v 618 l 183,4 182,3 46,33 c 125,90 138,263 27,369 -58,56 -89,63 -273,63 h -165 v 424 c 0,245 -4,446 -10,477 -13,65 -48,118 -103,155 -35,24 -54,29 -117,31 -41,2 -86,-2 -100,-8 z"
-       id="path2708"
-       style="fill:#ffffff" />
-    <path
-       d="m 22290,4354 c -42,-18 -95,-67 -118,-109 -16,-27 -17,-137 -22,-1260 -6,-1372 -1,-1270 -77,-1425 -49,-100 -169,-221 -268,-272 -106,-55 -174,-72 -295,-72 -178,-1 -328,60 -451,183 -115,115 -172,245 -188,426 -10,113 -21,142 -76,197 -108,107 -289,84 -370,-46 -26,-42 -30,-61 -33,-130 -8,-180 59,-414 166,-580 349,-543 1038,-697 1561,-349 223,149 392,379 465,635 45,155 47,253 44,1488 -3,1088 -4,1157 -21,1191 -25,50 -74,98 -122,120 -49,23 -146,24 -195,3 z"
-       id="path2710"
-       style="fill:#ffffff" />
-    <path
-       d="m 23855,4353 c -229,-49 -447,-200 -587,-406 -194,-286 -203,-695 -22,-999 67,-112 221,-267 329,-329 138,-80 216,-106 405,-134 242,-36 426,-163 520,-360 46,-97 60,-159 60,-273 0,-179 -63,-328 -189,-452 -80,-79 -152,-123 -261,-161 -84,-29 -241,-31 -345,-5 -147,38 -279,134 -391,287 -53,71 -107,99 -190,99 -165,0 -284,-159 -232,-311 45,-134 261,-346 453,-446 178,-92 325,-127 540,-126 141,0 172,3 260,27 116,30 293,115 379,180 279,212 424,469 456,808 32,337 -84,648 -334,893 -194,189 -385,281 -670,320 -215,30 -346,131 -416,322 -19,53 -22,77 -18,161 3,87 7,106 38,168 78,159 254,274 421,274 69,0 196,-36 251,-71 27,-18 70,-59 95,-93 114,-151 187,-197 286,-181 181,30 263,218 166,381 -19,31 -72,97 -118,146 -141,149 -307,244 -493,282 -97,20 -298,20 -393,-1 z"
-       id="path2712"
-       style="fill:#ffffff" />
-    <path
-       d="m 8660,3261 c -504,-93 -917,-501 -1016,-1006 -24,-123 -24,-377 -1,-498 49,-248 168,-466 353,-651 190,-190 419,-312 674,-357 97,-17 353,-17 450,0 316,56 605,236 803,500 89,119 136,208 182,344 123,368 71,787 -137,1104 -164,249 -411,440 -683,527 -170,54 -441,70 -625,37 z m 400,-473 c 244,-46 474,-237 574,-476 42,-99 58,-186 58,-307 0,-141 -19,-222 -83,-354 -45,-92 -62,-116 -148,-201 -161,-163 -309,-229 -531,-237 -237,-9 -407,53 -576,210 -127,119 -216,279 -245,442 -17,98 -7,282 21,370 47,152 144,295 264,391 192,154 420,209 666,162 z"
-       id="path2714"
-       style="fill:#ffffff" />
-    <path
-       d="m 11600,3266 c -366,-65 -661,-261 -868,-575 -250,-379 -264,-924 -35,-1316 120,-205 342,-415 548,-518 78,-39 216,-85 312,-104 121,-24 375,-24 496,0 214,43 421,142 566,273 67,60 90,109 91,190 0,129 -86,223 -211,232 -74,6 -123,-12 -204,-73 -83,-63 -227,-133 -310,-150 -89,-19 -260,-19 -347,0 -154,32 -268,96 -394,220 -102,101 -156,187 -201,320 -24,73 -27,94 -27,235 -1,136 2,164 22,230 100,318 360,533 688,570 198,22 399,-34 556,-155 31,-24 71,-51 90,-61 160,-84 348,28 348,205 -1,107 -51,174 -212,281 -138,93 -269,149 -433,185 -97,22 -378,28 -475,11 z"
-       id="path2716"
-       style="fill:#ffffff" />
-    <path
-       d="m 14175,3269 c -356,-52 -670,-255 -880,-569 -164,-245 -233,-549 -195,-860 65,-524 479,-976 991,-1080 203,-42 407,-36 608,16 110,29 287,111 385,178 75,52 86,50 86,-12 0,-116 125,-221 251,-209 65,6 104,24 149,69 72,72 70,46 70,708 0,633 -4,707 -51,862 -58,197 -165,375 -319,529 -200,201 -429,320 -700,364 -102,16 -297,18 -395,4 z m 373,-485 c 44,-10 113,-36 170,-65 165,-83 280,-199 361,-364 61,-123 83,-217 82,-355 0,-226 -86,-420 -254,-576 -116,-108 -233,-169 -380,-201 -109,-23 -298,-13 -402,21 -265,86 -468,303 -535,571 -26,101 -28,262 -4,366 34,156 146,341 262,435 204,166 438,222 700,168 z"
-       id="path2718"
-       style="fill:#ffffff" />
-    <path
-       d="m 18605,3274 c -300,-44 -517,-148 -722,-347 -209,-202 -332,-427 -378,-694 -20,-113 -19,-345 0,-459 63,-356 291,-679 621,-877 314,-188 767,-218 1116,-73 178,73 352,197 392,278 71,142 -6,306 -160,338 -74,16 -139,-4 -229,-71 -88,-65 -209,-122 -302,-143 -104,-23 -274,-21 -374,4 -192,49 -352,158 -465,317 -45,62 -104,180 -104,208 0,13 103,15 919,15 1014,0 971,-3 1039,63 70,67 83,120 71,286 -25,330 -169,614 -428,844 -163,145 -359,245 -571,292 -73,16 -359,29 -425,19 z m 372,-500 c 157,-45 261,-111 381,-239 71,-76 162,-231 162,-276 0,-18 -20,-19 -760,-19 -660,0 -760,2 -760,15 0,26 39,115 77,173 82,129 183,222 313,287 187,94 395,115 587,59 z"
-       id="path2720"
-       style="fill:#ffffff" />
-  </g>
-</svg>
+   xmlns="http://www.w3.org/2000/svg"
+   preserveAspectRatio="xMidYMid meet"
+   version="1"
+   viewBox="0 0 4389 1056"
+   style="display: block"
+   >
+   <g fill="#fff" stroke="none" transform="matrix(.1 0 0 -.1 0 1056)">
+      <path d="M4890 10554c-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-1035C523 2160 2153 526 4240 106c360-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-1zm870-978c947-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"></path>
+      <path d="M5045 8784c-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"></path>
+      <path d="M5175 6514c-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-972l6-890 24-60c79-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"></path>
+      <path d="M39255 8795c-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-183l80-27 1972-3c2216-3 2045-8 2213 74 82 41 109 61 196 148s107 114 147 196c56 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 6l-443 2-2 2433-3 2432-23 73c-86 279-301 480-574 536-92 19-240 20-323 1z"></path>
+      <path d="M12765 8744c-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-1950l-753-1884-756 1890c-416 1039-772 1916-791 1949-48 81-170 202-255 252-114 67-240 104-365 107-58 2-118 1-135-1z"></path>
+      <path d="M26688 8740c-304-52-566-312-619-614-18-104-7-273 24-369 75-231 263-414 512-498l70-24 792-3 793-3 2-2442 3-2442 23-70c87-258 284-451 528-516 108-29 287-29 396-1 270 72 486 299 544 571 11 55 14 457 14 2484v2417h753c474 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"></path>
+      <path d="M34355 8735c-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 1905s750 1868 754 1872c3 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"></path>
+      <path d="M19760 8661c-129-35-236-96-337-194-264-253-298-670-80-966 23-31 467-625 987-1321l945-1265 5-1255 5-1255 24-70c65-194 179-338 343-437 106-63 202-90 343-95 153-6 238 11 364 73 169 83 316 254 379 441l27 78 5 1250 5 1250 1021 1280c561 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-1075l-819-1025-763 1018c-419 561-781 1040-805 1066-133 145-329 224-548 223-68 0-128-6-170-18z"></path>
+   </g>
+</svg>
\ No newline at end of file