Code simplification: new tailwindcss 3 opacity syntax

This commit is contained in:
Willian Mitsuda 2022-08-08 01:11:17 -03:00
parent b89ddc2e35
commit 8f074b6650
6 changed files with 10 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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