Code simplification: new tailwindcss 3 opacity syntax
This commit is contained in:
parent
b89ddc2e35
commit
8f074b6650
|
@ -89,7 +89,7 @@ const Block: React.FC = () => {
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
<InfoRow title="Transactions">
|
<InfoRow title="Transactions">
|
||||||
<NavLink
|
<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)}
|
to={blockTxsURL(block.number)}
|
||||||
>
|
>
|
||||||
{block.transactionCount} transactions
|
{block.transactionCount} transactions
|
||||||
|
|
|
@ -17,7 +17,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
|
||||||
}) => {
|
}) => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -25,7 +25,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<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)}
|
to={urlBuilder ? urlBuilder(blockNum) : blockURL(blockNum)}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -160,10 +160,7 @@ const AddressLegend: React.FC<PropsWithChildren<AddressLegendProps>> = ({
|
||||||
title,
|
title,
|
||||||
children,
|
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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
|
||||||
}) => {
|
}) => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -21,7 +21,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<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}`}
|
to={`?p=${goToPage}`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -13,7 +13,7 @@ const UndefinedPageButton: React.FC<
|
||||||
> = ({ address, direction, hash, disabled, children }) => {
|
> = ({ address, direction, hash, disabled, children }) => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -21,7 +21,7 @@ const UndefinedPageButton: React.FC<
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<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}${
|
to={`/address/${address}/txs/${direction}${
|
||||||
direction === "prev" || direction === "next" ? `?h=${hash}` : ""
|
direction === "prev" || direction === "next" ? `?h=${hash}` : ""
|
||||||
}`}
|
}`}
|
||||||
|
|
|
@ -18,7 +18,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
|
||||||
}) => {
|
}) => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -26,7 +26,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavLink
|
<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)}
|
to={addressByNonceURL(sender, nonce)}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
Loading…
Reference in New Issue