From bd81d9beadea084da11e8106094650ec269c4e56 Mon Sep 17 00:00:00 2001 From: Luciano Oliva Bianco <lulox.eth@protonmail.com> Date: Tue, 24 Sep 2024 17:54:05 -0300 Subject: [PATCH] UI improvements --- packages/nextjs/components/Header.tsx | 35 +++++++++++++++------------ packages/nextjs/package.json | 2 ++ 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 7af1f9a..109a02d 100644 --- 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 index b3a51da..59c7c0b 100644 --- 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",