mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 12:18:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

Button text swapper for Unfollow button

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-26 14:29:57 +08:00
parent 6b41666efe
commit f1ca52d561
2 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/account.jsx
View file

@ -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>

25
src/index.css
View file

@ -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 {