Fix preference scaling and improve UX (#2815)

src/main/config.js

@@ -19,6 +19,8 @@ export const editorWinOptions = Object.freeze({
 })
 
 export const preferencesWinOptions = Object.freeze({
+  minWidth: 450,
+  minHeight: 350,
   width: 950,
   height: 650,
   webPreferences: {

src/main/windows/setting.js

@@ -4,7 +4,7 @@ import { enable as remoteEnable } from '@electron/remote/main'
 import electronLocalshortcut from '@hfelix/electron-localshortcut'
 import BaseWindow, { WindowLifecycle, WindowType } from './base'
 import { centerWindowOptions } from './utils'
-import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx, isWindows } from '../config'
+import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx } from '../config'
 
 class SettingWindow extends BaseWindow {
   /**
@@ -30,9 +30,7 @@ class SettingWindow extends BaseWindow {
 
     // WORKAROUND: Electron has issues with different DPI per monitor when
     // setting a fixed window size.
-    if (isWindows) {
     winOptions.resizable = true
-    }
 
     // Enable native or custom/frameless window and titlebar
     const { titleBarStyle, theme } = preferences.getAll()

src/renderer/prefComponents/common/compound/index.vue

@@ -29,10 +29,17 @@ export default {
     margin: 20px 0;
     color: var(--editorColor);
 
+    & .pref-compound-head h6.title {
+      font-weight: 400;
+      font-size: 1.1em;
+      padding-bottom: 6px;
+    }
+
     & .pref-compound-body {
       padding: 8px 16px 8px 16px;
       margin-top: -12px;
       background: rgba(0, 0, 0, .04);
+      border: 1px solid rgba(255, 255, 255, .03);
     }
 
     & .description {

src/renderer/prefComponents/editor/config.js

@@ -1,5 +1,19 @@
 import { ENCODING_NAME_MAP } from 'common/encoding'
 
+export const tabSizeOptions = [{
+  label: '1',
+  value: 1
+}, {
+  label: '2',
+  value: 2
+}, {
+  label: '3',
+  value: 3
+}, {
+  label: '4',
+  value: 4
+}]
+
 export const endOfLineOptions = [{
   label: 'Default',
   value: 'default'

src/renderer/prefComponents/editor/index.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="pref-editor">
     <h4>Editor</h4>
+    <compound>
+      <template #head>
+        <h6 class="title">Text editor settings:</h6>
+      </template>
+      <template #children>
         <range
-      description="Font size in text editor"
+          description="Font size"
           :value="fontSize"
           :min="12"
           :max="32"
@@ -11,7 +16,7 @@
           :onChange="value => onSelectChange('fontSize', value)"
         ></range>
         <range
-      description="Line height in text editor"
+          description="Line height"
           :value="lineHeight"
           :min="1.2"
           :max="2.0"
@@ -19,13 +24,27 @@
           :onChange="value => onSelectChange('lineHeight', value)"
         ></range>
         <font-text-box
-      description="Font for text editor"
+          description="Font family"
           :value="editorFontFamily"
           :onChange="value => onSelectChange('editorFontFamily', value)"
         ></font-text-box>
-    <separator></separator>
+        <text-box
+          description="Maximum width of text editor"
+          notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
+          :input="editorLineWidth"
+          :regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
+          :onChange="value => onSelectChange('editorLineWidth', value)"
+        ></text-box>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Code block settings:</h6>
+      </template>
+      <template #children>
         <range
-      description="Font size in code blocks"
+          description="Font size"
           :value="codeFontSize"
           :min="12"
           :max="28"
@@ -34,7 +53,7 @@
           :onChange="value => onSelectChange('codeFontSize', value)"
         ></range>
         <font-text-box
-      description="Font for code blocks"
+          description="Font family"
           :onlyMonospace="true"
           :value="codeFontFamily"
           :onChange="value => onSelectChange('codeFontFamily', value)"
@@ -42,16 +61,23 @@
         <!-- FIXME: Disabled due to #1648. -->
         <bool
           v-show="false"
-      description="Show line numbers in code blocks"
+          description="Show line numbers"
           :bool="codeBlockLineNumbers"
           :onChange="value => onSelectChange('codeBlockLineNumbers', value)"
         ></bool>
         <bool
-      description="Remove leading and trailing empty lines in code blocks"
+          description="Remove leading and trailing empty lines"
           :bool="trimUnnecessaryCodeBlockEmptyLines"
           :onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
         ></bool>
-    <separator></separator>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Writing behavior:</h6>
+      </template>
+      <template #children>
         <bool
           description="Automatically close brackets when writing"
           :bool="autoPairBracket"
@@ -67,14 +93,26 @@
           :bool="autoPairQuote"
           :onChange="value => onSelectChange('autoPairQuote', value)"
         ></bool>
-    <separator></separator>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">File representation:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Preferred tab width"
+          :value="tabSize"
+          :options="tabSizeOptions"
+          :onChange="value => onSelectChange('tabSize', value)"
+        ></cur-select>
         <cur-select
           description="Line separator type"
           :value="endOfLine"
           :options="endOfLineOptions"
           :onChange="value => onSelectChange('endOfLine', value)"
         ></cur-select>
-    <separator></separator>
         <cur-select
           description="Default encoding"
           :value="defaultEncoding"
@@ -92,7 +130,14 @@
           :options="trimTrailingNewlineOptions"
           :onChange="value => onSelectChange('trimTrailingNewline', value)"
         ></cur-select>
-    <separator></separator>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
         <cur-select
           description="Text direction"
           :value="textDirection"
@@ -114,19 +159,14 @@
           :bool="autoCheck"
           :onChange="value => onSelectChange('autoCheck', value)"
         ></bool>
-    <separator></separator>
+      </template>
-    <text-box
+    </compound>
-      description="Maximum width of text editor"
-      notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
-      :input="editorLineWidth"
-      :regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
-      :onChange="value => onSelectChange('editorLineWidth', value)"
-    ></text-box>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import Compound from '../common/compound'
 import FontTextBox from '../common/fontTextBox'
 import Range from '../common/range'
 import CurSelect from '../common/select'
@@ -134,6 +174,7 @@ import Bool from '../common/bool'
 import Separator from '../common/separator'
 import TextBox from '../common/textBox'
 import {
+  tabSizeOptions,
   endOfLineOptions,
   textDirectionOptions,
   trimTrailingNewlineOptions,
@@ -142,6 +183,7 @@ import {
 
 export default {
   components: {
+    Compound,
     FontTextBox,
     Range,
     CurSelect,
@@ -150,6 +192,7 @@ export default {
     TextBox
   },
   data () {
+    this.tabSizeOptions = tabSizeOptions
     this.endOfLineOptions = endOfLineOptions
     this.textDirectionOptions = textDirectionOptions
     this.trimTrailingNewlineOptions = trimTrailingNewlineOptions
@@ -164,6 +207,7 @@ export default {
       autoPairBracket: state => state.preferences.autoPairBracket,
       autoPairMarkdownSyntax: state => state.preferences.autoPairMarkdownSyntax,
       autoPairQuote: state => state.preferences.autoPairQuote,
+      tabSize: state => state.preferences.tabSize,
       endOfLine: state => state.preferences.endOfLine,
       textDirection: state => state.preferences.textDirection,
       codeFontSize: state => state.preferences.codeFontSize,

src/renderer/prefComponents/general/index.vue

@@ -3,13 +3,14 @@
     <h4>General</h4>
     <compound>
       <template #head>
+        <h6 class="title">Auto Save:</h6>
+      </template>
+      <template #children>
         <bool
           description="Automatically save document changes"
           :bool="autoSave"
           :onChange="value => onSelectChange('autoSave', value)"
         ></bool>
-    </template>
-    <template #children>
         <range
           description="Delay following document edit before automatically saving"
           :value="autoSaveDelay"
@@ -21,6 +22,12 @@
         ></range>
       </template>
     </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Window:</h6>
+      </template>
+      <template #children>
         <cur-select
           v-if="!isOsx"
           description="Title bar style"
@@ -29,7 +36,11 @@
           :options="titleBarStyleOptions"
           :onChange="value => onSelectChange('titleBarStyle', value)"
         ></cur-select>
-    <separator></separator>
+        <bool
+          description="Hide scrollbars"
+          :bool="hideScrollbar"
+          :onChange="value => onSelectChange('hideScrollbar', value)"
+        ></bool>
         <bool
           description="Open files in new window"
           :bool="openFilesInNewWindow"
@@ -40,23 +51,21 @@
           :bool="openFolderInNewWindow"
           :onChange="value => onSelectChange('openFolderInNewWindow', value)"
         ></bool>
-    <bool
+      </template>
-      description="Hide scrollbars"
+    </compound>
-      :bool="hideScrollbar"
+
-      :onChange="value => onSelectChange('hideScrollbar', value)"
+    <compound>
-    ></bool>
+      <template #head>
+        <h6 class="title">Sidebar:</h6>
+      </template>
+      <template #children>
         <bool
           description="Wrap text in table of contents"
           :bool="wordWrapInToc"
           :onChange="value => onSelectChange('wordWrapInToc', value)"
         ></bool>
-    <bool
+
-      description="Use Aidou"
+        <!-- TODO: The description is very bad and the entry isn't used by the editor. -->
-      :bool="aidou"
-      :onChange="value => onSelectChange('aidou', value)"
-      more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
-    ></bool>
-    <separator></separator>
         <cur-select
           description="Sort field for files in open folders"
           :value="fileSortBy"
@@ -64,25 +73,48 @@
           :onChange="value => onSelectChange('fileSortBy', value)"
           :disable="true"
         ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Action on startup:</h6>
+      </template>
+      <template #children>
         <section class="startup-action-ctrl">
-      <div>Action on startup</div>
           <el-radio-group v-model="startUpAction">
             <!--
               Hide "lastState" for now (#2064).
-        <el-radio class="ag-underdevelop" label="lastState">Open the last window state</el-radio>
+            <el-radio class="ag-underdevelop" label="lastState">Restore last editor session</el-radio>
             -->
-        <el-radio label="folder">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
+            <el-radio label="folder" style="margin-bottom: 10px;">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
             <el-button size="small" @click="selectDefaultDirectoryToOpen">Select Folder</el-button>
             <el-radio label="blank">Open a blank page</el-radio>
           </el-radio-group>
         </section>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
         <cur-select
-      description="Language for user interface"
+          description="User interface language"
           :value="language"
           :options="languageOptions"
           :onChange="value => onSelectChange('language', value)"
           :disable="true"
         ></cur-select>
+        <bool
+          description="Enable Aidou"
+          :bool="aidou"
+          :onChange="value => onSelectChange('aidou', value)"
+          more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
+        ></bool>
+      </template>
+    </compound>
   </div>
 </template>
 
@@ -156,7 +188,6 @@ export default {
     & .startup-action-ctrl {
       font-size: 14px;
       user-select: none;
-      margin: 20px 0;
       color: var(--editorColor);
       & .el-button--small {
         margin-left: 25px;

src/renderer/prefComponents/image/index.vue

@@ -9,7 +9,7 @@
       </div>
       <el-radio-group v-model="imageInsertAction">
         <el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio>
-        <el-radio label="folder">Move to designated local folder</el-radio>
+        <el-radio label="folder">Copy to designated relative assets or local folder</el-radio>
         <el-radio label="path">Keep original location</el-radio>
       </el-radio-group>
     </section>
@@ -21,12 +21,18 @@
         <el-button size="mini" @click="modifyImageFolderPath">Modify</el-button>
         <el-button size="mini" @click="openImageFolder">Open Folder</el-button>
       </div>
+    </section>
+
+    <compound>
+      <template #head>
         <bool
           description="Prefer relative assets folder"
           more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
           :bool="imagePreferRelativeDirectory"
           :onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
         ></bool>
+      </template>
+      <template #children>
         <text-box
           description="Relative image folder name"
           :input="imageRelativeDirectoryName"
@@ -34,7 +40,8 @@
           :defaultValue="relativeDirectoryNamePlaceholder"
           :onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
         ></text-box>
-    </section>
+      </template>
+    </compound>
   </div>
 </template>
 
@@ -42,12 +49,14 @@
 import { mapState } from 'vuex'
 import { shell } from 'electron'
 import Bool from '../common/bool'
+import Compound from '../common/compound'
 import Separator from '../common/separator'
 import TextBox from '../common/textBox'
 
 export default {
   components: {
     Bool,
+    Compound,
     Separator,
     TextBox
   },

src/renderer/prefComponents/markdown/config.js

@@ -25,20 +25,6 @@ export const preferHeadingStyleOptions = [{
   value: 'setext'
 }]
 
-export const tabSizeOptions = [{
-  label: '1',
-  value: 1
-}, {
-  label: '2',
-  value: 2
-}, {
-  label: '3',
-  value: 3
-}, {
-  label: '4',
-  value: 4
-}]
-
 export const listIndentationOptions = [{
   label: 'DocFX style',
   value: 'dfm'

src/renderer/prefComponents/markdown/index.vue

@@ -1,68 +1,72 @@
 <template>
   <div class="pref-markdown">
     <h4>Markdown</h4>
+    <compound>
+      <template #head>
+        <h6 class="title">Lists:</h6>
+      </template>
+      <template #children>
         <bool
           description="Prefer loose list items"
           :bool="preferLooseListItem"
           :onChange="value => onSelectChange('preferLooseListItem', value)"
           more="https://spec.commonmark.org/0.29/#loose"
         ></bool>
-    <cus-select
+        <cur-select
           description="Preferred marker for bullet lists"
           :value="bulletListMarker"
           :options="bulletListMarkerOptions"
           :onChange="value => onSelectChange('bulletListMarker', value)"
           more="https://spec.commonmark.org/0.29/#bullet-list-marker"
-    ></cus-select>
+        ></cur-select>
-    <cus-select
+        <cur-select
           description="Preferred marker for ordered lists"
           :value="orderListDelimiter"
           :options="orderListDelimiterOptions"
           :onChange="value => onSelectChange('orderListDelimiter', value)"
           more="https://spec.commonmark.org/0.29/#ordered-list"
-    ></cus-select>
+        ></cur-select>
-    <cus-select
+        <cur-select
-      description="Preferred heading style"
-      :value="preferHeadingStyle"
-      :options="preferHeadingStyleOptions"
-      :onChange="value => onSelectChange('preferHeadingStyle', value)"
-      :disable="true"
-    ></cus-select>
-    <cus-select
-      description="Preferred tab width"
-      :value="tabSize"
-      :options="tabSizeOptions"
-      :onChange="value => onSelectChange('tabSize', value)"
-    ></cus-select>
-    <cus-select
           description="Preferred list indentation"
           :value="listIndentation"
           :options="listIndentationOptions"
           :onChange="value => onSelectChange('listIndentation', value)"
-    ></cus-select>
+        ></cur-select>
-    <separator></separator>
+      </template>
-    <h5>Markdown extensions</h5>
+    </compound>
-    <cus-select
+
-      description="Format for front matter"
+    <compound>
+      <template #head>
+        <h6 class="title">Markdown extensions:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Front matter format"
           :value="frontmatterType"
           :options="frontmatterTypeOptions"
           :onChange="value => onSelectChange('frontmatterType', value)"
-    ></cus-select>
+        ></cur-select>
         <bool
-      description="Use Pandoc-style superscript and subscript"
+          description="Enable Pandoc-style superscript and subscript"
           :bool="superSubScript"
           :onChange="value => onSelectChange('superSubScript', value)"
           more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
         ></bool>
         <bool
-      description="Use Pandoc-style footnotes"
+          description="Enable Pandoc-style footnotes"
           notes="Requires restart."
           :bool="footnote"
           :onChange="value => onSelectChange('footnote', value)"
           more="https://pandoc.org/MANUAL.html#footnotes"
         ></bool>
-    <separator></separator>
+      </template>
-    <h5>Compatibility</h5>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Compatibility:</h6>
+      </template>
+      <template #children>
         <bool
           description="Enable HTML rendering"
           :bool="isHtmlEnabled"
@@ -73,28 +77,51 @@
           :bool="isGitlabCompatibilityEnabled"
           :onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
         ></bool>
-    <separator></separator>
+      </template>
-    <h5>Diagram theme</h5>
+    </compound>
-    <cus-select
+
+    <compound>
+      <template #head>
+        <h6 class="title">Diagrams:</h6>
+      </template>
+      <template #children>
+        <cur-select
           description="Sequence diagram theme"
           :value="sequenceTheme"
           :options="sequenceThemeOptions"
           :onChange="value => onSelectChange('sequenceTheme', value)"
           more="https://bramp.github.io/js-sequence-diagrams/"
-    ></cus-select>
+        ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Preferred heading style"
+          :value="preferHeadingStyle"
+          :options="preferHeadingStyleOptions"
+          :onChange="value => onSelectChange('preferHeadingStyle', value)"
+          :disable="true"
+        ></cur-select>
+      </template>
+    </compound>
   </div>
 </template>
 
 <script>
+import Compound from '../common/compound'
 import Separator from '../common/separator'
 import { mapState } from 'vuex'
 import Bool from '../common/bool'
-import CusSelect from '../common/select'
+import CurSelect from '../common/select'
 import {
   bulletListMarkerOptions,
   orderListDelimiterOptions,
   preferHeadingStyleOptions,
-  tabSizeOptions,
   listIndentationOptions,
   frontmatterTypeOptions,
   sequenceThemeOptions
@@ -102,15 +129,15 @@ import {
 
 export default {
   components: {
+    Compound,
     Separator,
     Bool,
-    CusSelect
+    CurSelect
   },
   data () {
     this.bulletListMarkerOptions = bulletListMarkerOptions
     this.orderListDelimiterOptions = orderListDelimiterOptions
     this.preferHeadingStyleOptions = preferHeadingStyleOptions
-    this.tabSizeOptions = tabSizeOptions
     this.listIndentationOptions = listIndentationOptions
     this.frontmatterTypeOptions = frontmatterTypeOptions
     this.sequenceThemeOptions = sequenceThemeOptions
@@ -122,7 +149,6 @@ export default {
       bulletListMarker: state => state.preferences.bulletListMarker,
       orderListDelimiter: state => state.preferences.orderListDelimiter,
       preferHeadingStyle: state => state.preferences.preferHeadingStyle,
-      tabSize: state => state.preferences.tabSize,
       listIndentation: state => state.preferences.listIndentation,
       frontmatterType: state => state.preferences.frontmatterType,
       superSubScript: state => state.preferences.superSubScript,

src/renderer/prefComponents/sideBar/index.vue

@@ -74,10 +74,13 @@ export default {
       })
     },
     handleCategoryItemClick (item) {
+      const { currentCategory } = this
+      if (item.name.toLowerCase() !== currentCategory) {
         this.$router.push({
           path: item.path
         })
       }
+    }
   },
   mounted () {
     this.restaurants = this.loadAll()
@@ -88,6 +91,8 @@ export default {
 <style>
   .pref-sidebar {
     -webkit-app-region: drag;
+    display: flex;
+    flex-direction: column;
     background: var(--sideBarBgColor);
     width: var(--prefSideBarWidth);
     height: 100vh;
@@ -96,13 +101,13 @@ export default {
     & h3 {
       margin: 0;
       font-weight: normal;
+      text-align: center;
       color: var(--sideBarColor);
     }
-    padding-left: 30px;
-    padding-right: 30px;
   }
   .search-wrapper {
     -webkit-app-region: no-drag;
+    padding: 0 20px;
     margin: 30px 0;
   }
   .el-autocomplete {
@@ -144,6 +149,7 @@ export default {
   }
   .category {
     -webkit-app-region: no-drag;
+    overflow-y: auto;
     & .item {
       width: 100%;
       height: 50px;

src/renderer/prefComponents/spellchecker/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="pref-spellchecker">
     <h4>Spelling</h4>
+    <compound>
+      <template #head>
         <bool
           description="Enable spell checker"
-      notes="Feature is experimental."
           :bool="spellcheckerEnabled"
           :onChange="handleSpellcheckerEnabled"
         ></bool>
-    <separator></separator>
+      </template>
+      <template #children>
         <bool
           description="Use Hunspell instead of system spell checker on macOS and Windows 10"
           notes="Requires restart."
@@ -28,7 +30,11 @@
           :disable="!spellcheckerEnabled"
           :onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
         ></bool>
+      </template>
+    </compound>
+
     <separator></separator>
+
     <cur-select
       description="Default language for spell checker"
       :value="spellcheckerLanguage"
@@ -48,7 +54,9 @@
     >
       Additional languages may be added through "Language" in your "Time & language" settings.
     </div>
+
     <div v-if="isHunspellSelected && spellcheckerEnabled">
+      <h6 class="title">Hunspell settings:</h6>
       <div class="description">Installed Hunspell dictionaries</div>
       <el-table
         :data="availableDictionaries"
@@ -95,6 +103,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import Compound from '../common/compound'
 import CurSelect from '../common/select'
 import Bool from '../common/bool'
 import Separator from '../common/separator'
@@ -106,6 +115,7 @@ import { downloadHunspellDictionary, deleteHunspellDictionary } from '@/spellche
 export default {
   components: {
     Bool,
+    Compound,
     CurSelect,
     Separator
   },
@@ -293,6 +303,10 @@ export default {
       color: var(--iconColor);
       font-size: 14px;
     }
+    & h6.title {
+      font-weight: 400;
+      font-size: 1.1em;
+    }
   }
   .el-table, .el-table__expanded-cell {
     background: var(--editorBgColor);

src/renderer/prefComponents/theme/index.vue

@@ -16,8 +16,8 @@
       :options="autoSwitchThemeOptions"
       :onChange="value => onSelectChange('autoSwitchTheme', value)"
     ></cur-select>
-    <separator></separator>
+    <separator v-show="false"></separator>
-    <section class="import-themes ag-underdevelop">
+    <section v-show="false" class="import-themes ag-underdevelop">
       <div>
         <span>Open the themes folder</span>
         <el-button size="small">Open Folder</el-button>
@@ -79,9 +79,8 @@ export default {
 </script>
 
 <style>
-  .pref-theme {
-  }
   .offcial-themes {
+    margin-top: 12px;
     & .theme {
       cursor: pointer;
       width: 248px;