better theme selector

app/scripts/views/settings/settings-general-view.js

@@ -23,7 +23,7 @@ class SettingsGeneralView extends View {
     template = template;
 
     events = {
-        'change .settings__general-theme': 'changeTheme',
+        'click .settings__general-theme': 'changeTheme',
         'change .settings__general-locale': 'changeLocale',
         'change .settings__general-font-size': 'changeFontSize',
         'change .settings__general-expand': 'changeExpandGroups',
@@ -205,8 +205,9 @@ class SettingsGeneralView extends View {
     }
 
     changeTheme(e) {
-        const theme = e.target.value;
+        const theme = e.target.closest('.settings__general-theme').dataset.theme;
         AppSettingsModel.theme = theme;
+        this.render();
     }
 
     changeLocale(e) {

app/styles/areas/_settings.scss

@@ -175,6 +175,42 @@
     &__general-prv-logout {
         margin-bottom: $base-padding-v;
     }
+    &__general-themes {
+        width: calc(100% - 10em);
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 10em);
+        grid-gap: $base-spacing;
+        margin-bottom: $base-spacing;
+    }
+    &__general-theme {
+        padding: $base-padding;
+        border: light-border();
+        border-radius: var(--input-border-radius);
+        text-align: center;
+        background: var(--background-color);
+        color: var(--text-color);
+        cursor: pointer;
+        body & {
+            --focus-shadow-blur: unset;
+            --focus-shadow-spread: unset;
+            --form-box-shadow-color-focus: unset;
+        }
+        &-name {
+            border-bottom: light-border();
+            padding-bottom: $tiny-spacing;
+            margin-bottom: $small-spacing;
+        }
+        &-button {
+            margin-bottom: $base-padding-v;
+        }
+        &:hover {
+            box-shadow: form-box-shadow-focus();
+        }
+        &--selected {
+            border: 1px solid var(--action-color);
+            box-shadow: form-box-shadow-focus();
+        }
+    }
     &__logs {
         user-select: text;
         margin-top: $base-padding-v;

app/templates/settings/settings-general.hbs

@@ -49,12 +49,18 @@
     </div>
     {{/if}}
     <div>
-        <label for="settings__general-theme">{{res 'setGenTheme'}}:</label>
-        <select class="settings__general-theme settings__select input-base" id="settings__general-theme">
+        <label>{{res 'setGenTheme'}}:</label>
+        <div class="settings__general-themes">
             {{#each themes as |name key|}}
-            <option value="{{key}}" {{#ifeq key ../activeTheme}}selected{{/ifeq}}>{{name}}</option>
+                <div class="th-{{key}} settings__general-theme
+                    {{~#ifeq key ../activeTheme}} settings__general-theme--selected{{/ifeq~}}"
+                     data-theme="{{key}}"
+                >
+                    <div class="settings__general-theme-name">{{name}}</div>
+                    <button class="settings__general-theme-button"><i class="fa fa-ellipsis-h"></i></button>
+                </div>
             {{/each}}
-        </select>
+        </div>
     </div>
     <div>
         <label for="settings__general-font-size">{{res 'setGenFontSize'}}:</label>