Color renames from tailwindcss 3

src/Block.tsx

@@ -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/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";

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,7 +73,7 @@ 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>
       )}

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/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/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/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/special/london/Blip.tsx

@@ -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

@@ -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>

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/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/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."