From 98608a6cc877c8063414186afba6f60d46ad0b17 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Wed, 18 Jan 2023 14:05:45 +0100
Subject: [PATCH] Dismiss buttons for database/collection modals

---
 frontend/src/organisms/connection/index.svelte | 13 +++++++++++--
 frontend/src/style.css                         | 12 ++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/organisms/connection/index.svelte b/frontend/src/organisms/connection/index.svelte
index 752ce8a..7f730ce 100644
--- a/frontend/src/organisms/connection/index.svelte
+++ b/frontend/src/organisms/connection/index.svelte
@@ -74,8 +74,9 @@
       <label class="field">
         <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
       </label>
-      <p>
+      <p class="modal-actions">
         <button class="btn create" type="submit" disabled={!newDb.name?.trim()}>Create database</button>
+        <button class="btn secondary" type="button" on:click={() => newDb = undefined}>Cancel</button>
       </p>
     </form>
   </Modal>
@@ -89,9 +90,17 @@
       <label class="field">
         <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
       </label>
-      <p>
+      <p class="modal-actions">
         <button class="btn create" type="submit" disabled={!newColl.name?.trim()}>Create collection</button>
+        <button class="btn secondary" type="button" on:click={() => newColl = undefined}>Cancel</button>
       </p>
     </form>
   </Modal>
 {/if}
+
+<style>
+  .modal-actions {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 203986b..fa16703 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -105,6 +105,7 @@ p strong {
 
 .btn {
   background-color: #00008b;
+  border: 1px solid #00008b;
   padding: 0.5rem;
   border-radius: 10px;
   color: #fff;
@@ -119,6 +120,17 @@ p strong {
 .btn.danger:focus {
   box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
 }
+.btn.secondary {
+  border: 1px solid #ccc;
+  background-color: #fff;
+  color: inherit;
+}
+.btn.secondary:hover {
+  background-color: #eee;
+}
+.btn.secondary:active {
+  background-color: #ddd;
+}
 .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;