From b96f263f695e100ce7629a09007d95e71cf0b543 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 24 Dec 2022 10:05:01 +0800
Subject: [PATCH] Make "Unfollow" button look dangerous

Also add ellipsis
---
 src/components/account.jsx | 4 ++--
 src/index.css              | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/account.jsx b/src/components/account.jsx
index 4b66e7a6..03603ed3 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -184,7 +184,7 @@ function Account({ account }) {
             {relationshipUIState !== 'loading' && relationship && (
               <button
                 type="button"
-                class={following ? 'light' : ''}
+                class={`${following ? 'light danger' : ''}`}
                 disabled={relationshipUIState === 'loading'}
                 onClick={() => {
                   setRelationshipUIState('loading');
@@ -210,7 +210,7 @@ function Account({ account }) {
                   })();
                 }}
               >
-                {following ? 'Unfollow' : 'Follow'}
+                {following ? 'Unfollow…' : 'Follow'}
               </button>
             )}
           </p>
diff --git a/src/index.css b/src/index.css
index f54aa3bb..053dbcb0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -153,6 +153,9 @@ button,
   color: var(--text-color);
   border: 1px solid var(--outline-color);
 }
+:is(button, .button).light.danger:not(:disabled, .disabled) {
+  color: var(--red-color);
+}
 
 :is(button, .button).block {
   display: block;