From 213f8c3b6c4c451b02d101c1c83462e756c7a113 Mon Sep 17 00:00:00 2001
From: Alexandru G <alexandrugugurel@gmail.com>
Date: Tue, 23 Jan 2024 01:11:45 +0200
Subject: [PATCH] Fix color contrast

---
 flowbite.config.ts                            |  4 +--
 src/components/ActionLink.tsx                 |  2 +-
 src/components/AssetInput.tsx                 |  6 ++--
 src/components/AssetList.tsx                  |  8 +++--
 src/components/Footer.tsx                     | 13 ++++++--
 src/components/LoadingPlaceholder.tsx         |  4 ++-
 src/pages/Create/components/Checklist.tsx     |  8 +++--
 src/pages/Create/components/Creator.tsx       | 24 +++++++-------
 src/pages/Create/components/Preview.tsx       | 23 +++++++++-----
 src/pages/Dashboard/components/Govnft.tsx     | 31 +++++++++++++------
 src/pages/Delegate/components/DelegateNft.tsx | 31 +++++++++++++------
 src/pages/Transfer/components/TransferNft.tsx | 31 +++++++++++++------
 12 files changed, 121 insertions(+), 64 deletions(-)

diff --git a/flowbite.config.ts b/flowbite.config.ts
index 0f3cc185..8110e96d 100644
--- a/flowbite.config.ts
+++ b/flowbite.config.ts
@@ -63,8 +63,8 @@ export default {
             md: "p-3 text-sm",
           },
           colors: {
-            gray: "bg-transparent border-gray-300 text-gray-900 placeholder-black/40 dark:placeholder-white/20 hover:border-opacity-70 dark:hover:border-opacity-70 focus:border-gray-400 dark:border-gray-600 dark:bg-transparent dark:text-white dark:focus:border-gray-500 outline-0",
-            info: "border-gray-900 border-opacity-10 placeholder-black/40 dark:placeholder-white/20 focus:border-opacity-30 bg-transparent text-gray-900 dark:text-white dark:border-white dark:border-opacity-10 dark:focus:border-opacity-30 dark:bg-transparent outline-0",
+            gray: "bg-transparent border-gray-300 text-gray-900 placeholder-black/40 dark:placeholder-white/20 hover:border-opacity-70 dark:hover:border-opacity-70 dark:border-gray-600 dark:bg-transparent dark:text-white outline-0",
+            info: "border-gray-900 border-opacity-10 placeholder-black/40 dark:placeholder-white/20 bg-transparent text-gray-900 dark:text-white dark:border-white dark:border-opacity-10 dark:bg-transparent outline-0",
             warning:
               "border-amber-500 bg-transparent text-yellow-500 placeholder-yellow-700 focus:border-amber-500 dark:border-yellow-700 dark:bg-amber-800 dark:bg-opacity-10 dark:focus:border-amber-600 outline-0",
           },
diff --git a/src/components/ActionLink.tsx b/src/components/ActionLink.tsx
index dc6c07c8..7c0ca7d9 100644
--- a/src/components/ActionLink.tsx
+++ b/src/components/ActionLink.tsx
@@ -22,7 +22,7 @@ export default function ActionLink({
       color="light"
       className={
         withClassName || disabled
-          ? "opacity-30 dark:opacity-20 flex items-center gap-3"
+          ? "text-gray-600 dark:text-gray-400 flex items-center gap-3"
           : "text-primary underline hover:no-underline underline-offset-2"
       }
     >
diff --git a/src/components/AssetInput.tsx b/src/components/AssetInput.tsx
index e733e7cf..f19a96fc 100644
--- a/src/components/AssetInput.tsx
+++ b/src/components/AssetInput.tsx
@@ -66,8 +66,10 @@ export default function AssetInput({
   return (
     <div>
       <div className="flex flex-col gap-1.5 sm:flex-row justify-between items-baseline mb-3">
-        <div className="text-xs opacity-30 dark:opacity-20 grow">{title}</div>
-        <div className="text-xs opacity-80 text-right flex gap-3 items-center">
+        <div className="text-xs text-gray-600 dark:text-gray-400 grow">
+          {title}
+        </div>
+        <div className="text-xs text-right flex gap-3 items-center">
           {!asset && <Spinner size="xs" color="gray" />}
 
           {asset && asset?.value && (
diff --git a/src/components/AssetList.tsx b/src/components/AssetList.tsx
index 57b0f37b..6782bc59 100644
--- a/src/components/AssetList.tsx
+++ b/src/components/AssetList.tsx
@@ -37,8 +37,10 @@ export default function AssetsList({
   return (
     <div>
       <div className="mt-8 pb-2 px-4 mx-4 flex justify-between text-xs border-b border-black/5 dark:border-white/5">
-        <span className="opacity-40">{assets.length} Tokens</span>
-        <span className="opacity-40">Balance</span>
+        <span className="text-gray-400 dark:text-gray-600">
+          {assets.length} Tokens
+        </span>
+        <span className="text-gray-400 dark:text-gray-600">Balance</span>
       </div>
 
       <div className="h-[calc(100vh-300px)] overflow-auto overflow-x-hidden pb-4 pt-2">
@@ -55,7 +57,7 @@ export default function AssetsList({
                   <div className="text-sm">{asset.symbol}</div>
                 </div>
 
-                <div className="w-1/2 text-sm opacity-40">
+                <div className="w-1/2 text-sm text-gray-600 dark:text-gray-400">
                   {asset?.value && asset.value > 0 && (
                     <div className="flex justify-end">
                       <Amount
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index a130fb1a..827ede90 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,12 +4,19 @@ export default function Footer() {
   return (
     <div className="flex justify-between items-center text-xs border-t border-black/5 dark:border-white/5 py-4 mt-24 mb-24">
       {/* @ts-ignore */}
-      <span className="opacity-40">2023 &copy; GOVNFT. {__APP_VERSION__}</span>
+      <span className="text-gray-600 dark:text-gray-400">
+        {/* @ts-ignore */}
+        2023 &copy; GOVNFT. {__APP_VERSION__}
+      </span>
       <div className="flex gap-8 items-center">
         <div className="hidden md:flex gap-2 items-center">
-          <span className="opacity-40">A public good for</span>{" "}
+          <span className="text-gray-600 dark:text-gray-400">
+            A public good for
+          </span>{" "}
           <img src="./svg/op-logo.svg" className="h-5" />
-          <span className="font-bold italic opacity-40">OPTIMISM</span>
+          <span className="font-bold italic text-gray-600 dark:text-gray-400">
+            OPTIMISM
+          </span>
         </div>
         <DarkThemeToggle />
       </div>
diff --git a/src/components/LoadingPlaceholder.tsx b/src/components/LoadingPlaceholder.tsx
index 28d3c968..b31391d6 100644
--- a/src/components/LoadingPlaceholder.tsx
+++ b/src/components/LoadingPlaceholder.tsx
@@ -4,7 +4,9 @@ export default function LoadingPlaceholder(props) {
   return (
     <div className="my-48 w-1/3 m-auto text-center space-y-6">
       <Loader />
-      <p className="text-xs opacity-30">{props.message}</p>
+      <p className="text-xs text-gray-400 dark:text-gray-600">
+        {props.message}
+      </p>
     </div>
   );
 }
diff --git a/src/pages/Create/components/Checklist.tsx b/src/pages/Create/components/Checklist.tsx
index 3b9b5491..4fdc9939 100644
--- a/src/pages/Create/components/Checklist.tsx
+++ b/src/pages/Create/components/Checklist.tsx
@@ -10,10 +10,12 @@ export default function Checklist({ toAddress, amount, vestingDuration }) {
     <>
       <div className="space-y-4 text-sm">
         <div className="text-xs pb-3 mb-6 border-b border-black/5 dark:border-white/5">
-          <span className="opacity-40 dark:opacity-20">Create a GovNFT</span>
+          <span className="text-gray-600 dark:text-gray-400">
+            Create a GovNFT
+          </span>
         </div>
         {!isAddress(toAddress) ? (
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center text-gray-600 dark:text-gray-400">
             <div className="bg-black/5 dark:bg-white/5 w-8 h-8 flex items-center justify-center mr-2 rounded">
               <WalletIcon size={14} />
             </div>
@@ -29,7 +31,7 @@ export default function Checklist({ toAddress, amount, vestingDuration }) {
         )}
 
         {!amount || amount == 0 || !vestingDuration || vestingDuration == 0 ? (
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center text-gray-600 dark:text-gray-400">
             <div className="bg-black/5 dark:bg-white/5 w-8 h-8 flex items-center justify-center mr-2 rounded">
               <CoinsIcon size={14} />
             </div>
diff --git a/src/pages/Create/components/Creator.tsx b/src/pages/Create/components/Creator.tsx
index b46f5663..f4421882 100644
--- a/src/pages/Create/components/Creator.tsx
+++ b/src/pages/Create/components/Creator.tsx
@@ -50,10 +50,10 @@ export default function Creator() {
 
   return (
     <>
-      <div className="lg:w-8/12 mb-4 lg:mb-0 bg-white shadow-lg dark:bg-white/5 p-2 md:p-6 rounded-lg">
+      <div className="lg:w-8/12 mb-4 lg:mb-0 bg-white shadow-md dark:bg-white/5 p-2 md:p-6 rounded-lg">
         <div className="px-4 mb-8 mt-4">
           <div className="space-y-3 pb-6">
-            <div className="text-xs opacity-30 dark:opacity-20">
+            <div className="text-xs text-gray-600 dark:text-gray-400">
               Recipient Address
             </div>
             <TextInput
@@ -76,13 +76,15 @@ export default function Creator() {
           </div>
 
           <div className="space-y-3 pb-6">
-            <div className="text-xs opacity-30 dark:opacity-20">Start Date</div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">
+              Start Date
+            </div>
             <Datepicker minDate={new Date("2023-09-17T22:00:00.000Z")} />
           </div>
 
           <div className="md:flex gap-6">
             <div className="space-y-3 pb-6 grow">
-              <div className="text-xs opacity-30 dark:opacity-20">
+              <div className="text-xs text-gray-600 dark:text-gray-400">
                 Vesting Duration
               </div>
               <div className="relative">
@@ -104,7 +106,7 @@ export default function Creator() {
             </div>
 
             <div className="space-y-3 pb-6 grow">
-              <div className="text-xs opacity-30 dark:opacity-20">
+              <div className="text-xs text-gray-600 dark:text-gray-400">
                 Cliff Duration
               </div>
               <div className="relative">
@@ -128,7 +130,7 @@ export default function Creator() {
 
           <div className="space-y-3 pt-3 pb-2 grow">
             <div className="bg-black/[.03] dark:bg-white/[.02] rounded-lg flex items-center px-3.5 py-3">
-              <div className="text-xs opacity-30 dark:opacity-20 grow">
+              <div className="text-xs text-gray-600 dark:text-gray-400 grow">
                 Transferable
               </div>
               <ToggleSwitch
@@ -143,11 +145,11 @@ export default function Creator() {
         </div>
 
         <div className="px-4">
-          <div className="text-xs pb-3 mb-6 border-b border-black/5 dark:border-white/5">
+          <div className="text-xs pt-4 pb-3 mb-6 border-b border-black/5 dark:border-white/5">
             <span className="opacity-50">Optional Details</span>
           </div>
           <div className="space-y-3 pb-6">
-            <div className="text-xs opacity-30 dark:opacity-20">
+            <div className="text-xs text-gray-600 dark:text-gray-400">
               Recipient Name
             </div>
             <TextInput
@@ -158,7 +160,7 @@ export default function Creator() {
           </div>
 
           <div className="space-y-3 pb-6">
-            <div className="text-xs opacity-30 dark:opacity-20">Tags</div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">Tags</div>
             <TextInput
               placeholder="Search for exiting or create new tag ..."
               value={tags}
@@ -167,7 +169,7 @@ export default function Creator() {
           </div>
 
           <div className="space-y-3 pb-6">
-            <div className="text-xs opacity-30 dark:opacity-20">
+            <div className="text-xs text-gray-600 dark:text-gray-400">
               Description
             </div>
             <Textarea value={desc} onChange={(e) => setDesc(e.target.value)} />
@@ -175,7 +177,7 @@ export default function Creator() {
         </div>
       </div>
 
-      <div className="lg:w-6/12 p-6 sm:p-10 bg-black/[.035] dark:bg-white/[.08] bg-opacity-70 dark:bg-opacity-50 rounded-lg">
+      <div className="lg:w-6/12 p-6 sm:p-10 bg-white/90 dark:bg-white/[.08] dark:bg-opacity-50 rounded-lg">
         <Checklist
           toAddress={toAddress}
           amount={amount}
diff --git a/src/pages/Create/components/Preview.tsx b/src/pages/Create/components/Preview.tsx
index 2735bdc2..b2763169 100644
--- a/src/pages/Create/components/Preview.tsx
+++ b/src/pages/Create/components/Preview.tsx
@@ -15,13 +15,16 @@ export default function Preview({ toAddress, token, amount, recipient, desc }) {
               {recipient ? recipient : "Unknown Recipient"}
             </span>
             <Tooltip content={desc ? desc : "No optional details"}>
-              <InfoIcon size={12} className="opacity-40" />
+              <InfoIcon
+                size={12}
+                className="text-gray-600 dark:text-gray-400"
+              />
             </Tooltip>
           </div>
 
-          <div className="divide-y divide-white/5">
+          <div className="divide-y divide-black/5 dark:divide-white/5">
             <div className="flex justify-between items-center text-xs py-3">
-              <div className="opacity-30 dark:opacity-20">
+              <div className="text-gray-400 dark:text-gray-600">
                 Recipient Address
               </div>
               <div className="opacity-60">
@@ -29,7 +32,7 @@ export default function Preview({ toAddress, token, amount, recipient, desc }) {
               </div>
             </div>
             <div className="flex justify-between items-center text-xs py-3">
-              <div className="opacity-30 dark:opacity-20">Amount</div>
+              <div className="text-gray-400 dark:text-gray-600">Amount</div>
               <div>
                 <Amount
                   tokenAddress={token.address}
@@ -41,12 +44,16 @@ export default function Preview({ toAddress, token, amount, recipient, desc }) {
               </div>
             </div>
             <div className="flex justify-between items-center text-xs py-3">
-              <div className="opacity-30 dark:opacity-20">Starts</div>
-              <div className="opacity-60">in one month</div>
+              <div className="text-gray-400 dark:text-gray-600">Starts</div>
+              <div className="text-gray-600 dark:text-gray-400">
+                in one month
+              </div>
             </div>
             <div className="flex justify-between items-center text-xs pt-3">
-              <div className="opacity-30 dark:opacity-20">Ends</div>
-              <div className="opacity-60">in 3 months</div>
+              <div className="text-gray-400 dark:text-gray-600">Ends</div>
+              <div className="text-gray-600 dark:text-gray-400">
+                in 3 months
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/Dashboard/components/Govnft.tsx b/src/pages/Dashboard/components/Govnft.tsx
index 1535205f..8b1000a7 100644
--- a/src/pages/Dashboard/components/Govnft.tsx
+++ b/src/pages/Dashboard/components/Govnft.tsx
@@ -8,26 +8,29 @@ import NavLink from "../../../components/NavLink";
 
 export default function Govnft({ withdraw }) {
   return (
-    <div className="bg-black/[.025] hover:bg-black/[.035] dark:bg-white/5 dark:hover:bg-white/[.07] rounded text-sm p-5">
+    <div className="bg-white hover:bg-white/50 dark:bg-white/5 dark:hover:bg-white/[.07] rounded text-sm p-5 shadow-sm">
       <div className="flex gap-24 items-center">
         <div className="flex flex-col gap-5 lg:flex-row lg:gap-24 grow">
           <div className="flex flex-col gap-5 sm:flex-row sm:gap-6 sm:items-center">
-            <div className="order-first sm:order-last lg:order-first bg-white dark:bg-stone-600 shadow-sm rounded sm:w-32 h-12 sm:h-20 flex items-center justify-center text-xs font-bold">
+            <div className="order-first sm:order-last lg:order-first bg-gray-100 dark:bg-stone-600 shadow-sm rounded sm:w-32 h-12 sm:h-20 flex items-center justify-center text-xs font-bold">
               ID #30
             </div>
             <div className="space-y-1.5 w-52 sm:grow pl-2">
               <div className="flex gap-2 items-center">
                 Unknown Recipient
                 <Tooltip content="No extra info">
-                  <InfoIcon size={12} className="opacity-40" />
+                  <InfoIcon
+                    size={12}
+                    className="text-gray-600 dark:text-gray-400"
+                  />
                 </Tooltip>
               </div>
-              <div className="text-xs opacity-30 dark:opacity-20">
+              <div className="text-xs text-gray-400 dark:text-gray-600">
                 <AddressMask
                   address={"0x09516bBBc08B8AC950A6ee22B443ca9C55Cd68Da"}
                 />
               </div>
-              <div className="text-xs opacity-40 flex gap-1.5 pt-1">
+              <div className="text-xs text-gray-600 dark:text-gray-400 flex gap-1.5 pt-1">
                 <NavLink
                   href="/delegate"
                   className="underline hover:no-underline"
@@ -46,7 +49,9 @@ export default function Govnft({ withdraw }) {
           </div>
           <div className="flex flex-wrap gap-8 md:flex-row md:gap-20 items-center grow px-2 border-t border-white/5 lg:border-none pt-5 lg:pt-0">
             <div className="space-y-1.5">
-              <div className="text-xs opacity-30 dark:opacity-20">Amount</div>
+              <div className="text-xs text-gray-400 dark:text-gray-600">
+                Amount
+              </div>
               <div>
                 <Amount
                   tokenAddress={"0x4200000000000000000000000000000000000042"}
@@ -56,11 +61,15 @@ export default function Govnft({ withdraw }) {
                   showLogo={true}
                 />
               </div>
-              <div className="text-xs opacity-40 pt-1">Started a month ago</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
+                Started a month ago
+              </div>
             </div>
 
             <div className="space-y-1.5">
-              <div className="text-xs opacity-30 dark:opacity-20">Vesting</div>
+              <div className="text-xs text-gray-400 dark:text-gray-600">
+                Vesting
+              </div>
               <div>
                 <Amount
                   tokenAddress={"0x4200000000000000000000000000000000000042"}
@@ -70,12 +79,14 @@ export default function Govnft({ withdraw }) {
                   showLogo={false}
                 />
               </div>
-              <div className="text-xs opacity-40 pt-1">Ends in 2 years</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
+                Ends in 2 years
+              </div>
             </div>
 
             {withdraw && (
               <div className="space-y-1.5 text-right grow">
-                <div className="text-xs opacity-30 dark:opacity-20">
+                <div className="text-xs text-gray-400 dark:text-gray-600">
                   Withdrawable
                 </div>
                 <div className="flex justify-end">
diff --git a/src/pages/Delegate/components/DelegateNft.tsx b/src/pages/Delegate/components/DelegateNft.tsx
index 70e88ca4..6bb39b00 100644
--- a/src/pages/Delegate/components/DelegateNft.tsx
+++ b/src/pages/Delegate/components/DelegateNft.tsx
@@ -18,17 +18,22 @@ export default function DelegateNft() {
       <div className="lg:max-w-screen-lg mx-auto">
         <div className="lg:flex gap-6">
           <div className="lg:w-8/12 mb-4 lg:mb-0 bg-white shadow-lg dark:bg-white/5 p-6 sm:p-12 rounded-lg">
-            <div className="text-xs opacity-40">Delegate GOVNFT</div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">
+              Delegate GOVNFT
+            </div>
 
             <div className="flex items-center py-6 my-6 border-y border-black/5 dark:border-white/5">
               <div className="space-y-1.5 grow">
                 <div className="flex gap-2 items-center">
                   Unknown Recipient
                   <Tooltip content="No extra info">
-                    <InfoIcon size={12} className="opacity-40" />
+                    <InfoIcon
+                      size={12}
+                      className="text-gray-600 dark:text-gray-400"
+                    />
                   </Tooltip>
                 </div>
-                <div className="text-xs opacity-30 dark:opacity-20">
+                <div className="text-xs text-gray-400 dark:text-gray-600">
                   0x0951...d68Da
                 </div>
               </div>
@@ -39,7 +44,9 @@ export default function DelegateNft() {
 
             <div className="flex gap-16 items-center pb-6 mb-6 border-b border-black/5 dark:border-white/5">
               <div className="space-y-1.5">
-                <div className="text-xs opacity-30 dark:opacity-20">Amount</div>
+                <div className="text-xs text-gray-400 dark:text-gray-600">
+                  Amount
+                </div>
                 <div className="text-sm">
                   <Amount
                     tokenAddress={"0x4200000000000000000000000000000000000042"}
@@ -49,13 +56,13 @@ export default function DelegateNft() {
                     showLogo={true}
                   />
                 </div>
-                <div className="text-xs opacity-40 pt-1">
+                <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
                   Started a month ago
                 </div>
               </div>
 
               <div className="space-y-1.5">
-                <div className="text-xs opacity-30 dark:opacity-20">
+                <div className="text-xs text-gray-400 dark:text-gray-600">
                   Vesting
                 </div>
                 <div className="text-sm">
@@ -67,12 +74,16 @@ export default function DelegateNft() {
                     showLogo={false}
                   />
                 </div>
-                <div className="text-xs opacity-40 pt-1">Ends in 2 years</div>
+                <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
+                  Ends in 2 years
+                </div>
               </div>
             </div>
 
             <div className="space-y-3 pb-2">
-              <div className="text-xs opacity-30 dark:opacity-20">Address</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400">
+                Address
+              </div>
               <TextInput
                 placeholder="0x"
                 value={toAddress}
@@ -87,7 +98,7 @@ export default function DelegateNft() {
                   <div className="bg-gray-500/10 dark:bg-white/5 p-3.5 rounded-full">
                     <WalletIcon size={20} strokeWidth={1} />
                   </div>
-                  <div className="text-sm opacity-40 w-52 text-center pb-3">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 w-52 text-center pb-3">
                     Enter the wallet address where the lock will be delegated
                   </div>
                 </>
@@ -98,7 +109,7 @@ export default function DelegateNft() {
                   <div className="bg-green-500/5 p-3.5 rounded-full text-green-500">
                     <CheckCircle2Icon size={20} strokeWidth={1} />
                   </div>
-                  <div className="text-sm opacity-40 w-52 text-center pb-3">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 w-52 text-center pb-3">
                     Wallet address is valid. You can now delegate the GovNFT.
                   </div>
                   <DelegateButton />
diff --git a/src/pages/Transfer/components/TransferNft.tsx b/src/pages/Transfer/components/TransferNft.tsx
index 0ad9c5a9..f7b62ae9 100644
--- a/src/pages/Transfer/components/TransferNft.tsx
+++ b/src/pages/Transfer/components/TransferNft.tsx
@@ -18,17 +18,22 @@ export default function TransferNft() {
       <div className="lg:max-w-screen-lg mx-auto">
         <div className="lg:flex gap-6">
           <div className="lg:w-8/12 mb-4 lg:mb-0 bg-white shadow-lg dark:bg-white/5 p-6 sm:p-12 rounded-lg">
-            <div className="text-xs opacity-40">Transfer GOVNFT</div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">
+              Transfer GOVNFT
+            </div>
 
             <div className="flex items-center py-6 my-6 border-y border-black/5 dark:border-white/5">
               <div className="space-y-1.5 grow">
                 <div className="flex gap-2 items-center">
                   Unknown Recipient
                   <Tooltip content="No extra info">
-                    <InfoIcon size={12} className="opacity-40" />
+                    <InfoIcon
+                      size={12}
+                      className="text-gray-600 dark:text-gray-400"
+                    />
                   </Tooltip>
                 </div>
-                <div className="text-xs opacity-30 dark:opacity-20">
+                <div className="text-xs text-gray-400 dark:text-gray-600">
                   0x0951...d68Da
                 </div>
               </div>
@@ -39,7 +44,9 @@ export default function TransferNft() {
 
             <div className="flex gap-16 items-center pb-6 mb-6 border-b border-black/5 dark:border-white/5">
               <div className="space-y-1.5">
-                <div className="text-xs opacity-30 dark:opacity-20">Amount</div>
+                <div className="text-xs text-gray-400 dark:text-gray-600">
+                  Amount
+                </div>
                 <div className="text-sm">
                   <Amount
                     tokenAddress={"0x4200000000000000000000000000000000000042"}
@@ -49,13 +56,13 @@ export default function TransferNft() {
                     showLogo={true}
                   />
                 </div>
-                <div className="text-xs opacity-40 pt-1">
+                <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
                   Started a month ago
                 </div>
               </div>
 
               <div className="space-y-1.5">
-                <div className="text-xs opacity-30 dark:opacity-20">
+                <div className="text-xs text-gray-400 dark:text-gray-600">
                   Vesting
                 </div>
                 <div className="text-sm">
@@ -67,12 +74,16 @@ export default function TransferNft() {
                     showLogo={false}
                   />
                 </div>
-                <div className="text-xs opacity-40 pt-1">Ends in 2 years</div>
+                <div className="text-xs text-gray-600 dark:text-gray-400 pt-1">
+                  Ends in 2 years
+                </div>
               </div>
             </div>
 
             <div className="space-y-3 pb-2">
-              <div className="text-xs opacity-30 dark:opacity-20">Address</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400">
+                Address
+              </div>
               <TextInput
                 placeholder="0x"
                 value={toAddress}
@@ -87,7 +98,7 @@ export default function TransferNft() {
                   <div className="bg-gray-500/10 dark:bg-white/5 p-3.5 rounded-full">
                     <WalletIcon size={20} strokeWidth={1} />
                   </div>
-                  <div className="text-sm opacity-40 w-52 text-center pb-3">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 w-52 text-center pb-3">
                     Enter the wallet address where the lock will be transfered
                   </div>
                 </>
@@ -98,7 +109,7 @@ export default function TransferNft() {
                   <div className="bg-green-500/5 p-3.5 rounded-full text-green-500">
                     <CheckCircle2Icon size={20} strokeWidth={1} />
                   </div>
-                  <div className="text-sm opacity-40 w-52 text-center pb-3">
+                  <div className="text-sm text-gray-600 dark:text-gray-400 w-52 text-center pb-3">
                     Wallet address is valid. You can now transfer the GovNFT.
                   </div>
                   <TransferButton />