visual stuff again

src/components/font_control/font_control.vue

@@ -13,7 +13,7 @@
           keypath="settings.style.fonts.override"
           tag="span"
         >
-          <span class="label">
+          <span>
             {{ label }}
           </span>
         </i18n-t>
@@ -73,7 +73,7 @@
       </span>
       <span
         v-else
-        class="btn-group"
+        class="font-selector btn-group"
       >
         <button
           class="btn button-default"
@@ -152,6 +152,14 @@
   }
 
   .-mobile & {
+    .font-input {
+      display: block;
+    }
+
+    .font-selector {
+      margin-top: 0.5em;
+    }
+
     .label {
       text-align: left;
     }

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -61,11 +61,26 @@
   .add-button {
     display: block;
     text-align: center;
+    padding-bottom: 1em;
 
     .default-button {
       display: block;
       width: auto;
     }
   }
+
+  .-mobile & {
+    li.setting-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+      align-items: stretch;
+      border-bottom: none;
+    }
+
+    .add-button {
+      border-bottom: 1px solid var(--border);
+    }
+  }
 }
 </style>

src/components/settings_modal/helpers/boolean_setting.vue

@@ -30,11 +30,13 @@
       </span>
     </Checkbox>
     <p
-      v-if="backendDescriptionDescription"
+      v-if="backendDescriptionDescription || showDescription"
       class="setting-description"
       :class="{ 'faint': shouldBeDisabled }"
     >
-      {{ backendDescriptionDescription + ' ' }}
+      <slot name="description">
+        {{ backendDescriptionDescription + ' ' }}
+      </slot>
     </p>
     <DraftButtons />
   </label>

src/components/settings_modal/helpers/list_setting.vue

@@ -83,8 +83,10 @@
 <script src="./list_setting.js"></script>
 <style lang="scss">
 .ListSetting {
-  .btn-group {
-    display: flex
+  .setting-list {
+    .checkbox {
+      padding: 0.5em 0;
+    }
   }
 }
 </style>

src/components/settings_modal/helpers/setting.js

@@ -18,6 +18,10 @@ export default {
       type: [String, Array],
       required: false
     },
+    showDescription: {
+      type: Boolean,
+      required: false
+    },
     descriptionPathOverride: {
       type: [String, Array],
       required: false
@@ -69,7 +73,7 @@ export default {
       type: Boolean
     },
     overrideBackendDescriptionLabel: {
-      type: Boolean
+      type: [Boolean, String]
     },
     draftMode: {
       type: Boolean,
@@ -157,6 +161,8 @@ export default {
       }
     },
     backendDescriptionDescription () {
+      console.log('LOL', this.description)
+      if (this.description) return this.description
       if (this.realSource !== 'admin') return ''
       if (this.hideDescription) return null
       if (!this.backendDescription || this.overrideBackendDescription) {

src/components/settings_modal/helpers/vertical_tab_switcher.scss

@@ -107,6 +107,10 @@
         flex-shrink: 1;
       }
     }
+
+    .tab-slot-wrapper {
+      grid-template-columns: 0 minmax(min-content, 45em) 0;
+    }
   }
 
   @supports (container-type: inline-size) {

src/components/settings_modal/settings_modal.scss

@@ -6,6 +6,7 @@
     font-weight: 500;
     margin-top: 1em;
     margin-bottom: 1em;
+    margin-right: 1em;
   }
 
   h3 {
@@ -13,6 +14,7 @@
     font-weight: 500;
     margin-top: 1em;
     margin-bottom: 0.5em;
+    margin-right: 1em;
     border-bottom: 1px solid var(--border);
     padding-bottom: 0.25em;
     box-sizing: border-box;
@@ -22,26 +24,41 @@
   h4 {
     font-size: 1.1rem;
     margin-top: 1em;
+    margin-right: 1em;
     margin-bottom: 0.5em;
+    margin-left: 1em;
   }
 
   h5 {
     font-size: 1rem;
-    margin-bottom: 0.5em;
-    margin-top: 0;
+    margin-right: 1em;
+    margin-bottom: 0.25em;
+    margin-top: 0.75em;
   }
 
   p {
     line-height: 1.5;
   }
 
+  .sidenote {
+    margin-left: 5em;
+    padding: 0.25em 1em;
+    margin-top: 0.25em;
+  }
+
+  .setting-description {
+    margin-top: 0.2em;
+    margin-bottom: 0;
+    font-size: 80%;
+  }
+
   .setting-item {
     display: grid;
     grid-template-areas:
       "label control"
       ".    desc"
       ".   draft";
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 2fr 3fr;
     column-gap: 0.5em;
     align-items: baseline;
     padding: 0.5em 0;
@@ -97,6 +114,14 @@
     &.two-column {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      margin-left: 2em;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.5em;
+      margin-bottom: 1em;
+
+      .setting-item {
+        grid-template-columns: 3fr 1fr;
+      }
 
       > li {
         margin: 0;
@@ -105,12 +130,6 @@
     }
   }
 
-  .setting-description {
-    margin-top: 0.2em;
-    margin-bottom: 0;
-    font-size: 80%;
-  }
-
   .settings-modal-panel {
     overflow: hidden;
     transition: transform;
@@ -160,10 +179,9 @@
     }
 
     .setting-item {
-      border-bottom: 1px solid var(--border);
       grid-template-columns: 1fr min-content;
       column-gap: 0.5em;
-      padding: 1em 0;
+      padding: 1em 1em;
       align-items: center;
 
       .setting-label {
@@ -173,6 +191,12 @@
 
     ul {
       padding: 0;
+
+      li:not(:first-child) {
+        .setting-item {
+          border-top: 1px solid var(--border);
+        }
+      }
     }
 
     .setting-list:not(.suboptions),

src/components/settings_modal/settings_modal_user_content.vue

@@ -49,7 +49,6 @@
       <AppearanceTab />
     </div>
     <div
-      :full-width="$store.getters.mergedConfig.expertLevel > 0"
       :label="$t('settings.layout')"
       icon="table-columns"
       data-tab-name="layout"

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>