Improve styling of the modal and select boxes

src/components/modals/Modal.scss

@@ -1,13 +1,28 @@
 @import '../../styles.scss';
 
-.contents {
+.jsoneditor-modal {
-  padding: 20px;
+  // styling for the select box, 
+  // see docs: https://github.com/rob-balfre/svelte-select#styling
+  --height: 28px;
+  --clearSelectTop: 2px;
+  --clearSelectBottom: 2px;
+  --itemIsActiveBG: #3883fa; // theme-color
+  
+  .contents {
+    padding: 20px;
 
-  .actions {
+    .actions {
-    display: flex;
+      display: flex;
-    flex-direction: row;
+      flex-direction: row;
-    justify-content: flex-end;
+      justify-content: flex-end;
 
-    padding-top: $padding;
+      padding-top: $padding;
+    }
   }
 }
+
+// custom styling for the modal. 
+// FIXME: not neat to override global styles!
+:global(.bg .window-wrap) {
+  margin-top: 10rem;
+}

src/components/modals/SortModal.scss

@@ -1,7 +1,7 @@
 @import '../../styles.scss';
 @import './Modal.scss';
 
-.sort-modal {
+.jsoneditor-modal.sort {
   table {
     width: 100%;
     border-collapse: collapse;
@@ -14,4 +14,4 @@
       padding-bottom: $padding;
     }
   }
-}
+}

src/components/modals/SortModal.svelte

@@ -21,11 +21,11 @@
 
   const asc = {
     value: 1,
-    label: 'asc'
+    label: 'ascending'
   }
   const desc = {
     value: -1,
-    label: 'desc'
+    label: 'descending'
   }
   const directions = [ asc, desc ]
 
@@ -83,7 +83,7 @@
   }
 </script>
 
-<div class="sort-modal">
+<div class="jsoneditor-modal sort">
   <Header title={isArray ? 'Sort array items' : 'Sort object keys'} />
 
   <div class="contents">
@@ -115,6 +115,7 @@
           <td>
             <Select 
               items={directions} 
+              containerClasses='test-class'
               bind:selectedValue={selectedDirection} 
               isClearable={false}
             />

src/components/modals/TransformModal.svelte

@@ -7,7 +7,7 @@
   const {close} = getContext('simple-modal')
 </script>
 
-<div class="transform-modal">
+<div class="jsoneditor-modal transform">
   <Header title='Transform' />
   <div class="contents">
     TODO...

src/constants.js

@@ -17,13 +17,14 @@ export const SIMPLE_MODAL_OPTIONS = {
   styleBg: {
     top: 0,
     left: 0,
-    background: 'rgba(0, 0, 0, 0.3)'
+    background: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'normal'
   },
   styleWindow: {
     borderRadius: '2px'
   },
   styleContent: {
     padding: '0px',
-    overflow: 'visible'
+    overflow: 'visible', // needed for select box dropdowns which are larger than the modal
   }
 }

src/styles.scss

@@ -64,4 +64,4 @@ button.primary {
   &:disabled {
     background: $gray;
   }
-}
+}