polishing ntf details page

components/NftDetailsPage/NftDetailTabs/index.tsx

@@ -12,26 +12,26 @@ const NftsDetailTabs = () => {
         <Tab
           className={({ selected }) =>
             selected
-              ? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:bg-darkPrimary transition-all dark:text-white"
-              : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
+              ? " w-full text-gray-900 p-3 rounded-md bg-white dark:bg-darkPrimary transition-all dark:text-white"
+              : "text-black p-2 w-full dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
           }
         >
           Overview
         </Tab>
         <Tab
           className={({ selected }) =>
             selected
-              ? "font-extrabold text-gray-900 p-3 rounded-md  bg-white dark:text-white dark:bg-darkPrimary transition-all"
-              : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
+              ? " w-full text-gray-900 p-3 rounded-md  bg-white dark:text-white dark:bg-darkPrimary transition-all"
+              : "text-black p-2 w-full dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
           }
         >
           Bids
         </Tab>
         <Tab
           className={({ selected }) =>
             selected
-              ? "font-extrabold text-gray-900 p-3 rounded-md  bg-white dark:text-white dark:bg-darkPrimary transition-all"
-              : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
+              ? " w-full text-gray-900 p-3 rounded-md  bg-white dark:text-white dark:bg-darkPrimary transition-all"
+              : "text-black w-full p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
           }
         >
           History

components/NftDetailsPage/index.tsx

@@ -20,6 +20,7 @@ import { List } from "antd";
 import Link from "next/link";
 import React, { FC, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
+import History from "./modules/History";
 import NftBid from "./modules/NftBid";
 import NftOverView from "./modules/NftOverview";
 import NftsDetailTabs from "./NftDetailTabs";
@@ -91,6 +92,7 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
               <Tab.Panels>
                 <NftOverView nft={nft} />
                 <NftBid />
+                <History />
               </Tab.Panels>
             </Tab.Group>
           </section>
@@ -108,12 +110,10 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
                   className="w-12 h-12 object-cover rounded-full"
                 />
                 <div>
-                  <p className="text-gray-500 font-bold dark:text-gray-300">
+                  <p className="text-gray-500 text-[15px]  dark:text-gray-300">
                     Current owner
                   </p>
-                  <p className="font-bold dark:text-white">
-                    {nft.owner.username}
-                  </p>
+                  <p className=" dark:text-white">{nft.owner.username}</p>
                 </div>
               </div>
             </Link>
@@ -124,17 +124,17 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
                   <span>
                     <HeartVector className="h-6 w-6" />
                   </span>
-                  <span className="font-bold">0</span>
+                  <span className="">0</span>
                 </p>
                 <p
                   role="button"
                   onClick={toggleShareContainer}
                   className="flex items-center gap-2 cursor-pointer hover:text-black hover:dark:text-white transition-all"
                 >
-                  <span className="font-bold text-2xl">
+                  <span className=" text-2xl">
                     <VShare />
                   </span>
-                  <span className="font-bold">Share</span>
+                  <span className="">Share</span>
                 </p>
               </div>
               <p
@@ -155,29 +155,29 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
                   !isNftOptions
                     ? "scale-0 transition-all"
                     : "scale-100 transition-all"
-                } absolute right-0 mt-20 bg-white py-5 px-3 border shadow-lg rounded-lg font-bold dark:bg-darkLight dark:border-gray-600 cursor-pointer transition-all dark:hover:text-white hover:text-black`}
+                } absolute right-0 mt-20 bg-white py-5 px-3 border shadow-lg rounded-lg  dark:bg-darkLight dark:border-gray-600 cursor-pointer transition-all dark:hover:text-white hover:text-black`}
               >
                 <p>Report this NFT</p>
               </div>
             </div>
 
             <div className="border pt-5 px-5 mt-5 rounded-lg dark:border-gray-600">
               <div className="bg-gray-100 dark:bg-darkLight py-5 px-3 rounded-lg flex flex-col gap-1">
-                <p className="text-gray-700 font-bold dark:text-gray-200">
-                  Price
+                <p className="text-gray-700  dark:text-gray-200">Price</p>
+                <p className=" dark:text-white font-semibold">
+                  {nft.price} MATIC
                 </p>
-                <p className="font-bold dark:text-white">{nft.price} MATIC</p>
               </div>
 
-              <button className="bg-blue-600 w-full py-2 my-5 text-white font-bold rounded-lg hover:bg-blue-700 transition-all">
+              <button className="bg-blue-600 w-full font-semibold py-2 my-5 text-white  rounded-lg hover:bg-blue-700 transition-all">
                 Buy now for {nft.price} MATIC
               </button>
             </div>
           </section>
         </div>
         <div>
-          <h1 className="text-2xl py-10 text-center font-bold dark:text-white">
-            More from The Owner
+          <h1 className="text-2xl py-10 text-center  dark:text-white">
+            More from the owner
           </h1>
         </div>
         <div

components/NftDetailsPage/modules/History/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { VFlash, VHistory } from "@components/modules/__modules__/_vectors";
+import { Tab } from "@headlessui/react";
+
+const History = () => {
+  return (
+    <Tab.Panel>
+      <div className="flex flex-col gap-4 text-gray-600 dark:text-gray-500 justify-center items-center border h-36 mb-10 rounded-lg">
+        <VHistory className="w-6 h-6" />
+        <p>No History yet.</p>
+      </div>
+    </Tab.Panel>
+  );
+};
+
+export default History;

components/NftDetailsPage/modules/NftBid/index.tsx

@@ -5,13 +5,9 @@ import { Tab } from "@headlessui/react";
 const NftBid = () => {
   return (
     <Tab.Panel>
-      <div className="flex flex-col gap-4 text-gray-700 dark:text-gray-500 justify-center items-center border h-36 mb-10 rounded-lg">
-        <p>
-          <VFlash />
-        </p>
-        <p className="font-bold">
-          No active bids yet. Be the first to make a bid!
-        </p>
+      <div className="flex flex-col gap-4 text-gray-600 dark:text-gray-500 justify-center items-center border h-36 mb-10 rounded-lg">
+        <VFlash className="w-4 h-4" />
+        <p>No active bids yet. Be the first to make a bid!</p>
       </div>
     </Tab.Panel>
   );

components/NftDetailsPage/modules/NftOverview/index.tsx

@@ -7,8 +7,6 @@ import {
   PolygonVectorSolid,
 } from "@components/modules/__modules__/_vectors/polygonVector";
 import { VEye } from "@components/modules/__modules__/_vectors";
-import Link from "next/link";
-
 interface IProps {
   nft: NFTData;
 }
@@ -17,24 +15,24 @@ const NftOverView: FC<IProps> = ({ nft }) => {
   return (
     <Tab.Panel>
       <div className="pt-6">
-        <h2 className="text-2xl font-bold dark:text-white">Description</h2>
-        <p className="text-gray-500 font-bold py-2 dark:text-gray-200">
+        <h2 className="text-2xl dark:text-white">Description</h2>
+        <p className="text-gray-500 py-2 dark:text-gray-200">
           {nft.description}
         </p>
       </div>
       <div className="pt-6">
-        <h2 className="text-2xl font-bold dark:text-white">Latest Bids</h2>
-        <div className="border dark:border-gray-600 dark:text-gray-200 py-5 px-3 my-2 rounded-lg text-gray-500 font-bold">
+        <h2 className="text-2xl dark:text-white">Latest Bids</h2>
+        <div className="border dark:border-gray-600 dark:text-gray-200 py-5 px-3 my-2 rounded-lg text-gray-500">
           No bids yet.
         </div>
       </div>
       <div className="py-6">
-        <h2 className="text-2xl font-bold dark:text-white">Details</h2>
+        <h2 className="text-2xl dark:text-white">Details</h2>
         <div className="border py-5 px-3 mt-3 rounded-lg dark:border-gray-600">
           <ul className="flex flex-col justify-center gap-5">
             <li className="flex items-center gap-3 text-gray-700 dark:text-gray-200">
               <PolygonVectorOutLine className="w-6 h-6" />
-              <p className="font-bold">Polygon ERC-721</p>
+              <p>Polygon ERC-721</p>
             </li>
             <a
               href={`https://polygonscan.com/tx/${nft.mintTransactionHash}`}
@@ -43,15 +41,13 @@ const NftOverView: FC<IProps> = ({ nft }) => {
             >
               <li className="flex items-center gap-3 text-gray-700 dark:hover:text-white dark:text-gray-200 hover:text-black cursor-pointer">
                 <PolygonVectorSolid className="w-6 h-6 transition-all" />
-                <p className="font-bold transition-all">View on Polygonscan</p>
+                <p className=" transition-all">View on Polygonscan</p>
               </li>
             </a>
             <a href={nft?.url} target="_blank" rel="noreferrer">
               <li className="flex items-center gap-3 text-gray-700 dark:hover:text-white dark:text-gray-200 hover:text-black cursor-pointer">
-                <VEye className="w-6 h-6 transition-all" />
-                <p className="font-bold transition-all">
-                  Open original on IPFS
-                </p>
+                <VEye className="w-5 h-5 transition-all" />
+                <p className=" transition-all">Open original on IPFS</p>
               </li>
             </a>
           </ul>

components/modules/__modules__/Card/NFTCard/index.tsx

@@ -133,7 +133,7 @@ const NFTCard: FC<Props> = ({
           <div className="flex justify-between items-center">
             <ShowWidget condition={!useAsPreview}>
               <div className="flex mr-1 items-center">
-                <h2 className="text-sm font-bold mt-2 text-black dark:text-white">
+                <h2 className="text-sm font-semibold tracking-[.01em] text-[16px] mt-2 text-black dark:text-white">
                   {nft?.name}
                 </h2>
                 {nft?.owner.verified && (

components/modules/__modules__/_vectors/index.tsx

@@ -39,8 +39,10 @@ import { IoShareOutline as VShare, IoFlash as VFlash } from "react-icons/io5";
 import { ImInfinite as VInfinite } from "react-icons/im";
 import { MdOutlineTimelapse as VTimeLapse } from "react-icons/md";
 import { RiUserLine as VUser } from "react-icons/ri";
-import { TiFlash as Vflash } from "react-icons/ti";
-import { BiTransfer as VTransaction } from "react-icons/bi";
+import {
+  BiTransfer as VTransaction,
+  BiHistory as VHistory,
+} from "react-icons/bi";
 import { CgSpinnerTwo as VSpinner } from "react-icons/cg";
 import { GoPrimitiveDot as VSingleDot } from "react-icons/go";
 import { FiEye as VEye } from "react-icons/fi";
@@ -78,7 +80,7 @@ export {
   VPlusCircleFill,
   VQuestionMark,
   VUser,
-  Vflash,
+  VHistory,
   VTransaction,
   VFillHeart,
   VSpinner,