🎨 Improves how modal styles are applied

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>

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);