Add a divider to distinguish grouped settings

src/views/emojiPacks/index.vue

@@ -9,7 +9,7 @@
         </el-button>
       </el-tooltip>
     </div>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form label-width="180px" class="emoji-packs-form">
       <el-form-item :label="$t('emoji.localPacks')">
         <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
@@ -30,7 +30,7 @@
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
         </el-collapse>
       </el-form-item>
-      <div class="line"/>
+      <el-divider class="divider"/>
       <el-form-item :label="$t('emoji.remotePacks')">
         <div class="create-pack">
           <el-input

src/views/reports/components/GroupedReport.vue

@@ -24,7 +24,7 @@
           </div>
         </div>
         <div>
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.account') }}:</span>
           <img
             :src="groupedReport.account.avatar"
@@ -35,7 +35,7 @@
           </a>
         </div>
         <div>
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.actors') }}:</span>
           <span v-for="(actor, index) in groupedReport.actors" :key="actor.id">
             <a :href="actor.url" target="_blank">
@@ -44,7 +44,7 @@
           </span>
         </div>
         <div v-if="groupedReport.status">
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
           <status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
         </div>

src/views/reports/components/Report.vue

@@ -27,7 +27,7 @@
             </div>
           </div>
           <div>
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.account') }}:</span>
             <img
               :src="report.account.avatar"
@@ -38,13 +38,13 @@
             </a>
           </div>
           <div v-if="report.content.length > 0">
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.content') }}:
               <span>{{ report.content }}</span>
             </span>
           </div>
           <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
             <img
               :src="report.actor.avatar"

src/views/settings/components/ActivityPub.vue

@@ -3,7 +3,8 @@
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
+    <el-divider class="divider"/>
     <el-form ref="userData" :model="userData" :label-width="labelWidth">
       <setting :setting-group="user" :data="userData"/>
     </el-form>

src/views/settings/components/Authentication.vue

@@ -3,15 +3,15 @@
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
       <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="authData" :model="authData" :label-width="labelWidth">
       <setting :setting-group="auth" :data="authData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
       <setting :setting-group="ldap" :data="ldapData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
       <setting :setting-group="oauth2" :data="oauth2Data"/>
     </el-form>

src/views/settings/components/Captcha.vue

@@ -3,7 +3,7 @@
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
       <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
     </el-form>

src/views/settings/components/Frontend.vue

@@ -9,18 +9,18 @@
       </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.emoji') }}</span>
       </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
       <setting :setting-group="chat" :data="chatData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.markup') }}</span>

src/views/settings/components/Http.vue

@@ -9,15 +9,15 @@
       </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
       <setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
       <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
     </el-form>

src/views/settings/components/Inputs.vue

@@ -87,7 +87,6 @@
       <!-------------------->
       <div
         v-if="setting.description && setting.type !== 'keyword'"
-        :class="inputClass"
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>

src/views/settings/components/Instance.vue

@@ -3,23 +3,23 @@
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
       <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="fetchInitialPosts" :model="fetchInitialPostsData" :label-width="labelWidth">
       <setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
       <setting :setting-group="manifest" :data="manifestData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>

src/views/settings/components/Logger.vue

@@ -3,15 +3,15 @@
     <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
       <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
       <setting :setting-group="console" :data="consoleData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
       <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>

src/views/settings/components/MRF.vue

@@ -3,15 +3,15 @@
     <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
       <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
       <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
       <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
       <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
     </el-form>
@@ -21,11 +21,11 @@
     <el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
       <setting :setting-group="mrfMention" :data="mrfMentionData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
       <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
     </el-form>

src/views/settings/components/Mailer.vue

@@ -3,7 +3,7 @@
     <el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
       <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
     </el-form>

src/views/settings/components/Metadata.vue

@@ -3,7 +3,7 @@
     <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>

src/views/settings/components/Other.vue

@@ -3,7 +3,7 @@
     <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
       <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>

src/views/settings/components/Setting.vue

@@ -29,6 +29,7 @@
             :nested="false"/>
         </div>
         <div v-if="compound(setting)">
+          <el-divider v-if="divideSetting(setting.key)" class="divider"/>
           <div v-if="!setting.children">
             <inputs
               :setting-group="settingGroup"
@@ -59,7 +60,7 @@
                 :nested="true"/>
             </div>
           </div>
-          <div class="line"/>
+          <el-divider class="divider"/>
         </div>
       </div>
     </div>
@@ -119,6 +120,9 @@ export default {
         type.includes('keyword') ||
         key === ':replace'
     },
+    divideSetting(key) {
+      return [':sslopts', ':tlsopts', ':adapter', ':poll_limits', ':queues', ':styling', ':proxy_opts'].includes(key)
+    },
     getFormattedDescription(desc) {
       return marked(desc)
     },

src/views/settings/components/Upload.vue

@@ -8,16 +8,16 @@
         <span class="label-font">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </el-form>
     <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </el-form>
     <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>

src/views/settings/components/inputComponents/IconsInput.vue

@@ -14,7 +14,7 @@
         <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
         <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
       </div>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </div>
     <div class="icons-button-container">
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>

src/views/settings/styles/main.scss

@@ -34,6 +34,9 @@
     overflow-wrap: break-word;
     margin-bottom: 0;
   }
+  .divider {
+    margin: 0 0 18px 0;
+  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -145,7 +148,7 @@
     width: 100%;
     height: 0;
     border: 1px solid #eee;
-    margin-bottom: 22px;
+    margin-bottom: 18px;
   }
   .mascot-container {
     margin-bottom: 15px;
@@ -291,6 +294,9 @@
         font-size: 14px;
       }
     }
+    .divider {
+      margin: 0 0 10px 0;
+    }
     .follow-relay {
       width: 70%;
       margin-right: 5px;
@@ -304,7 +310,7 @@
     }
     .input-container {
       width: 100%;
-      .el-form-item {
+      .el-form-item:first-child {
         margin: 0;
         padding: 0 15px 10px 0;
       }
@@ -349,6 +355,9 @@
     .socks5-checkbox-container {
       width: 100%;
     }
+    .submit-button {
+      margin: 0 15px 22px 0;
+    }
     .el-input__inner {
     padding: 0 5px 0 5px
     }