client/src/Header.tsx

@@ -5,42 +5,44 @@ import ThemeToggler from "./ThemeToggler";
 
 function Header() {
   return (
-    <header className="flex items-center bg-nord-1 text-nord-5 py-3 px-2">
+    <header className="bg-nord-1 text-nord-5 py-3 px-2">
-      <a
+      <div className="flex container items-center mx-auto">
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://github.com/CrispyBaguette/wasm-palette-converter"
-      >
-        <FontAwesomeIcon
-          icon={faGithub}
-          className="fa-2x hover:text-nord-7 mx-2"
-        />
-      </a>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://blog.bruyant.xyz"
-      >
-        <FontAwesomeIcon
-          icon={faIgloo}
-          className="fa-2x hover:text-nord-7 mx-2"
-        />
-      </a>
-      <span className="text-sm">
-        Powered by{" "}
         <a
-          href="https://ipfs.io"
           target="_blank"
-          rel="noreferrer"
+          rel="noopener noreferrer"
-          className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
+          href="https://github.com/CrispyBaguette/wasm-palette-converter"
         >
-          IPFS
+          <FontAwesomeIcon
+            icon={faGithub}
+            className="fa-2x hover:text-nord-7 mx-2"
+          />
         </a>
-        . Visit using your own node !
+        <a
-      </span>
+          target="_blank"
-      <span className="ml-auto">
+          rel="noopener noreferrer"
-        <ThemeToggler />
+          href="https://blog.bruyant.xyz"
-      </span>
+        >
+          <FontAwesomeIcon
+            icon={faIgloo}
+            className="fa-2x hover:text-nord-7 mx-2"
+          />
+        </a>
+        <span className="text-sm">
+          Powered by{" "}
+          <a
+            href="https://ipfs.io"
+            target="_blank"
+            rel="noreferrer"
+            className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
+          >
+            IPFS
+          </a>
+          . Visit using your own node !
+        </span>
+        <span className="ml-auto">
+          <ThemeToggler />
+        </span>
+      </div>
     </header>
   );
 }