visual stuff again

src/components/settings_modal/tabs/general_tab.vue

@@ -47,26 +47,24 @@
           >
             {{ $t('settings.text_size') }}
           </UnitSetting>
-          <div>
-            <small>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip"
-                tag="span"
-              >
-                <code>px</code>
-                <code>rem</code>
-              </i18n-t>
-              <br>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip2"
-                tag="span"
-              >
-                <code>14px</code>
-              </i18n-t>
-            </small>
-          </div>
+          <p class="sidenote">
+            <i18n-t
+              scope="global"
+              keypath="settings.text_size_tip"
+              tag="span"
+            >
+              <code>px</code>
+              <code>rem</code>
+            </i18n-t>
+            <br>
+            <i18n-t
+              scope="global"
+              keypath="settings.text_size_tip2"
+              tag="span"
+            >
+              <code>14px</code>
+            </i18n-t>
+          </p>
         </li>
         <li>
           <FontControl
@@ -144,7 +142,7 @@
         class="setting-list"
       >
         <li class="select-multiple">
-          <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
+          <h4 class="label">{{ $t('settings.confirm_dialogs') }}</h4>
           <ul class="option-list">
             <li>
               <BooleanSetting path="modalOnRepeat">
@@ -156,9 +154,10 @@
                 {{ $t('settings.confirm_dialogs_unfollow') }}
               </BooleanSetting>
             </li>
-            <li>
+            <li
+              v-if="!blockExpirationSupported"
+            >
               <BooleanSetting
-                v-if="!blockExpirationSupported"
                 path="modalOnBlock"
               >
                 {{ $t('settings.confirm_dialogs_block') }}

src/components/settings_modal/tabs/notifications_tab.vue

@@ -12,11 +12,9 @@
           <BooleanSetting path="ignoreInactionableSeen">
             {{ $t('settings.notification_setting_ignore_inactionable_seen') }}
           </BooleanSetting>
-          <div>
-            <small>
-              {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
-            </small>
-          </div>
+          <p class="sidenote">
+            {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
+          </p>
         </li>
         <li>
           <BooleanSetting
@@ -41,7 +39,10 @@
         </li>
         <li>
           <h4> {{ $t('settings.notification_visibility') }}</h4>
-          <p v-if="expertLevel > 0">
+          <p
+            class="sidenote"
+            v-if="expertLevel > 0"
+          >
             {{ $t('settings.notification_setting_filters_chrome_push') }}
           </p>
           <ul class="setting-list two-column">
@@ -260,11 +261,12 @@
               >
                 {{ $t('settings.enable_web_push_always_show') }}
               </BooleanSetting>
-              <div :class="{ faint: !mergedConfig.webPushNotifications }">
-                <small>
-                  {{ $t('settings.enable_web_push_always_show_tip') }}
-                </small>
-              </div>
+              <p
+                :class="{ faint: !mergedConfig.webPushNotifications }"
+                class="sidenote"
+              >
+                {{ $t('settings.enable_web_push_always_show_tip') }}
+              </p>
             </li>
           </ul>
         </li>
@@ -279,10 +281,12 @@
         </li>
       </ul>
     </div>
-    <div class="setting-section">
-      <p>{{ $t('settings.notification_mutes') }}</p>
-      <p>{{ $t('settings.notification_blocks') }}</p>
-    </div>
+    <p class="sidenote">
+      <ul>
+        <li>{{ $t('settings.notification_mutes') }}</li>
+        <li>{{ $t('settings.notification_blocks') }}</li>
+      </ul>
+    </p>
   </div>
 </template>