UI improvements

luloxi · Sep 24, 2024 · bd81d9b · bd81d9b
1 parent 9db4647
commit bd81d9b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -4,9 +4,11 @@ import React, { useCallback, useRef, useState } from "react";
 // import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import Image from "next/image";
 import { useAccount } from "wagmi";
-import { PlusIcon } from "@heroicons/react/24/solid";
+// import { PlusIcon } from "@heroicons/react/24/solid";
 // import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useScaffoldReadContract } from "~~/hooks/scaffold-eth";
@@ -119,34 +121,37 @@ export const Header = () => {
 
   return (
     <div className="sticky lg:sticky top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
-      <div className="navbar-start ml-2 lg:ml-0">
+      <div className="navbar-start ml-4 ">
+        <Link href="/" passHref>
+          <span className={`text-3xl font-bold ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`}>
+            DARTE
+          </span>
+        </Link>
+      </div>
+
+      <div className="navbar-center flex-1 flex justify-center items-center">
         <Link href="/create" passHref>
           <button
-            className={`btn btn-ghost hidden lg:flex flex-col items-center justify-center text-3xl ${
+            className={`btn btn-ghost hidden lg:flex flex-row items-center justify-center text-2xl ${
               pathname === "/create" ? "text-blue-600" : ""
             }`}
           >
-            <PlusIcon className="h-6 w-6" />
+            <div className="flex flex-row items-center justify-center gap-2">
+              <FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
+              <span>Create</span>
+            </div>
           </button>
           <button
-            className={`font-bold ml-2 lg:hidden flex items-center justify-center text-3xl ${
+            className={`font-bold lg:hidden flex items-center justify-center text-3xl ${
               pathname === "/create" ? "text-blue-600" : ""
             }`}
           >
-            <PlusIcon className="h-6 w-6" />
+            <FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
           </button>
         </Link>
       </div>
 
-      <div className="navbar-center flex-1 flex justify-center items-center">
-        <Link href="/" passHref>
-          <span className={`text-3xl font-bold ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`}>
-            DARTE
-          </span>
-        </Link>
-      </div>
-
-      <div className="navbar-end pr-4 relative" ref={menuRef}>
+      <div className="navbar-end mr-4 relative" ref={menuRef}>
         {isConnected ? (
           // <>
 

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -14,6 +14,8 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@heroicons/react": "~2.0.11",
     "@rainbow-me/rainbowkit": "2.1.2",
     "@tanstack/react-query": "~5.28.6",