From f1ca52d561c2e6ec70fa91b1369f7e98ed8e1814 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 26 Dec 2022 14:29:57 +0800
Subject: [PATCH] Button text swapper for Unfollow button

---
 src/components/account.jsx | 13 +++++++++++--
 src/index.css              | 25 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/account.jsx b/src/components/account.jsx
index ec315448..6750eea4 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -190,7 +190,8 @@ function Account({ account }) {
               {relationshipUIState !== 'loading' && relationship && (
                 <button
                   type="button"
-                  class={`${following ? 'light danger' : ''}`}
+                  class={`${following ? 'light' : ''} swap`}
+                  data-swap-state="danger"
                   disabled={relationshipUIState === 'loading'}
                   onClick={() => {
                     setRelationshipUIState('loading');
@@ -218,7 +219,15 @@ function Account({ account }) {
                     })();
                   }}
                 >
-                  {following ? 'Unfollow…' : 'Follow'}
+                  {following ? (
+                    <>
+                      <span>Following</span>
+                      <span>Unfollow…</span>
+                    </>
+                  ) : (
+                    'Follow'
+                  )}
+                  {/* {following ? 'Unfollow…' : 'Follow'} */}
                 </button>
               )}
             </p>
diff --git a/src/index.css b/src/index.css
index 053dbcb0..635a46ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -172,6 +172,31 @@ button,
   border-radius: 0;
 }
 
+:is(button, .button).swap {
+  display: grid;
+  /* 1 column, 1 row */
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+:is(button, .button).swap > * {
+  grid-column: 1;
+  grid-row: 1;
+  transition: opacity 0.3s;
+}
+:is(button, .button).swap > *:nth-child(2) {
+  opacity: 0;
+}
+:is(button, .button).swap:hover > *:nth-child(2) {
+  opacity: 1;
+}
+:is(button, .button).swap[data-swap-state='danger']:hover {
+  color: var(--red-color);
+  border-color: var(--red-color);
+}
+:is(button, .button).swap:hover > *:nth-child(1) {
+  opacity: 0;
+}
+
 input[type='text'],
 textarea,
 select {