styling: updated contrast

src/components/AssetInput.tsx

@@ -64,8 +64,10 @@ export default function AssetInput({
 
           {asset?.value && (
             <ActionLink className="no-underline" onClick={() => setFromBalance()}>
-              Available{" "}
-              <Amount tokenAddress={asset.address} decimals={asset.decimals} amount={asset.value} showLogo={false} />
+              <div className="text-gray-500 hover:text-gray-600 hover:dark:text-gray-400 flex gap-1 items-center">
+                <div className="text-gray-400 dark:text-gray-600">Available</div>
+                <Amount tokenAddress={asset.address} decimals={asset.decimals} amount={asset.value} showLogo={false} />
+              </div>
             </ActionLink>
           )}
         </div>

src/components/Footer.tsx

@@ -6,43 +6,43 @@ import ExplorerLink from "./ExplorerLink";
 export default function Footer() {
   return (
     <div className="flex justify-between items-start md:items-center text-xs border-t border-black/5 dark:border-white/5 py-4 mt-24 mb-24">
-      <div className="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center text-gray-600 dark:text-gray-400 py-4">
-        {/*@ts-ignore*/}
-        <div className="pb-4 md:pb-0">{__APP_VERSION__}</div>
-        <div className="hidden md:inline text-gray-400 dark:text-gray-600">&middot;</div>
+      <div className="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center text-gray-500 py-4">
+        {/* @ts-ignore */}
+        <div className="pb-4 md:pb-0 text-gray-500">{__APP_VERSION__}</div>
+        <div className="hidden md:inline text-gray-500">&middot;</div>
         <ExplorerLink
           path={`address/${GOVNFT_ADDRESS}`}
-          className="flex gap-2 items-center text-gray-600 dark:text-gray-400 underline hover:no-underline"
+          className="flex gap-2 items-center text-gray-500 underline hover:no-underline"
         >
           Latest Deployment
         </ExplorerLink>
         <a
           href="https://cantina.xyz/portfolio/aa79aa69-8468-442d-bfbb-b403de36edec"
           target="_blank"
-          className="underline hover:no-underline underline-offset-2"
+          className="underline hover:no-underline underline-offset-2 text-gray-500"
           rel="noreferrer"
         >
           Security Audit
         </a>
         <a
           href="https://github.com/velodrome-finance/govnft"
           target="_blank"
-          className="underline hover:no-underline underline-offset-2"
+          className="underline hover:no-underline underline-offset-2 text-gray-500"
           rel="noreferrer"
         >
           GitHub
         </a>
-        <div className="hidden md:inline text-gray-400 dark:text-gray-600">&middot;</div>
+        <div className="hidden md:inline text-gray-500">&middot;</div>
         {/* TODO: Add docs */}
-        <a href="/docs" className="underline hover:no-underline underline-offset-2">
+        <a href="/docs" className="underline hover:no-underline underline-offset-2 text-gray-500">
           Documentation
         </a>
       </div>
       <div className="flex gap-8 items-center">
         <div className="hidden lg:flex gap-2 items-center">
-          <span className="text-gray-600 dark:text-gray-400">A public good for</span>{" "}
+          <span className="text-gray-500">A public good for</span>{" "}
           <img src="/svg/op-logo.svg" alt="Optimism" className="h-5" />
-          <span className="font-bold italic text-gray-600 dark:text-gray-400">OPTIMISM</span>
+          <span className="font-bold italic text-gray-500">OPTIMISM</span>
         </div>
         <DarkThemeToggle />
       </div>

src/components/GovnftAvatar.tsx

@@ -23,11 +23,11 @@ export default function GovnftAvatar({
 
   return (
     <NavLink href={`/nft/${nft.id}`} className="block">
-      <div className="flex gap-5 items-center">
-        <div className="bg-gray-100 dark:bg-gray-700/20 h-14 w-14 hidden sm:flex items-center justify-center rounded-2xl">
-          <SvgLoader src="/govnft-gray.svg" className="w-6" alt="GovNFT" />
+      <div className="flex gap-6 items-center">
+        <div className="bg-gray-100 dark:bg-gray-700/20 h-16 w-16 hidden sm:flex items-center justify-center rounded-2xl">
+          <SvgLoader src="/govnft-gray.svg" className="w-7" alt="GovNFT" />
         </div>
-        <div className="space-y-1">
+        <div className="space-y-1.5">
           <div className="flex gap-2 items-center text-gray-800 dark:text-gray-200 font-semibold text-sm">
             GovNFT #{String(nft.id)}
             <LockIcon size={12} />
@@ -39,8 +39,8 @@ export default function GovnftAvatar({
             </div>
           </div>
           <div className="flex gap-1 items-center">
-            <div className="text-xs text-gray-400 dark:text-gray-600 ">
-              <DateFormat ts={nft.start} /> : <DateFormat ts={nft.end} />
+            <div className="text-xs text-gray-500">
+              Vesting <DateFormat ts={nft.start} /> : <DateFormat ts={nft.end} />
             </div>
           </div>
         </div>

src/components/GovnftHeader.tsx

@@ -21,7 +21,7 @@ export default function GovnftHeader({
 
   return (
     <>
-      <div className="mx-auto bg-white shadow-lg dark:bg-white/5 rounded-lg mb-4 sm:mb-6 border border-gray-100 dark:border-gray-700/20">
+      <div className="mx-auto bg-white shadow-lg dark:bg-white/5 rounded-lg mb-4 sm:mb-6">
         <div className="flex gap-4 items-center justify-between p-2 md:p-4 md:mb-1">
           <div className="flex gap-4 items-center pl-2 py-2">
             <GovnftAvatar nft={nft} />

src/components/GovnftNavbar.tsx

@@ -28,14 +28,14 @@ export default function GovnftNavbar({
   return (
     <>
       {Object.entries(navs).map(([nav, title]) => (
-        <NavLink href={`/nft/${nft.id}/${nav}`} key={String(nav)}>
-          <div
-            className={`${
-              active === nav ? classActive : "border-t border-transparent"
-            } hover:bg-gray-50 hover:dark:bg-gray-700/20`}
-          >
-            <div className="px-5 sm:px-8 py-4 uppercase tracking-widest">{title}</div>
-          </div>
+        <NavLink
+          href={`/nft/${nft.id}/${nav}`}
+          key={String(nav)}
+          className={`${
+            active === nav ? classActive : "border-t border-transparent"
+          } hover:bg-gray-50 hover:dark:bg-gray-700/20 first:rounded-bl-lg`}
+        >
+          <div className="px-5 sm:px-8 py-4 uppercase tracking-widest">{title}</div>
         </NavLink>
       ))}
     </>

src/components/GovnftStatus.tsx

@@ -17,7 +17,7 @@ export default function GovnftStatus({
           <div className="w-1.5 h-1.5 bg-amber-600 rounded-full animate-pulse" />
           <div className="text-amber-600">Scheduled</div>
         </div>
-        <div className="text-xs text-gray-600 dark:text-gray-400">
+        <div className="text-xs text-gray-500">
           <DateFromNow ts={nft.start} prefix="vesting starts in" pastPrefix="vesting started" tooltip={false} />
         </div>
       </div>
@@ -31,7 +31,7 @@ export default function GovnftStatus({
           <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
           <div className="text-green-500">Vesting</div>
         </div>
-        <div className="text-xs text-gray-600 dark:text-gray-400">
+        <div className="text-xs text-gray-500">
           <DateFromNow ts={nft.end} prefix="vesting ends" pastPrefix="vesting ended" tooltip={false} />
         </div>
       </div>
@@ -45,7 +45,7 @@ export default function GovnftStatus({
           <div className="w-1.5 h-1.5 bg-gray-500 rounded-full animate-pulse" />
           <div className="text-gray-500">Vested</div>
         </div>
-        <div className="text-xs text-gray-600 dark:text-gray-400">
+        <div className="text-xs text-gray-500">
           <DateFromNow ts={nft.end} prefix="vesting ends" pastPrefix="vesting ended" tooltip={false} />
         </div>
       </div>

src/components/Profile/CustomRpc.tsx

@@ -1,9 +1,8 @@
-import { TextInput } from "flowbite-react";
+import { Button, TextInput } from "flowbite-react";
 import { PlugZap as PlugZapIcon } from "lucide-react";
 import { useState } from "react";
 import useLocalStorageState from "use-local-storage-state";
 
-import ActionLink from "#/components/ActionLink";
 import { CUSTOM_RPC_URI_KEY } from "#/rpc";
 
 export default function CustomRpc() {
@@ -15,36 +14,31 @@ export default function CustomRpc() {
 
   return (
     <div className="bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20 p-6 rounded-lg">
-      <div className="flex justify-between items-center gap-8 text-gray-600 dark:text-gray-400">
-        <div className="w-full">
-          <div className="pb-4">
-            To communicate with the network with your personal RPC, add it here and reload the page. This is saved only
-            in your browser, locally.
-          </div>
-
-          <div className="flex justify-between">
-            <TextInput
-              className="w-4/5"
-              rightIcon={PlugZapIcon}
-              value={rpc}
-              // @ts-ignore
-              onClick={(e) => e.target.select()}
-              onChange={(e) => setRpc(e.target.value)}
-              placeholder="RPC URL ..."
-            />
-            <ActionLink
-              useButton={true}
-              onClick={() => {
-                setCustomRpc(rpc);
-                window.location.reload();
-              }}
-            >
-              Save
-            </ActionLink>
-          </div>
-
-          <div className="pt-3 text-xs opacity-50">Leave blank if you want to use the RPC provided by us.</div>
+      <div className="text-gray-600 dark:text-gray-400 w-full">
+        <div className="pr-16">
+          To communicate with the network with your personal RPC, add it here and reload the page. This is saved only in
+          your browser, locally.
+        </div>
+        <div className="flex gap-4 ites-center justify-between pt-8">
+          <TextInput
+            rightIcon={PlugZapIcon}
+            value={rpc}
+            // @ts-ignore
+            onClick={(e) => e.target.select()}
+            onChange={(e) => setRpc(e.target.value)}
+            placeholder="RPC URL ..."
+            className="grow"
+          />
+          <Button
+            onClick={() => {
+              setCustomRpc(rpc);
+              window.location.reload();
+            }}
+          >
+            Save
+          </Button>
         </div>
+        <div className="pt-4 text-xs text-gray-500">Leave blank if you want to use the RPC provided by us.</div>
       </div>
     </div>
   );

src/components/Profile/index.tsx

@@ -69,8 +69,8 @@ export default function Profile() {
 
             <NavLink href="/minted" size="sm">
               <div className="bg-gray-50 hover:bg-gray-100 dark:bg-gray-900/20 hover:dark:bg-gray-900/40  p-4 mt-4 rounded-lg">
-                <div className="text-xs flex justify-between items-center gap-8 text-gray-700 dark:text-gray-300">
-                  Review Minted GovNFTs
+                <div className="text-xs flex justify-between items-center gap-8 text-gray-600 dark:text-gray-400 uppercase">
+                  Minted GovNFTs
                   <ArrowRightIcon size={14} />
                 </div>
               </div>

src/main.css

@@ -40,7 +40,7 @@
 
 @layer base {
   body {
-    @apply text-black dark:text-white bg-gray-50 dark:bg-gray-900 min-h-screen;
+    @apply text-black dark:text-white bg-gray-100 dark:bg-gray-900 min-h-screen;
   }
 }
 

src/pages/Create/components/Creator.tsx

@@ -64,7 +64,7 @@ export default function Creator() {
             <div className="text-xs flex justify-between items-center">
               <div className="text-xs text-gray-600 dark:text-gray-400">Recipient Address</div>
               <div
-                className="text-gray-600 dark:text-gray-400 underline hover:no-underline cursor-pointer"
+                className="text-gray-500 underline hover:no-underline cursor-pointer"
                 onClick={() => setToAddress(accountAddress)}
               >
                 Use Current Wallet

src/pages/Dashboard/components/Govnft.tsx

@@ -13,7 +13,7 @@ export default function Govnft({
   nft: GovNft;
 }) {
   return (
-    <div className="bg-white hover:bg-white/50 dark:bg-white/[.04] dark:hover:bg-white/[.05] rounded-lg text-sm pl-6 pr-4 py-4 shadow-sm border border-gray-100 dark:border-gray-700/20">
+    <div className="bg-white hover:bg-white/80 dark:bg-white/5 dark:hover:bg-white/[.06] rounded-lg text-sm pl-6 pr-4 py-4 shadow-md">
       <div className="flex flex-col gap-8 sm:flex-row sm:justify-between sm:gap-12">
         <div className="flex flex-col gap-5 sm:flex-row sm:gap-8 sm:items-center">
           <div className="sm:grow">
@@ -26,22 +26,19 @@ export default function Govnft({
             <GovnftProgress vestedPct={nft.vestedPct} vestingStarted={nft.vestingStarted} />
           </div>
           <div className="px-6 py-2 w-52 hidden xl:flex flex-col gap-1.5 justify-center items-end border-l border-gray-100 dark:border-gray-950/20">
-            <div className="text-gray-400 dark:text-gray-600 text-xs">Locked</div>
+            <div className="text-gray-500 text-xs">Locked</div>
             <Amount tokenAddress={nft.token} amount={nft.amount} showLogo={true} />
-            <div className="text-gray-400 dark:text-gray-600 text-xs flex gap-1 items-center">
+            <div className="text-gray-500 text-xs flex gap-1 items-center">
               claimed <Amount tokenAddress={nft.token} amount={nft.total_claimed} showLogo={false} />
             </div>
           </div>
           <div className="sm:px-3 w-full sm:w-52 flex flex-row gap-6 sm:flex-col sm:gap-1.5 sm:justify-center items-center sm:items-end sm:border-l border-gray-100 dark:border-gray-950/20">
-            <div className="text-gray-400 dark:text-gray-600 text-xs">Claimable</div>
+            <div className="text-gray-500 text-xs">Claimable</div>
             <Amount tokenAddress={nft.token} amount={nft.claimable} showLogo={false} />
-            <div className="text-xs ">
+            <div className="text-xs">
               <ClaimButton nft={nft} />
               {nft.claimable === 0n && (
-                <NavLink
-                  href={`/nft/${nft.id}`}
-                  className="text-gray-400 dark:text-gray-600 underline hover:no-underline"
-                >
+                <NavLink href={`/nft/${nft.id}`} className="text-gray-500 underline hover:no-underline">
                   Review
                 </NavLink>
               )}

src/pages/Dashboard/components/Govnfts.tsx

@@ -14,13 +14,16 @@ export default function Govnfts({
         <div className="mx-auto w-16 h-16 flex justify-center items-center bg-gray-200 dark:bg-white text-gray-900 rounded-3xl">
           <ShapesIcon />
         </div>
-        <div className="w-64 mx-auto">No NFTs were found.</div>
-        <div className="w-96 mx-auto flex gap-3 justify-center border-t border-gray-700/30 pt-8">
-          <NavLink href="/create" size="sm" className="w-40" color="light" useButton={true}>
-            Create NFTs
+        <div className="md:w-96 mx-auto px-2">
+          The dashboard currently shows no NFTs minted. You can create your first NFT to get started. Once minted, you
+          can find all your NFTs under settings.
+        </div>
+        <div className="w-80 mx-auto flex gap-3 justify-center">
+          <NavLink href="/create" size="sm" className="w-32" useButton={true}>
+            Create
           </NavLink>
-          <NavLink href="/minted" size="sm" className="w-48" color="light" useButton={true}>
-            View Created NFTs
+          <NavLink href="/minted" size="sm" className="w-32" color="light" useButton={true}>
+            Minted NFTs
           </NavLink>
         </div>
       </div>
@@ -30,7 +33,7 @@ export default function Govnfts({
   return (
     <div className="space-y-2">
       <div className="pb-4 text-sm px-2 text-gray-600 dark:text-gray-400">Vesting NFTs</div>
-      <div className="space-y-3">
+      <div className="space-y-2">
         {nfts.map((nft) => (
           <Govnft nft={nft} key={String(nft.id)} />
         ))}

src/pages/Delegate/components/DelegateNft.tsx

@@ -38,14 +38,14 @@ export default function DelegateNft({ nft }: { nft: GovNft }) {
               <div className="text-gray-600 dark:text-gray-400 text-xs flex justify-between items-center">
                 <div>Delegate Address</div>
                 <div
-                  className="text-gray-600 dark:text-gray-400 underline hover:no-underline cursor-pointer"
+                  className="text-gray-500 underline hover:no-underline cursor-pointer"
                   onClick={() => setToAddress(accountAddress)}
                 >
                   Use Current Wallet
                 </div>
               </div>
               <TextInput placeholder="0x" value={toAddress} onChange={(e) => setToAddress(e.target.value as Address)} />
-              <div className="text-gray-600 dark:text-gray-400 text-xs underline hover:no-underline flex gap-2 items-center">
+              <div className="text-gray-500 text-xs underline hover:no-underline flex gap-2 items-center pt-1">
                 <a href={DELEGATES_URI} target="_blank" rel="noreferrer">
                   View Delegates
                 </a>

src/pages/Govnft/components/Overview.tsx

@@ -20,21 +20,21 @@ export default function Overview({
           <div className="mx-auto lg:w-full mb-4 lg:mb-0 bg-white shadow-lg dark:bg-white/5 p-6 md:px-10 md:py-8 rounded-lg space-y-8">
             <div className="space-y-3">
               <div className="flex items-center gap-2">
-                <div className="text-xs text-gray-400 dark:text-gray-600">GovNFT Address:</div>
+                <div className="text-xs text-gray-500">GovNFT Address:</div>
                 <ExplorerLink path={`address/${nft.address}`} className="text-xs text-gray-600 dark:text-gray-400">
                   <AddressMask address={nft.address} />
                 </ExplorerLink>
               </div>
 
               <div className="flex items-center gap-2">
-                <div className="text-xs text-gray-400 dark:text-gray-600">Token:</div>
+                <div className="text-xs text-gray-500">Token:</div>
                 <ExplorerLink path={`address/${nft.token}`} className="text-xs text-gray-600 dark:text-gray-400">
                   <AddressMask address={nft.token} />
                 </ExplorerLink>
               </div>
 
               <div className="flex items-center gap-2">
-                <div className="text-xs text-gray-400 dark:text-gray-600">Owner:</div>
+                <div className="text-xs text-gray-500">Owner:</div>
                 <ExplorerLink path={`address/${nft.owner}`} className="text-xs text-gray-600 dark:text-gray-400">
                   <AddressMask address={nft.owner} />
                 </ExplorerLink>
@@ -80,7 +80,7 @@ export default function Overview({
                       <AddressMask address={nft.delegated} />
                     </div>
                   ) : (
-                    <div className="text-gray-600 dark:text-gray-400">No delegation has been set.</div>
+                    <div className="text-gray-500">No delegation has been set.</div>
                   )}
                   {nft.isOwner && (
                     <NavLink

src/pages/Split/components/Splitter.tsx

@@ -72,7 +72,7 @@ export default function Splitter({ nft }: { nft: GovNft }) {
               <div className="text-xs flex justify-between items-center">
                 <div className="text-xs text-gray-600 dark:text-gray-400">Recipient Address</div>
                 <div
-                  className="text-gray-600 dark:text-gray-400 underline hover:no-underline cursor-pointer"
+                  className="text-gray-500 underline hover:no-underline cursor-pointer"
                   onClick={() => setToAddress(accountAddress)}
                 >
                   Use Current Wallet