nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make "Unfollow" button look dangerous

Browse source 
Also add ellipsis
This commit is contained in:
Lim Chee Aun 2022-12-24 10:05:01 +08:00
parent 55ad4be580
commit b96f263f69
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/account.jsx
View file

@ -184,7 +184,7 @@ function Account({ account }) {
{relationshipUIState !== 'loading' && relationship && ( {relationshipUIState !== 'loading' && relationship && (
<button <button
type="button" type="button"
class={following ? 'light' : ''} class={`${following ? 'light danger' : ''}`}
disabled={relationshipUIState === 'loading'} disabled={relationshipUIState === 'loading'}
onClick={() => { onClick={() => {
setRelationshipUIState('loading'); setRelationshipUIState('loading');
@ -210,7 +210,7 @@ function Account({ account }) {
})(); })();
}} }}
> >
{following ? 'Unfollow' : 'Follow'} {following ? 'Unfollow…' : 'Follow'}
</button> </button>
)} )}
</p> </p>

3
src/index.css
View file

@ -153,6 +153,9 @@ button,
color: var(--text-color); color: var(--text-color);
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
} }
:is(button, .button).light.danger:not(:disabled, .disabled) {
color: var(--red-color);
}
:is(button, .button).block { :is(button, .button).block {
display: block; display: block;