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

2022-08-08 02:28:21 -03:00 · 2022-08-08 02:28:21 -03:00 · 96646cb13c
parent 2fca205106 8db54c6871
commit 96646cb13c
40 changed files with 765 additions and 1580 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -75,10 +75,10 @@
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.0",
-    "autoprefixer": "^9.8.8",
-    "postcss": "^7.0.39",
+    "autoprefixer": "^10.4.8",
+    "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"
  }
--- a/src/Block.tsx
+++ b/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}
--- a/src/ConnectionErrorPanel.tsx
+++ b/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>
        )}
--- a/src/Faucets.tsx
+++ b/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}
--- a/src/Home.tsx
+++ b/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
--- a/src/StandardFrame.tsx
+++ b/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;
--- a/src/address/AddressTransactionResults.tsx
+++ b/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"]}
--- a/src/address/Contracts.tsx
+++ b/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-green-600">
+                <span className="font-bold text-emerald-600">Yes</span> with{" "}
+                <span className="font-bold text-emerald-600">
                  {commify(optimizer?.runs)}
                </span>{" "}
                runs
--- a/src/address/DecodedFragment.tsx
+++ b/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";
-    hashBg = "bg-purple-50";
+    letterBg = "bg-violet-500";
+    hashBg = "bg-violet-50";
  } else if (EventFragment.isEventFragment(fragment)) {
    fragmentType = "event";
    sig = intf.getEventTopic(fragment);
    letter = "E";
-    letterBg = "bg-green-300";
-    hashBg = "bg-green-50";
+    letterBg = "bg-emerald-300";
+    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>
--- a/src/block/NavButton.tsx
+++ b/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}
--- a/src/components/DecoratedAddressLink.tsx
+++ b/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
-    className="text-xs text-gray-400 text-opacity-70 not-italic"
-    title={title}
-  >
+  <span className="text-xs text-gray-400/70 not-italic" title={title}>
    {children}
  </span>
 );
--- a/src/components/ENSName.tsx
+++ b/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}
--- a/src/components/InternalSelfDestruct.tsx
+++ b/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} />
--- a/src/components/InternalTransfer.tsx
+++ b/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
--- a/src/components/MethodName.tsx
+++ b/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}>
--- a/src/components/Nonce.tsx
+++ b/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>
 );

--- a/src/components/PercentageBar.tsx
+++ b/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}%` }}
--- a/src/components/SelectionHighlighter.tsx
+++ b/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}
--- a/src/components/TokenName.tsx
+++ b/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>
--- a/src/components/TransactionDirection.tsx
+++ b/src/components/TransactionDirection.tsx
@ -23,15 +23,15 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
  direction,
  flags,
 }) => {
-  let bgColor = "bg-green-50";
-  let fgColor = "text-green-500";
+  let bgColor = "bg-emerald-50";
+  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";
-    fgColor = "text-yellow-600";
+    bgColor = "bg-amber-100";
+    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";
-    fgColor = "text-yellow-400";
+    bgColor = "bg-amber-50";
+    fgColor = "text-amber-400";
  }

  return (
--- a/src/components/UniswapV1ExchangeName.tsx
+++ b/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>
--- a/src/components/UniswapV2PairName.tsx
+++ b/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>
--- a/src/components/UniswapV3PoolName.tsx
+++ b/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>
--- a/src/components/ValueHighlighter.tsx
+++ b/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}
--- a/src/search/PageButton.tsx
+++ b/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}
--- a/src/search/TransactionItem.tsx
+++ b/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
-          ? "bg-yellow-100 hover:bg-yellow-200"
-          : "hover:bg-skin-table-hover"
+        flash ? "bg-amber-100 hover:bg-amber-200" : "hover:bg-skin-table-hover"
      } px-2 py-3`}
    >
      <div className="col-span-2 flex space-x-1 items-baseline">
--- a/src/search/UndefinedPageButton.tsx
+++ b/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}` : ""
      }`}
--- a/src/special/london/Blip.tsx
+++ b/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}`}
--- a/src/special/london/BlockRow.tsx
+++ b/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"
            : ""
--- a/src/special/london/Blocks.tsx
+++ b/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"
          >
--- a/src/special/london/London.tsx
+++ b/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
--- a/src/transaction/Details.tsx
+++ b/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>
            )}
--- a/src/transaction/LogEntry.tsx
+++ b/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>
--- a/src/transaction/NavButton.tsx
+++ b/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}
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@ -49,13 +49,13 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
        </div>
        <PercentageGauge
          perc={minerPerc}
-          bgColor="bg-yellow-100"
-          bgColorPerc="bg-yellow-300"
-          textColor="text-yellow-700"
+          bgColor="bg-amber-100"
+          bgColorPerc="bg-amber-300"
+          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>
--- a/src/transaction/TraceItem.tsx
+++ b/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}
          >
--- a/src/transaction/decoder/BooleanDecoder.tsx
+++ b/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>
 );
--- a/src/transaction/decoder/DecodedParamsTable.tsx
+++ b/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."
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -10,8 +10,7 @@ function withOpacity(variableName) {
 }

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