fix styling

src/components/topbar-edit-modal/topbar-edit-modal.module.css

@@ -138,13 +138,20 @@
 
 .editSubscriptionsLink {
   font-size: var(--body-font-size);
-  color: var(--link-color, #0000ee);
-  text-decoration: underline;
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
   cursor: pointer;
 }
 
+.editSubscriptionsWrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
 .editSubscriptionsLink:hover {
-  color: var(--link-hover-color, #551a8b);
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
 .topbarEditFooter {

src/components/topbar-edit-modal/topbar-edit-modal.tsx

@@ -100,8 +100,9 @@ const TopbarEditModal = () => {
             <div className={styles.section}>
               <div className={styles.checkboxItem}>
                 <input type='checkbox' id='show-subscriptions' checked={showSubscriptions} onChange={(e) => setShowSubscriptions(e.target.checked)} />
-                <label htmlFor='show-subscriptions'>
-                  show subscriptions (
+                <label htmlFor='show-subscriptions'>show subscriptions</label>
+                <span className={styles.editSubscriptionsWrapper}>
+                  (
                   <Link
                     to={location.pathname.replace(/\/$/, '') + '/settings#subscriptions-settings'}
                     className={styles.editSubscriptionsLink}
@@ -113,7 +114,7 @@ const TopbarEditModal = () => {
                     edit subscriptions
                   </Link>
                   )
-                </label>
+                </span>
               </div>
             </div>
           )}