From 54f5c9e6c7757eab5f81917bb7d4817fa943747a Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 1 Sep 2021 18:12:35 -0300
Subject: [PATCH] Extract action button theme

---
 src/Home.tsx       | 4 ++--
 src/Title.tsx      | 4 ++--
 src/index.css      | 8 ++++++++
 tailwind.config.js | 5 +++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 6fb58c8..650c86c 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -56,7 +56,7 @@ const Home: React.FC = () => {
             autoFocus
           />
           <button
-            className="border rounded-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-base text-gray-500 flex justify-center items-center"
+            className="border rounded-r bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-base text-skin-button flex justify-center items-center"
             type="button"
             onClick={() => setScanning(true)}
             title="Scan an ETH address using your camera"
@@ -65,7 +65,7 @@ const Home: React.FC = () => {
           </button>
         </div>
         <button
-          className="mx-auto px-3 py-1 mb-10 rounded bg-gray-100 hover:bg-gray-200 focus:outline-none"
+          className="mx-auto px-3 py-1 mb-10 rounded bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none"
           type="submit"
         >
           Search
diff --git a/src/Title.tsx b/src/Title.tsx
index 796fd83..25b408d 100644
--- a/src/Title.tsx
+++ b/src/Title.tsx
@@ -68,7 +68,7 @@ const Title: React.FC = () => {
               ref={searchRef}
             />
             <button
-              className="border bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              className="border bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-sm text-skin-button"
               type="button"
               onClick={() => setScanning(true)}
               title="Scan an ETH address using your camera"
@@ -76,7 +76,7 @@ const Title: React.FC = () => {
               <FontAwesomeIcon icon={faQrcode} />
             </button>
             <button
-              className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              className="rounded-r border-t border-b border-r bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-sm text-skin-button"
               type="submit"
             >
               Search
diff --git a/src/index.css b/src/index.css
index 4cd29ee..771e212 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,10 @@
 
 @layer base {
   :root {
+    --color-button-fill: 244, 244, 245; /* gray-100 */
+    --color-button-hover-fill: 228, 228, 231; /* gray-200 */
+    --color-button-text: 113, 113, 122; /* gray-500 */
+
     --color-from-border: 254, 226, 226;
     --color-from-text: 220, 38, 38;
     --color-from-fill: 254, 242, 242;
@@ -12,6 +16,10 @@
     --color-table-row-hover: 243, 244, 246;
   }
   .test-theme {
+    --color-button-fill: 14, 165, 233; /* sky-500 */
+    --color-button-hover-fill: 56, 189, 248; /* sky-400 */
+    --color-button-text: 186, 230, 253; /* sky-200 */
+
     --color-from-border: 251, 146, 60;
     --color-from-text: 249, 115, 22;
     --color-from-fill: 254, 215, 170;
diff --git a/tailwind.config.js b/tailwind.config.js
index 48964a3..a6eafd8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,11 +35,16 @@ module.exports = {
       },
       textColor: {
         skin: {
+          button: withOpacity("--color-button-text"),
+
           from: withOpacity("--color-from-text"),
         },
       },
       backgroundColor: {
         skin: {
+          "button-fill": withOpacity("--color-button-fill"),
+          "button-hover-fill": withOpacity("--color-button-hover-fill"),
+
           from: withOpacity("--color-from-fill"),
           to: withOpacity("--color-to-fill"),
           "table-hover": withOpacity("--color-table-row-hover"),