From aa015b78c0fb49d9558baef97f67a6edf5f19023 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Mon, 29 Mar 2021 09:54:25 +0100
Subject: [PATCH] ui fixes

---
 src/assets/index.html          |  2 +-
 src/assets/javascripts/app.js  | 12 ++++--------
 src/assets/stylesheets/app.css |  7 ++-----
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/assets/index.html b/src/assets/index.html
index 643e17b..c5af116 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -214,7 +214,7 @@
                         <span class="icon">{% inline "sliders.svg" %}</span>
                     </template>
                     <div class="row text-center m-0">
-                        <button class="dropdown-item col-4 px-0"
+                        <button class="btn btn-link col-4 px-0 rounded-0"
                                 :class="'theme-'+t"
                                 @click.stop="theme.name = t"
                                 v-for="t in ['light', 'sepia', 'night']">
diff --git a/src/assets/javascripts/app.js b/src/assets/javascripts/app.js
index b2e2b72..1b47a00 100644
--- a/src/assets/javascripts/app.js
+++ b/src/assets/javascripts/app.js
@@ -104,12 +104,7 @@ Vue.component('dropdown', {
   },
   methods: {
     toggle: function(e) {
-      if (this.open) {
-        this.hide()
-      } else {
-        e.stopPropagation()
-        this.show()
-      }
+      this.open ? this.hide() : this.show()
     },
     show: function(e) {
       this.open = true
@@ -134,8 +129,9 @@ Vue.component('dropdown', {
       document.removeEventListener('click', this.clickHandler)
     },
     clickHandler: function(e) {
-      if (e.target.closest('.dropdown') == null) this.hide()
-      if (e.target.closest('.dropdown-item') != null) this.hide()
+      var dropdown = e.target.closest('.dropdown')
+      if (dropdown == null || dropdown != this.$el) return this.hide()
+      if (e.target.closest('.dropdown-item') != null) return this.hide()
     }
   },
 })
diff --git a/src/assets/stylesheets/app.css b/src/assets/stylesheets/app.css
index dcfc951..70b4484 100644
--- a/src/assets/stylesheets/app.css
+++ b/src/assets/stylesheets/app.css
@@ -416,7 +416,6 @@ a,
   color: #0080d4;
 }
 
-.theme-light.dropdown-item:hover,
 .dropdown-item.active,
 .dropdown-item:active,
 .selectgroup input:checked + .selectgroup-label {
@@ -432,7 +431,6 @@ a,
 /* theme: sepia */
 
 .theme-sepia,
-.theme-sepia.dropdown-item:hover,
 .theme-sepia .toolbar-search {
   background-color: #f4f0e5;
 }
@@ -442,6 +440,7 @@ a,
 .theme-sepia .border-top {
   border-color: #e0d6ba !important;
 }
+.theme-sepia .selectgroup-label:hover,
 .theme-sepia .toolbar-item:hover,
 .theme-sepia .toolbar-search:hover,
 .theme-sepia .toolbar-search:focus {
@@ -451,19 +450,17 @@ a,
 /* theme: night */
 
 .theme-night,
-.theme-night.dropdown-item:hover,
 .theme-night .toolbar-search {
   color: #d1d1d1;
   background-color: #0e0e0e;
 }
-
 .theme-night .content hr,
 .theme-night .content pre,
 .theme-night .border-right,
 .theme-night .border-top {
   border-color: #1a1a1a !important;
 }
-
+.theme-night .selectgroup-label:hover,
 .theme-night .toolbar-item:hover,
 .theme-night .toolbar-search:hover,
 .theme-night .toolbar-search:focus {