Fix color contrast (#10)

GovNFT · Jan 24, 2024 · e590cba · e590cba
1 parent 808a391
commit e590cba
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +169,15 @@ 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)} />
           </div>
         </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
@@ -15,21 +15,24 @@ 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">
                 <AddressMask address={toAddress} />
               </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
@@ -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">