From 561c8a7dfb86f4d1e1ee76e560c026f95d8289c7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 20 Jun 2021 17:02:34 +0100
Subject: [PATCH] :art: Improves how modal styles are applied

---
 src/components/Configuration/JsonEditor.vue |  2 +-
 src/components/FormElements/Button.vue      |  9 +++++++--
 src/components/LinkItems/IframeModal.vue    |  7 ++++---
 src/components/Settings/ConfigLauncher.vue  | 15 ++-------------
 src/components/Settings/SearchBar.vue       | 10 +++++++---
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 352a2afd..f531549c 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -3,7 +3,7 @@
     <v-jsoneditor
       v-model="jsonData"
       :options="options"
-      height="580px"
+      height="530px"
     />
     <button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">Save Changes</button>
     <p class="errors">
diff --git a/src/components/FormElements/Button.vue b/src/components/FormElements/Button.vue
index 58674634..f6c498f6 100644
--- a/src/components/FormElements/Button.vue
+++ b/src/components/FormElements/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="click()">
+  <button @click="click()" :disabled="disabled">
     <slot></slot>
     <slot name="text"></slot>
     <slot name="icon"></slot>
@@ -13,6 +13,7 @@ export default {
   props: {
     text: String,
     click: Function,
+    disabled: Boolean,
   },
 };
 </script>
@@ -45,10 +46,14 @@ button {
   background: var(--background);
   border: 1px solid var(--primary);
   border-radius: var(--curve-factor);
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--background);
     background: var(--primary);
     border-color: var(--background);
   }
+  &:disabled {
+    cursor: progress;
+    opacity: var(--dimming-factor);
+  }
 }
 </style>
diff --git a/src/components/LinkItems/IframeModal.vue b/src/components/LinkItems/IframeModal.vue
index 12f9454a..bc40f3d4 100644
--- a/src/components/LinkItems/IframeModal.vue
+++ b/src/components/LinkItems/IframeModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <modal :name="name" :resizable="true" width="80%" height="80%" @closed="modalClosed()">
+  <modal :name="name" :resizable="true" width="80%" height="80%" @closed="modalClosed()"
+    classes="dashy-modal">
     <div slot="top-right" @click="hide()">Close</div>
     <a @click="hide()" class="close-button" title="Close">x</a>
     <iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
@@ -17,12 +18,12 @@ export default {
     url: '#',
   }),
   methods: {
-    show: function show(url) {
+    show(url) {
       this.url = url;
       this.$modal.show(this.name);
       this.$emit('modalChanged', true);
     },
-    hide: function hide() {
+    hide() {
       this.$modal.hide(this.name);
     },
     modalClosed() {
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 58bf9445..ab50466b 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -11,13 +11,13 @@
 
     <!-- Modal containing all the configuration options -->
     <modal :name="modalNames.CONF_EDITOR" :resizable="true" width="60%" height="80%"
-      @closed="$emit('modalChanged', false)">
+      @closed="$emit('modalChanged', false)" classes="dashy-modal">
       <ConfigContainer :config="combineConfig()" />
     </modal>
 
     <!-- Modal for cloud backup and restore options -->
     <modal :name="modalNames.CLOUD_BACKUP" :resizable="true" width="65%" height="60%"
-      @closed="$emit('modalChanged', false)">
+      @closed="$emit('modalChanged', false)" classes="dashy-modal">
       <CloudBackupRestore :config="combineConfig()" />
     </modal>
   </div>
@@ -100,14 +100,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-  .vm--modal {
-    box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
-    min-width: 350px;
-    min-height: 600px;
-  }
-  .vm--overlay {
-    background: #00000080;
-  }
-</style>
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 95a9e6dc..7b38f902 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -105,15 +105,19 @@ export default {
       }
     }
     .clear-search {
-      position: absolute;
+      //position: absolute;
       color: var(--settings-text-color);
-      margin: 0.55rem 0 0 -2.2rem;
       padding: 0 0.4rem;
       font-style: normal;
-      font-size: 1.5rem;
+      font-size: 1rem;
       opacity: var(--dimming-factor);
       border-radius: 50px;
       cursor: pointer;
+      right: 0.5rem;
+      top: 1rem;
+      border: 1px solid var(--settings-text-color);
+      font-size: 1rem;
+      margin: 0.5rem;
       &:hover {
         opacity: 1;
         background: var(--background-darker);