improve setting design

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css

@@ -1,6 +1,5 @@
 .setting {
-  margin-left: 10px;
+  margin: 10px 10px 0 10px;
-  margin-bottom: 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;

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx

@@ -8,9 +8,13 @@ const UnblockButton = ({ address }: { address: string }) => {
   const { unblock } = useBlock({ address });
 
   return (
+    <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>

src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css

@@ -1,6 +1,5 @@
 .setting {
-  margin-left: 10px;
+  margin: 10px 10px 0 10px;
-  margin-bottom: 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;

src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx

@@ -20,9 +20,13 @@ const SubscriptionButton = ({ address }: { address: string }) => {
   };
 
   return (
+    <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>