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;