polishing ntf details page

ongama-team · Sep 5, 2022 · 3cadcee · 3cadcee
1 parent c3ef1c9
commit 3cadcee
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/components/NftDetailsPage/NftDetailTabs/index.tsx b/components/NftDetailsPage/NftDetailTabs/index.tsx
@@ -3,35 +3,35 @@ import React from "react";
 
 const NftsDetailTabs = () => {
   return (
-    <Tab.List className="my-12 dark:text-white">
+    <Tab.List className="my-6 dark:text-white">
       <Tab.List
         className={
-          "text-gray-600 flex justify-between space-x-6 mx-auto max-w-md mt-3 bg-gray-100 dark:bg-darkLight p-1 rounded-md"
+          "text-gray-600 flex justify-between mx-auto max-w-md mt-3 bg-gray-100 dark:bg-darkLight p-1 rounded-md"
         }
       >
         <Tab
           className={({ selected }) =>
             selected
-              ? " 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"
+              ? " w-full text-gray-900 p-3 rounded-md bg-white font-semibold dark:bg-darkPrimary transition-all dark:text-white"
+              : "text-black p-2 w-full dark:bg-transparent dark:text-gray-300 transition-all"
           }
         >
           Overview
         </Tab>
         <Tab
           className={({ selected }) =>
             selected
-              ? " 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"
+              ? " w-full text-gray-900 p-3 rounded-md  bg-white font-semibold dark:text-white dark:bg-darkPrimary transition-all"
+              : "text-black p-2 w-full dark:bg-transparent dark:text-gray-300 transition-all"
           }
         >
           Bids
         </Tab>
         <Tab
           className={({ selected }) =>
             selected
-              ? " 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"
+              ? " w-full text-gray-900 p-3 rounded-md  bg-white font-semibold dark:text-white dark:bg-darkPrimary transition-all"
+              : "text-black w-full p-2 dark:bg-transparent dark:text-gray-300 transition-all"
           }
         >
           History

diff --git a/components/NftDetailsPage/index.tsx b/components/NftDetailsPage/index.tsx
@@ -110,7 +110,7 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
                   className="w-12 h-12 object-cover rounded-full"
                 />
                 <div>
-                  <p className="text-gray-500 text-[15px]  dark:text-gray-300">
+                  <p className="text-gray-500 text-[15px] font-semibold dark:text-gray-300">
                     Current owner
                   </p>
                   <p className=" dark:text-white">{nft.owner.username}</p>
@@ -163,7 +163,9 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
 
             <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  dark:text-gray-200">Price</p>
+                <p className="text-gray-700 font-semibold dark:text-gray-200">
+                  Price
+                </p>
                 <p className=" dark:text-white font-semibold">
                   {nft.price} MATIC
                 </p>
@@ -176,7 +178,7 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
           </section>
         </div>
         <div>
-          <h1 className="text-2xl py-10 text-center  dark:text-white">
+          <h1 className="text-2xl py-10 text-center font-semibold dark:text-white">
             More from the owner
           </h1>
         </div>

diff --git a/components/NftDetailsPage/modules/NftOverview/index.tsx b/components/NftDetailsPage/modules/NftOverview/index.tsx
@@ -14,20 +14,20 @@ interface IProps {
 const NftOverView: FC<IProps> = ({ nft }) => {
   return (
     <Tab.Panel>
-      <div className="pt-6">
-        <h2 className="text-2xl dark:text-white">Description</h2>
+      <div className="pt-4">
+        <h2 className="text-2xl font-semibold 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 dark:text-white">Latest Bids</h2>
+        <h2 className="text-2xl font-semibold 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 dark:text-white">Details</h2>
+        <h2 className="text-2xl font-semibold 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">

diff --git a/components/modules/__modules__/Card/NFTCard/index.tsx b/components/modules/__modules__/Card/NFTCard/index.tsx
@@ -159,7 +159,7 @@ const NFTCard: FC<Props> = ({
         <section className="h-[18%] flex items-center justify-between bg-slate-100 dark:bg-darkLight rounded-xl mt-2 py-2 px-3">
           <ShowWidget condition={!useAsPreview}>
             <div>
-              <p className="text-sm text-gray-500 dark:text-gray-400 font-thine">
+              <p className="text-sm text-gray-500 font-semibold dark:text-gray-400 font-thine">
                 {!isAuction ? "Price" : "Time left"}
               </p>
               {!isAuction ? (