From c29e7105e22111288653e84250f5c90f1b33c6f2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 7 Aug 2021 15:15:53 +0100
Subject: [PATCH] :adhesive_bandage: Fixed a bunch of minor UI things

---
 src/components/Configuration/JsonEditor.vue | 5 ++++-
 src/components/Settings/ThemeSelector.vue   | 6 +++++-
 src/styles/color-themes.scss                | 7 ++++++-
 src/views/Home.vue                          | 2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 99f0cffe..a9ae07f5 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -4,7 +4,6 @@
     <v-jsoneditor
       v-model="jsonData"
       :options="options"
-      height="500px"
     />
     <!-- Options raido, and save button -->
     <div class="save-options">
@@ -293,6 +292,10 @@ div.save-options {
   }
 }
 
+.jsoneditor-container.min-box {
+  height: 58vh;
+}
+
 .jsoneditor, .jsoneditor-menu {
   border-color: var(--primary);
 }
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 3b6dc3ea..f5574628 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -126,6 +126,7 @@ export default {
 <style lang="scss">
 
 @import 'vue-select/src/scss/vue-select.scss';
+@import '@/styles/style-helpers.scss';
 
 .theme-dropdown {
   div.vs__dropdown-toggle {
@@ -146,10 +147,13 @@ export default {
   }
   ul.vs__dropdown-menu {
     width: auto;
-    background: var(--background);
     z-index: 5;
     max-width: 13rem;
     overflow-x: hidden;
+    @extend .scroll-bar;
+    background: var(--background);
+    border-radius: var(--curve-factor);
+    border-top: 1px solid var(--settings-text-color);
   }
   li.vs__dropdown-option--highlight {
     background: var(--settings-text-color);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 4a1422d6..b395e0ef 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -498,7 +498,7 @@ html[data-theme='material'] {
   --nav-link-border-color: #0c4eba;
   --settings-text-color: #363636;
   --config-code-color: #363636;
-  --config-settings-background: #fff;
+  --config-settings-background: #f5f5f5;
   --config-settings-color: #473f3f;
   --heading-text-color: #fff;
   --curve-factor: 4px;
@@ -508,6 +508,11 @@ html[data-theme='material'] {
   --footer-text-color: #f5f5f5cc;
   // --login-form-background-secondary: #f5f5f5cc;
   --context-menu-secondary-color: #f5f5f5;
+  --transparent-white-50: #00000080;
+
+  div.jsoneditor div.jsoneditor-menu {
+    background: #5c90eb !important;
+  }
 
   header {
     background: #4285f4;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c0bc8911..d8d56764 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -218,7 +218,7 @@ export default {
   padding-bottom: 1px;
   background: var(--background);
   // min-height: calc(100vh - 126px);
-  min-height: calc(100vh - var(--footer-height));
+  min-height: calc(99.9vh - var(--footer-height));
 }
 
 /* Outside container wrapping the item groups*/