From 7d067690fe35c40217dfe303f2e7e9833ddf1cfb Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 20 Feb 2025 15:15:28 +0100
Subject: [PATCH] improve setting design

---
 .../blocked-addresses-setting.module.css               |  7 +++++--
 .../blocked-addresses-setting.tsx                      | 10 +++++++---
 .../subscriptions-setting.module.css                   |  7 +++++--
 .../subscriptions-setting/subscriptions-setting.tsx    | 10 +++++++---
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css
index 4e9b39bd..95259e06 100644
--- a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css
+++ b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css
@@ -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;
diff --git a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx
index 4710ec72..693dcb5d 100644
--- a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx
+++ b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx
@@ -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>
diff --git a/src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css b/src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css
index e7c8c0f8..629714b4 100644
--- a/src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css
+++ b/src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css
@@ -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;
diff --git a/src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx b/src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx
index 5c00cfeb..1467cea3 100644
--- a/src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx
+++ b/src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx
@@ -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>