UI improvments

Author: luloxi

packages/nextjs/components/Footer.tsx

@@ -5,7 +5,14 @@ import Create from "../app/create/Create";
 import Modal from "../app/create/Modal";
 import { useAccount } from "wagmi";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { BellIcon, EnvelopeIcon, HomeIcon, MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/solid";
+import {
+  BellIcon,
+  EnvelopeIcon,
+  HomeIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  ShoppingCartIcon,
+} from "@heroicons/react/24/solid";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export const Footer = () => {
@@ -105,6 +112,13 @@ export const Footer = () => {
         </div>
       </div>
       <footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-around items-center">
+        <Link href="/not-found" passHref>
+          <ShoppingCartIcon
+            className={`h-6 w-6 text-red-600 ${
+              pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
+            }`}
+          />
+        </Link>
         <Link href="/not-found" passHref>
           <EnvelopeIcon
             className={`h-6 w-6 text-red-600 ${
@@ -124,6 +138,7 @@ export const Footer = () => {
         <Link href="/" passHref>
           <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`} />
         </Link>
+
         <Link href="/search" passHref>
           <MagnifyingGlassIcon
             className={`h-6 w-6 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}

packages/nextjs/components/Header.tsx

@@ -8,6 +8,7 @@ import { PunkBalance } from "./punk-society/PunkBalance";
 import { PunkConnectButton } from "./punk-society/PunkConnectButton";
 import { FaucetButton } from "./scaffold-eth";
 import { useAccount } from "wagmi";
+import { ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { BellIcon, EnvelopeIcon, HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
@@ -116,16 +117,25 @@ export const Header = () => {
       </div>
 
       <div className="navbar-end relative lg:mr-2">
-        <div className="flex justify-center items-center  ">
-          <div className="hidden md:flex lg:mr-2">
+        <div className="flex justify-center items-center gap-3">
+          <Link href="/not-found" passHref>
+            <button
+              className={`p-2 rounded-full bg-red-600 text-white border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+                pathname === "/shoppingcart" ? "text-blue-600" : ""
+              }`}
+            >
+              <ShoppingCartIcon className="h-6 w-6" />
+            </button>
+          </Link>
+          <div className="hidden md:flex">
             <PunkBalance address={connectedAddress} />
           </div>
 
           <div className="flex items-center justify-center">
             <PunkConnectButton />
           </div>
 
-          <div className="mr-4">
+          <div className="">
             <FaucetButton />
           </div>
         </div>

packages/nextjs/components/punk-society/PostCard.tsx

@@ -6,7 +6,7 @@ import CommentSection from "./CommentSection";
 import LikeButton from "./LikedButton";
 import { ProfileAddress } from "./ProfileAddress";
 import {
-  ArrowUturnUpIcon,
+  BookmarkIcon,
   ChatBubbleLeftIcon,
   MagnifyingGlassPlusIcon,
   ShareIcon,
@@ -107,14 +107,15 @@ export const PostCard = ({ post, isGrid }: { post: Post; isGrid: boolean }) => {
                   <ChatBubbleLeftIcon className="comment-icon" />
                 )}
               </button>
-              <button className="icon-button">
-                <ArrowUturnUpIcon className="repost-icon text-red-600" />
-              </button>
               <button onClick={handleShare} className="icon-button">
                 <ShareIcon className="repost-icon " />
               </button>
             </div>
             <div className="flex items-center gap-3">
+              <button className="p-2 rounded-full bg-red-600 text-white">
+                <BookmarkIcon className="h-5 w-5" />
+              </button>
+
               <button className="px-4 py-2 rounded-lg bg-red-600 text-white">Buy</button>
               <button className="p-2 rounded-full bg-red-600 text-white">
                 <ShoppingCartIcon className="h-5 w-5" />