Merge branch 'feature/tailwindcss3' into develop; fix #324

package.json

@@ -75,10 +75,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",
-    "autoprefixer": "^9.8.8",
+    "autoprefixer": "^10.4.8",
-    "postcss": "^7.0.39",
+    "postcss": "^8.4.16",
     "source-map-explorer": "^2.5.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6",
+    "tailwindcss": "^3.1.8",
     "vite": "^3.0.4",
     "vite-plugin-compression": "^0.5.1"
   }

src/Block.tsx

@@ -89,7 +89,7 @@ const Block: React.FC = () => {
           </InfoRow>
           <InfoRow title="Transactions">
             <NavLink
-              className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs"
+              className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded-lg px-2 py-1 text-xs"
               to={blockTxsURL(block.number)}
             >
               {block.transactionCount} transactions
@@ -111,7 +111,7 @@ const Block: React.FC = () => {
             {blockETHUSDPrice && (
               <>
                 {" "}
-                <span className="px-2 border-yellow-200 border rounded-lg bg-yellow-100 text-yellow-600">
+                <span className="px-2 border-amber-200 border rounded-lg bg-amber-100 text-amber-600">
                   <ETH2USDValue
                     ethAmount={block.blockReward.add(netFeeReward)}
                     eth2USDValue={blockETHUSDPrice}

src/ConnectionErrorPanel.tsx

@@ -100,7 +100,7 @@ const Step: React.FC<PropsWithChildren<StepProps>> = React.memo(
           </span>
         )}
         {type === "ok" && (
-          <span className="text-green-600">
+          <span className="text-emerald-600">
             <FontAwesomeIcon icon={faCheckCircle} size="1x" />
           </span>
         )}

src/Faucets.tsx

@@ -39,7 +39,7 @@ const Faucets: React.FC = () => {
       <ContentFrame>
         <div className="py-4 space-y-3">
           {urls.length > 0 && (
-            <div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-red-800 font-bold underline px-2 py-1">
+            <div className="flex space-x-2 items-baseline rounded bg-amber-200 text-red-800 font-bold underline px-2 py-1">
               <FontAwesomeIcon
                 className="self-center"
                 icon={faTriangleExclamation}
@@ -54,7 +54,7 @@ const Faucets: React.FC = () => {
           )}
           {/* Display the shuffling notice only if there are 1+ faucets */}
           {urls.length > 1 && (
-            <div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-yellow-700 px-2 py-1">
+            <div className="flex space-x-2 items-baseline rounded bg-amber-200 text-amber-700 px-2 py-1">
               <FontAwesomeIcon
                 className="self-center"
                 icon={faTriangleExclamation}

src/Home.tsx

@@ -23,9 +23,9 @@ const Home: React.FC = () => {
   document.title = "Home | Otterscan";
 
   return (
-    <div className="mx-auto flex flex-col flex-grow pb-5">
+    <div className="mx-auto flex flex-col grow pb-5">
       {isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
-      <div className="m-5 mb-10 flex items-end flex-grow max-h-64">
+      <div className="m-5 mb-10 flex items-end grow max-h-64">
         <Logo />
       </div>
       <form

src/StandardFrame.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 
 const StandardFrame: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="flex-grow bg-gray-100 px-9 pt-3 pb-12">{children}</div>
+  <div className="grow bg-gray-100 px-9 pt-3 pb-12">{children}</div>
 );
 
 export default StandardFrame;

src/address/AddressTransactionResults.tsx

@@ -140,7 +140,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
               <div className="space-x-2">
                 <TransactionValue value={balance} />
                 {!balance.isZero() && priceMap["latest"] !== undefined && (
-                  <span className="px-2 border-green-200 border rounded-lg bg-green-100 text-green-600">
+                  <span className="px-2 border-emerald-200 border rounded-lg bg-emerald-100 text-emerald-600">
                     <ETH2USDValue
                       ethAmount={balance}
                       eth2USDValue={priceMap["latest"]}

src/address/Contracts.tsx

@@ -44,8 +44,8 @@ const Contracts: React.FC<ContractsProps> = ({
           <InfoRow title="Optimizer Enabled">
             {optimizer?.enabled ? (
               <span>
-                <span className="font-bold text-green-600">Yes</span> with{" "}
+                <span className="font-bold text-emerald-600">Yes</span> with{" "}
-                <span className="font-bold text-green-600">
+                <span className="font-bold text-emerald-600">
                   {commify(optimizer?.runs)}
                 </span>{" "}
                 runs

src/address/DecodedFragment.tsx

@@ -28,14 +28,14 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
     fragmentType = "function";
     sig = intf.getSighash(fragment);
     letter = "F";
-    letterBg = "bg-purple-500";
+    letterBg = "bg-violet-500";
-    hashBg = "bg-purple-50";
+    hashBg = "bg-violet-50";
   } else if (EventFragment.isEventFragment(fragment)) {
     fragmentType = "event";
     sig = intf.getEventTopic(fragment);
     letter = "E";
-    letterBg = "bg-green-300";
+    letterBg = "bg-emerald-300";
-    hashBg = "bg-green-50";
+    hashBg = "bg-emerald-50";
   } else if (ConstructorFragment.isConstructorFragment(fragment)) {
     fragmentType = "constructor";
     letter = "C";
@@ -49,7 +49,7 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
       </span>
       {letter && (
         <span
-          className={`flex-shrink-0 text-xs font-code border border-gray-300 rounded-full w-5 h-5 self-center flex items-center justify-center text-white font-bold ${letterBg}`}
+          className={`shrink-0 text-xs font-code border border-gray-300 rounded-full w-5 h-5 self-center flex items-center justify-center text-white font-bold ${letterBg}`}
         >
           {letter}
         </span>

src/block/NavButton.tsx

@@ -17,7 +17,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 }) => {
   if (disabled) {
     return (
-      <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded px-2 py-1 text-xs">
+      <span className="bg-link-blue/10 text-gray-400 rounded px-2 py-1 text-xs">
         {children}
       </span>
     );
@@ -25,7 +25,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 
   return (
     <NavLink
-      className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
+      className="transition-colors bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
       to={urlBuilder ? urlBuilder(blockNum) : blockURL(blockNum)}
     >
       {children}

src/components/DecoratedAddressLink.tsx

@@ -47,13 +47,13 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
       className={`flex items-baseline space-x-1 ${
         txFrom ? "bg-skin-from" : ""
       } ${txTo ? "bg-skin-to" : ""} ${
-        mint ? "italic text-green-500 hover:text-green-700" : ""
+        mint ? "italic text-emerald-500 hover:text-emerald-700" : ""
       } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
         selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""
       }`}
     >
       {creation && (
-        <span className="text-yellow-300" title="Contract creation">
+        <span className="text-amber-300" title="Contract creation">
           <FontAwesomeIcon icon={faStar} size="1x" />
         </span>
       )}
@@ -63,7 +63,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
         </span>
       )}
       {mint && (
-        <span className="text-green-500" title="Mint address">
+        <span className="text-emerald-500" title="Mint address">
           <FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />
         </span>
       )}
@@ -73,13 +73,13 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
         </span>
       )}
       {miner && (
-        <span className="text-yellow-400" title="Miner address">
+        <span className="text-amber-400" title="Miner address">
           <FontAwesomeIcon icon={faCoins} size="1x" />
         </span>
       )}
       {metadata && (
         <NavLink
-          className="self-center flex-shrink-0 flex items-center"
+          className="self-center shrink-0 flex items-center"
           to={`/address/${address}/contract`}
         >
           <SourcifyLogo />
@@ -160,10 +160,7 @@ const AddressLegend: React.FC<PropsWithChildren<AddressLegendProps>> = ({
   title,
   children,
 }) => (
-  <span
+  <span className="text-xs text-gray-400/70 not-italic" title={title}>
-    className="text-xs text-gray-400 text-opacity-70 not-italic"
-    title={title}
-  >
     {children}
   </span>
 );

src/components/ENSName.tsx

@@ -48,7 +48,7 @@ type ContentProps = {
 const Content: React.FC<ContentProps> = ({ linkable, name }) => (
   <>
     <img
-      className={`self-center ${linkable ? "" : "filter grayscale"}`}
+      className={`self-center ${linkable ? "" : "grayscale"}`}
       src={ENSLogo}
       alt="ENS Logo"
       width={12}

src/components/InternalSelfDestruct.tsx

@@ -54,7 +54,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
             <AddressHighlighter address={internalOp.to}>
               <div
                 className={`flex items-baseline space-x-1 ${
-                  toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+                  toMiner ? "rounded px-2 py-1 bg-amber-100" : ""
                 }`}
               >
                 <DecoratedAddressLink address={internalOp.to} miner={toMiner} />

src/components/InternalTransfer.tsx

@@ -58,7 +58,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
             <AddressHighlighter address={internalOp.from}>
               <div
                 className={`flex items-baseline space-x-1 ${
-                  fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+                  fromMiner ? "rounded px-2 py-1 bg-amber-100" : ""
                 }`}
               >
                 <DecoratedAddressLink
@@ -79,7 +79,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
           <AddressHighlighter address={internalOp.to}>
             <div
               className={`flex items-baseline space-x-1 ${
-                toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+                toMiner ? "rounded px-2 py-1 bg-amber-100" : ""
               }`}
             >
               <DecoratedAddressLink

src/components/MethodName.tsx

@@ -11,7 +11,7 @@ const MethodName: React.FC<MethodNameProps> = ({ data }) => {
   return (
     <div
       className={`${
-        isSimpleTransfer ? "bg-yellow-100" : "bg-blue-50"
+        isSimpleTransfer ? "bg-amber-100" : "bg-blue-50"
       } rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max`}
     >
       <p className="truncate" title={methodTitle}>

src/components/Nonce.tsx

@@ -9,13 +9,13 @@ type NonceProps = {
 
 const Nonce: React.FC<NonceProps> = ({ value }) => (
   <span
-    className="flex items-baseline space-x-2 rounded-lg px-2 py-1 bg-green-50 text-xs"
+    className="flex items-baseline space-x-2 rounded-lg px-2 py-1 bg-emerald-50 text-xs"
     title="Nonce"
   >
-    <span className="text-green-400">
+    <span className="text-emerald-400">
       <FontAwesomeIcon icon={faArrowUp} size="1x" />
     </span>
-    <span className="text-green-600">{commify(value)}</span>
+    <span className="text-emerald-600">{commify(value)}</span>
   </span>
 );
 

src/components/PercentageBar.tsx

@@ -6,7 +6,7 @@ type PercentageBarProps = {
 
 const PercentageBar: React.FC<PercentageBarProps> = ({ perc }) => (
   <div className="self-center w-40 border rounded border-gray-200">
-    <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
+    <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-amber-300 to-emerald-400 relative">
       <div
         className="absolute top-0 right-0 bg-white h-full rounded-r"
         style={{ width: `${100 - perc}%` }}

src/components/SelectionHighlighter.tsx

@@ -66,7 +66,7 @@ const HighlighterBox: React.FC<PropsWithChildren<HighlighterBoxProps>> =
   React.memo(({ selected, select, deselect, children }) => (
     <div
       className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
-        selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
+        selected ? "border-orange-400 bg-amber-100" : "border-transparent"
       }`}
       onMouseEnter={select}
       onMouseLeave={deselect}

src/components/TokenName.tsx

@@ -74,7 +74,7 @@ const Content: React.FC<ContentProps> = ({
 }) => (
   <>
     <div
-      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+      className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
     >
       <TokenLogo chainId={chainId} address={address} name={name} />
     </div>

src/components/TransactionDirection.tsx

@@ -23,15 +23,15 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
   direction,
   flags,
 }) => {
-  let bgColor = "bg-green-50";
+  let bgColor = "bg-emerald-50";
-  let fgColor = "text-green-500";
+  let fgColor = "text-emerald-500";
   let msg: string | null = null;
 
   if (direction === Direction.IN) {
     msg = "IN";
   } else if (direction === Direction.OUT) {
-    bgColor = "bg-yellow-100";
+    bgColor = "bg-amber-100";
-    fgColor = "text-yellow-600";
+    fgColor = "text-amber-600";
     msg = "OUT";
   } else if (direction === Direction.SELF) {
     bgColor = "bg-gray-200";
@@ -39,12 +39,12 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
     msg = "SELF";
   } else if (direction === Direction.INTERNAL) {
     msg = "INT";
-    bgColor = "bg-green-100";
+    bgColor = "bg-emerald-100";
   }
 
   if (flags === Flags.MINER) {
-    bgColor = "bg-yellow-50";
+    bgColor = "bg-amber-50";
-    fgColor = "text-yellow-400";
+    fgColor = "text-amber-400";
   }
 
   return (

src/components/UniswapV1ExchangeName.tsx

@@ -77,7 +77,7 @@ const Content: React.FC<ContentProps> = ({
 }) => (
   <>
     <div
-      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+      className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
     >
       <TokenLogo chainId={chainId} address={address} name={name} />
     </div>

src/components/UniswapV2PairName.tsx

@@ -94,7 +94,7 @@ const Content: React.FC<ContentProps> = ({
 }) => (
   <>
     <div
-      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+      className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
     >
       <TokenLogo chainId={chainId} address={address} name={name} />
     </div>

src/components/UniswapV3PoolName.tsx

@@ -102,7 +102,7 @@ const Content: React.FC<ContentProps> = ({
 }) => (
   <>
     <div
-      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+      className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
     >
       <TokenLogo chainId={chainId} address={address} name={name} />
     </div>

src/components/ValueHighlighter.tsx

@@ -25,7 +25,7 @@ const ValueHighlighter: React.FC<ValueHighlighterProps> = ({
         selection !== null &&
         selection.type === "value" &&
         selection.content === value.toString()
-          ? "border-orange-400 bg-yellow-100"
+          ? "border-orange-400 bg-amber-100"
           : "border-transparent"
       }`}
       onMouseEnter={select}

src/search/PageButton.tsx

@@ -13,7 +13,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
 }) => {
   if (disabled) {
     return (
-      <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded-lg px-3 py-2 text-xs">
+      <span className="bg-link-blue/10 text-gray-400 rounded-lg px-3 py-2 text-xs">
         {children}
       </span>
     );
@@ -21,7 +21,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
 
   return (
     <NavLink
-      className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded-lg px-3 py-2 text-xs"
+      className="transition-colors bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded-lg px-3 py-2 text-xs"
       to={`?p=${goToPage}`}
     >
       {children}

src/search/TransactionItem.tsx

@@ -65,9 +65,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   return (
     <div
       className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
-        flash
+        flash ? "bg-amber-100 hover:bg-amber-200" : "hover:bg-skin-table-hover"
-          ? "bg-yellow-100 hover:bg-yellow-200"
-          : "hover:bg-skin-table-hover"
       } px-2 py-3`}
     >
       <div className="col-span-2 flex space-x-1 items-baseline">

src/search/UndefinedPageButton.tsx

@@ -13,7 +13,7 @@ const UndefinedPageButton: React.FC<
 > = ({ address, direction, hash, disabled, children }) => {
   if (disabled) {
     return (
-      <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded-lg px-3 py-2 text-xs">
+      <span className="bg-link-blue/10 text-gray-400 rounded-lg px-3 py-2 text-xs">
         {children}
       </span>
     );
@@ -21,7 +21,7 @@ const UndefinedPageButton: React.FC<
 
   return (
     <NavLink
-      className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded-lg px-3 py-2 text-xs"
+      className="transition-colors bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded-lg px-3 py-2 text-xs"
       to={`/address/${address}/txs/${direction}${
         direction === "prev" || direction === "next" ? `?h=${hash}` : ""
       }`}

src/special/london/Blip.tsx

@@ -12,7 +12,7 @@ const Blip: React.FC<BlipProps> = ({ value }) => {
     <Transition
       show
       appear
-      enter="transition transform ease-in duration-1000 translate-x-full pl-3"
+      enter="transition ease-in duration-1000 translate-x-full pl-3"
       enterFrom="opacity-100 translate-y-0"
       enterTo="opacity-0 -translate-y-5"
       afterEnter={() => setShow(false)}
@@ -20,7 +20,7 @@ const Blip: React.FC<BlipProps> = ({ value }) => {
       {show && value !== 0 && (
         <div
           className={`absolute bottom-0 font-bold ${
-            value > 0 ? "text-green-500" : "text-red-500"
+            value > 0 ? "text-emerald-500" : "text-red-500"
           } text-3xl`}
         >
           {value > 0 ? `+${value}` : `${value}`}

src/special/london/BlockRow.tsx

@@ -33,7 +33,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
       <div
         className={`text-right ${
           block.gasUsed.gt(gasTarget)
-            ? "text-green-500"
+            ? "text-emerald-500"
             : block.gasUsed.lt(gasTarget)
             ? "text-red-500"
             : ""

src/special/london/Blocks.tsx

@@ -124,7 +124,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   );
 
   return (
-    <div className="w-full flex-grow">
+    <div className="w-full grow">
       <div className="px-9 pt-3 pb-12 divide-y-2">
         <div className="relative">
           <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
@@ -161,7 +161,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
           <div className="text-right">Gas target</div>
           <div className="text-right">Base fee</div>
           <div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
-            <span className="text-yellow-400">
+            <span className="text-amber-400">
               <FontAwesomeIcon icon={faCoins} />
             </span>
             <span>Rewards</span>
@@ -184,10 +184,10 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             key={b.hash}
             show={i < MAX_BLOCK_HISTORY}
             appear
-            enter="transition transform ease-out duration-500"
+            enter="transition ease-out duration-500"
             enterFrom="opacity-0 -translate-y-10"
             enterTo="opacity-100 translate-y-0"
-            leave="transition transform ease-out duration-1000"
+            leave="transition ease-out duration-1000"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-10"
           >

src/special/london/London.tsx

@@ -9,7 +9,7 @@ const London: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const block = useLatestBlock(provider);
   if (!provider || !block) {
-    return <div className="flex-grow"></div>;
+    return <div className="grow"></div>;
   }
 
   // Display countdown

src/transaction/Details.tsx

@@ -138,7 +138,7 @@ const Details: React.FC<DetailsProps> = ({
         {txData.confirmedData === undefined ? (
           <span className="italic text-gray-400">Pending</span>
         ) : txData.confirmedData.status ? (
-          <span className="flex items-baseline w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
+          <span className="flex items-baseline w-min rounded-lg space-x-1 px-3 py-1 bg-emerald-50 text-emerald-500 text-xs">
             <FontAwesomeIcon
               className="self-center"
               icon={faCheckCircle}
@@ -369,7 +369,7 @@ const Details: React.FC<DetailsProps> = ({
               <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
             </span>
             {sendsEthToMiner && (
-              <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
+              <span className="rounded text-amber-500 bg-amber-100 text-xs px-2 py-1">
                 Flashbots
               </span>
             )}

src/transaction/LogEntry.tsx

@@ -47,7 +47,7 @@ const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
   return (
     <div className="flex space-x-10 py-5">
       <div>
-        <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
+        <span className="rounded-full w-12 h-12 flex items-center justify-center bg-emerald-50 text-emerald-500">
           {log.logIndex}
         </span>
       </div>

src/transaction/NavButton.tsx

@@ -18,7 +18,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 }) => {
   if (disabled) {
     return (
-      <span className="bg-link-blue bg-opacity-10 text-gray-300 rounded px-2 py-1 text-xs">
+      <span className="bg-link-blue/10 text-gray-300 rounded px-2 py-1 text-xs">
         {children}
       </span>
     );
@@ -26,7 +26,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 
   return (
     <NavLink
-      className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded px-2 py-1 text-xs"
+      className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded px-2 py-1 text-xs"
       to={addressByNonceURL(sender, nonce)}
     >
       {children}

src/transaction/RewardSplit.tsx

@@ -49,13 +49,13 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
         </div>
         <PercentageGauge
           perc={minerPerc}
-          bgColor="bg-yellow-100"
+          bgColor="bg-amber-100"
-          bgColorPerc="bg-yellow-300"
+          bgColorPerc="bg-amber-300"
-          textColor="text-yellow-700"
+          textColor="text-amber-700"
         />
         <div className="flex items-baseline space-x-1">
           <span className="flex space-x-1">
-            <span className="text-yellow-300" title="Miner fees">
+            <span className="text-amber-300" title="Miner fees">
               <FontAwesomeIcon icon={faCoins} size="1x" />
             </span>
             <span>

src/transaction/TraceItem.tsx

@@ -17,13 +17,13 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
   return (
     <>
       <div className="flex relative">
-        <div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
+        <div className="absolute border-l border-b w-5 h-6 -translate-y-3"></div>
         {!last && (
-          <div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
+          <div className="absolute left-0 border-l w-5 h-full translate-y-3"></div>
         )}
         {t.children && (
           <Switch
-            className="absolute left-0 bg-white transform -translate-x-1/2 text-gray-500"
+            className="absolute left-0 bg-white -translate-x-1/2 text-gray-500"
             checked={expanded}
             onChange={setExpanded}
           >

src/transaction/decoder/BooleanDecoder.tsx

@@ -5,7 +5,7 @@ type BooleanDecoderProps = {
 };
 
 const BooleanDecoder: React.FC<BooleanDecoderProps> = ({ r }) => (
-  <span className={`${r ? "text-green-700" : "text-red-700"}`}>
+  <span className={`${r ? "text-emerald-700" : "text-red-700"}`}>
     {r.toString()}
   </span>
 );

src/transaction/decoder/DecodedParamsTable.tsx

@@ -27,7 +27,7 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
         <th className="col-span-8 pr-1">value</th>
       </tr>
       {!hasParamNames && (
-        <tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-yellow-100 text-red-700">
+        <tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-amber-100 text-red-700">
           <th className="col-span-12 px-1">
             {paramTypes.length > 0 && paramTypes[0].name !== null
               ? "Parameter names are estimated."

tailwind.config.js

@@ -10,8 +10,7 @@ function withOpacity(variableName) {
 }
 
 module.exports = {
-  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
-  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {
@@ -53,12 +52,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      cursor: ["disabled"],
-      backgroundColor: ["disabled"],
-      textColor: ["disabled"],
-    },
-  },
   plugins: [],
 };