layout

src/components/select/select.vue

@@ -49,6 +49,7 @@ label.Select {
       option {
         background-color: transparent;
 
+        &:checked,
         &.-active {
           color: var(--selectionText);
           background-color: var(--selectionBackground);

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -33,7 +33,13 @@ import {
 } from 'src/services/export_import/export_import.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+import {
+  faFloppyDisk,
+  faFolderOpen,
+  faFile,
+  faArrowsRotate,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
 
 // helper for debugging
 // eslint-disable-next-line no-unused-vars
@@ -46,7 +52,8 @@ library.add(
   faFile,
   faFloppyDisk,
   faFolderOpen,
-  faArrowsRotate
+  faArrowsRotate,
+  faCheck
 )
 
 export default {

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -66,14 +66,14 @@
     &.heading {
       display: grid;
       grid-template:
-        "meta meta preview"
-        "meta meta preview"
-        "meta meta preview"
-        "meta meta preview"
-        "new  new  preview"
-        "load save refresh";
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "new  new  preview preview"
+        "load save refresh apply";
       grid-gap: 0.5em;
-      grid-template-columns: min-content min-content 6fr;
+      grid-template-columns: min-content min-content 6fr max-content;
       grid-template-rows: repeat(4, min-content) repeat(2, 2em);
 
       ul.setting-list {
@@ -116,6 +116,10 @@
       .button-refresh {
         grid-area: refresh;
       }
+
+      .button-apply {
+        grid-area: apply;
+      }
     }
   }
 

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -39,6 +39,13 @@
         <FAIcon icon="arrows-rotate" />
         {{ $t('settings.style.themes3.editor.refresh_preview') }}
       </button>
+      <button
+        class="btn button-default button-apply"
+        @click="applyTheme"
+      >
+        <FAIcon icon="check" />
+        {{ $t('settings.style.themes3.editor.apply_preview') }}
+      </button>
       <ul class="setting-list style-metadata">
         <li>
           <StringSetting class="meta-field" v-model="name">

src/components/shadow_control/shadow_control.scss

@@ -5,8 +5,6 @@
   grid-template-areas: "selector preview tweak";
   grid-gap: 0.5em;
   justify-content: stretch;
-  margin-bottom: 1em;
-  width: 100%;
 
   &.-compact {
     grid-template-columns: 10em 1fr;

src/i18n/en.json

@@ -800,6 +800,7 @@
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
           "refresh_preview": "Refresh preview",
+          "apply_preview": "Apply",
           "text_auto": {
             "label": "Auto-contrast",
             "no-preserve": "Black or White",