Color renames from tailwindcss 3
This commit is contained in:
parent
8f074b6650
commit
5d3bf127f4
@ -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}
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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}
|
||||
|
@ -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"]}
|
||||
|
@ -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
|
||||
|
@ -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";
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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} />
|
||||
|
@ -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
|
||||
|
@ -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}>
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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}%` }}
|
||||
|
@ -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}
|
||||
|
@ -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 (
|
||||
|
@ -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}
|
||||
|
@ -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">
|
||||
|
@ -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}`}
|
||||
|
@ -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"
|
||||
: ""
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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."
|
||||
|
Loading…
Reference in New Issue
Block a user