Color renames from tailwindcss 3

This commit is contained in:
Willian Mitsuda 2022-08-08 01:56:24 -03:00
parent 8f074b6650
commit 5d3bf127f4
24 changed files with 45 additions and 47 deletions

View File

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

View File

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

View File

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

View File

@ -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"]}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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}%` }}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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