improve setting design

This commit is contained in:
Tom (plebeius.eth)
2025-02-20 15:15:28 +01:00
parent 882703b00d
commit 7d067690fe
4 changed files with 24 additions and 10 deletions
@@ -1,6 +1,5 @@
.setting {
margin-left: 10px;
margin-bottom: 10px;
margin: 10px 10px 0 10px;
}
.blockedAddress {
@@ -18,6 +17,10 @@
text-decoration: var(--button-text-decoration);
}
.unblockButton {
float: right;
}
.button:hover {
color: var(--button-desktop-text-color-hover);
cursor: pointer;
@@ -8,8 +8,12 @@ const UnblockButton = ({ address }: { address: string }) => {
const { unblock } = useBlock({ address });
return (
<span className={styles.button} onClick={unblock}>
{t('unblock')}
<span className={styles.unblockButton}>
[
<span className={styles.button} onClick={unblock}>
{t('unblock')}
</span>
]
</span>
);
};
@@ -40,7 +44,7 @@ const BlockedAddressesSetting = () => {
<ul className={styles.blockedAddresses}>
{addressList.map((address: string) => (
<li key={address} className={styles.blockedAddress}>
{address && Plebbit.getShortAddress(address)} [<UnblockButton address={address} />]
{address && Plebbit.getShortAddress(address)} <UnblockButton address={address} />
</li>
))}
</ul>
@@ -1,6 +1,5 @@
.setting {
margin-left: 10px;
margin-bottom: 10px;
margin: 10px 10px 0 10px;
}
.subscription {
@@ -18,6 +17,10 @@
text-decoration: var(--button-text-decoration);
}
.subscriptionButton {
float: right;
}
.button:hover {
color: var(--button-desktop-text-color-hover);
cursor: pointer;
@@ -20,8 +20,12 @@ const SubscriptionButton = ({ address }: { address: string }) => {
};
return (
<span className={styles.button} onClick={handleClick}>
{recentlyUnsubscribed || !subscribed ? t('subscribe') : t('unsubscribe')}
<span className={styles.subscriptionButton}>
[
<span className={styles.button} onClick={handleClick}>
{recentlyUnsubscribed || !subscribed ? t('subscribe') : t('unsubscribe')}
</span>
]
</span>
);
};
@@ -53,7 +57,7 @@ const SubscriptionsSetting = () => {
<ul className={styles.subscriptions}>
{subscriptions?.map((address: string) => (
<li key={address} className={styles.subscription}>
{address && Plebbit.getShortAddress(address)} [<SubscriptionButton address={address} />]
{address && Plebbit.getShortAddress(address)} <SubscriptionButton address={address} />
</li>
))}
</ul>