From 035d5211d95ccadf6a5654b19bc604326595d257 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Mon, 29 May 2023 20:22:06 +0200
Subject: [PATCH] Style updates

---
 frontend/src/components/modal.svelte          |  8 +++----
 .../connection/collection/find.svelte         | 21 ++++++++++---------
 frontend/src/styles/style.css                 | 14 +++++++------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/modal.svelte b/frontend/src/components/modal.svelte
index b94cc60..28fa4b6 100644
--- a/frontend/src/components/modal.svelte
+++ b/frontend/src/components/modal.svelte
@@ -81,7 +81,7 @@
     margin-right: auto;
     margin-bottom: auto;
     width: 100%;
-    border-radius: 10px;
+    border-radius: var(--radius);
     display: flex;
     flex-flow: column;
     cursor: auto;
@@ -97,7 +97,7 @@
   header {
     display: flex;
     align-items: center;
-    padding: 1rem;
+    padding: 0.75rem;
   }
   header .title {
     font-size: 1.5rem;
@@ -114,14 +114,14 @@
     overflow-y: auto;
   }
   .content.padded {
-    padding: 1rem;
+    padding: 0.75rem;
   }
   header + .content.padded {
     border-top: 1px solid #ccc;
   }
 
   footer {
-    padding: 1rem;
+    padding: 0.75rem;
     border-top: 1px solid #ccc;
   }
 </style>
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 9edec53..f5ef47a 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -171,19 +171,20 @@
     </div>
 
     <div class="form-row actions">
-      <!-- <CodeExample {code} /> -->
-      <button class="btn" type="button" on:click={loadQuery}>
-        <Icon name="upload" /> Load query…
-      </button>
-      <button class="btn" type="button" on:click={saveQuery}>
-        <Icon name="save" /> Save as…
-      </button>
-      <button class="btn" type="button" on:click={() => exportInfo = {}}>
-        <Icon name="save" /> Export results…
-      </button>
       <button type="submit" class="btn" title="Run query">
         <Icon name="play" /> Run
       </button>
+      <button class="btn secondary" type="button" on:click={() => exportInfo = {}}>
+        <Icon name="save" /> Export results…
+      </button>
+      <div class="field">
+        <button class="btn secondary" type="button" on:click={loadQuery}>
+          <Icon name="upload" /> Load query…
+        </button>
+        <button class="btn secondary" type="button" on:click={saveQuery}>
+          <Icon name="save" /> Save as…
+        </button>
+      </div>
     </div>
   </form>
 
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
index 040acb4..e756f7b 100644
--- a/frontend/src/styles/style.css
+++ b/frontend/src/styles/style.css
@@ -1,5 +1,6 @@
 :root {
   --darwin-titlebar-height: 36px;
+  --radius: 4px;
 }
 
 html,
@@ -55,10 +56,11 @@ select:disabled {
   background-color: #00008b;
   border: 1px solid #00008b;
   padding: 0.5rem;
-  border-radius: 10px;
+  border-radius: var(--radius);
   color: #fff;
 }
-.btn:focus {
+.btn:focus,
+.btn:active {
   box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
   outline: none;
 }
@@ -163,15 +165,15 @@ select:disabled {
   background-position: right 0.5rem center;
 }
 .field > :first-child {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .field > *:not(:last-child) {
   border-right: none;
 }
 .field > :last-child {
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
 }
 
 code,