Code simplification: remove transform/filter classes unnecessary on tailwind 3
This commit is contained in:
parent
42f03fc557
commit
b89ddc2e35
|
@ -48,7 +48,7 @@ type ContentProps = {
|
||||||
const Content: React.FC<ContentProps> = ({ linkable, name }) => (
|
const Content: React.FC<ContentProps> = ({ linkable, name }) => (
|
||||||
<>
|
<>
|
||||||
<img
|
<img
|
||||||
className={`self-center ${linkable ? "" : "filter grayscale"}`}
|
className={`self-center ${linkable ? "" : "grayscale"}`}
|
||||||
src={ENSLogo}
|
src={ENSLogo}
|
||||||
alt="ENS Logo"
|
alt="ENS Logo"
|
||||||
width={12}
|
width={12}
|
||||||
|
|
|
@ -74,7 +74,7 @@ const Content: React.FC<ContentProps> = ({
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
|
||||||
>
|
>
|
||||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,7 +77,7 @@ const Content: React.FC<ContentProps> = ({
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
|
||||||
>
|
>
|
||||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -94,7 +94,7 @@ const Content: React.FC<ContentProps> = ({
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
|
||||||
>
|
>
|
||||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -102,7 +102,7 @@ const Content: React.FC<ContentProps> = ({
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
className={`self-center w-5 h-5 ${linkable ? "" : "grayscale"}`}
|
||||||
>
|
>
|
||||||
<TokenLogo chainId={chainId} address={address} name={name} />
|
<TokenLogo chainId={chainId} address={address} name={name} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,7 +12,7 @@ const Blip: React.FC<BlipProps> = ({ value }) => {
|
||||||
<Transition
|
<Transition
|
||||||
show
|
show
|
||||||
appear
|
appear
|
||||||
enter="transition transform ease-in duration-1000 translate-x-full pl-3"
|
enter="transition ease-in duration-1000 translate-x-full pl-3"
|
||||||
enterFrom="opacity-100 translate-y-0"
|
enterFrom="opacity-100 translate-y-0"
|
||||||
enterTo="opacity-0 -translate-y-5"
|
enterTo="opacity-0 -translate-y-5"
|
||||||
afterEnter={() => setShow(false)}
|
afterEnter={() => setShow(false)}
|
||||||
|
|
|
@ -184,10 +184,10 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
|
||||||
key={b.hash}
|
key={b.hash}
|
||||||
show={i < MAX_BLOCK_HISTORY}
|
show={i < MAX_BLOCK_HISTORY}
|
||||||
appear
|
appear
|
||||||
enter="transition transform ease-out duration-500"
|
enter="transition ease-out duration-500"
|
||||||
enterFrom="opacity-0 -translate-y-10"
|
enterFrom="opacity-0 -translate-y-10"
|
||||||
enterTo="opacity-100 translate-y-0"
|
enterTo="opacity-100 translate-y-0"
|
||||||
leave="transition transform ease-out duration-1000"
|
leave="transition ease-out duration-1000"
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
leaveTo="opacity-0 translate-y-10"
|
leaveTo="opacity-0 translate-y-10"
|
||||||
>
|
>
|
||||||
|
|
|
@ -17,13 +17,13 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex relative">
|
<div className="flex relative">
|
||||||
<div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
|
<div className="absolute border-l border-b w-5 h-6 -translate-y-3"></div>
|
||||||
{!last && (
|
{!last && (
|
||||||
<div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
|
<div className="absolute left-0 border-l w-5 h-full translate-y-3"></div>
|
||||||
)}
|
)}
|
||||||
{t.children && (
|
{t.children && (
|
||||||
<Switch
|
<Switch
|
||||||
className="absolute left-0 bg-white transform -translate-x-1/2 text-gray-500"
|
className="absolute left-0 bg-white -translate-x-1/2 text-gray-500"
|
||||||
checked={expanded}
|
checked={expanded}
|
||||||
onChange={setExpanded}
|
onChange={setExpanded}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue