From 8f074b6650a8f23f85315b4d9b4d4c706941bb02 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 8 Aug 2022 01:11:17 -0300
Subject: [PATCH] Code simplification: new tailwindcss 3 opacity syntax

---
 src/Block.tsx                           | 2 +-
 src/block/NavButton.tsx                 | 4 ++--
 src/components/DecoratedAddressLink.tsx | 5 +----
 src/search/PageButton.tsx               | 4 ++--
 src/search/UndefinedPageButton.tsx      | 4 ++--
 src/transaction/NavButton.tsx           | 4 ++--
 6 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index c8afe43..aae470e 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -89,7 +89,7 @@ const Block: React.FC = () => {
           </InfoRow>
           <InfoRow title="Transactions">
             <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)}
             >
               {block.transactionCount} transactions
diff --git a/src/block/NavButton.tsx b/src/block/NavButton.tsx
index 96e65e4..2af91d3 100644
--- a/src/block/NavButton.tsx
+++ b/src/block/NavButton.tsx
@@ -17,7 +17,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 }) => {
   if (disabled) {
     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}
       </span>
     );
@@ -25,7 +25,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 
   return (
     <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)}
     >
       {children}
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 806d238..d843c28 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -160,10 +160,7 @@ const AddressLegend: React.FC<PropsWithChildren<AddressLegendProps>> = ({
   title,
   children,
 }) => (
-  <span
-    className="text-xs text-gray-400 text-opacity-70 not-italic"
-    title={title}
-  >
+  <span className="text-xs text-gray-400/70 not-italic" title={title}>
     {children}
   </span>
 );
diff --git a/src/search/PageButton.tsx b/src/search/PageButton.tsx
index fb6e1f1..d6a59ce 100644
--- a/src/search/PageButton.tsx
+++ b/src/search/PageButton.tsx
@@ -13,7 +13,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
 }) => {
   if (disabled) {
     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}
       </span>
     );
@@ -21,7 +21,7 @@ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
 
   return (
     <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}`}
     >
       {children}
diff --git a/src/search/UndefinedPageButton.tsx b/src/search/UndefinedPageButton.tsx
index 13cc42f..e7ac7f6 100644
--- a/src/search/UndefinedPageButton.tsx
+++ b/src/search/UndefinedPageButton.tsx
@@ -13,7 +13,7 @@ const UndefinedPageButton: React.FC<
 > = ({ address, direction, hash, disabled, children }) => {
   if (disabled) {
     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}
       </span>
     );
@@ -21,7 +21,7 @@ const UndefinedPageButton: React.FC<
 
   return (
     <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}${
         direction === "prev" || direction === "next" ? `?h=${hash}` : ""
       }`}
diff --git a/src/transaction/NavButton.tsx b/src/transaction/NavButton.tsx
index a274422..3f7186b 100644
--- a/src/transaction/NavButton.tsx
+++ b/src/transaction/NavButton.tsx
@@ -18,7 +18,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 }) => {
   if (disabled) {
     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}
       </span>
     );
@@ -26,7 +26,7 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
 
   return (
     <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)}
     >
       {children}