tweaks

frontend/src/components/details.svelte

@@ -37,6 +37,7 @@
     border-radius: 4px;
     padding: 0.5em 0.5em 0;
     margin-bottom: 0.5rem;
+    background-color: #fff;
   }
   details[open] {
     padding: 0.5em;

frontend/src/components/hint.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Icon from './icon.svelte';
+
+</script>
+<div class="hint">
+  <Icon name="info" />
+  <div class="content"><slot /></div>
+</div>
+
+<style>
+  .hint {
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    display: grid;
+    gap: 1rem;
+    grid-template: 1fr / auto 1fr;
+    background-color: rgba(255, 214, 64, 0.5);
+    border: 1px solid #c5a42e;
+    border-radius: 10px;
+  }
+
+  .content {
+    align-self: center;
+  }
+</style>

frontend/src/components/icon.svelte

@@ -79,5 +79,7 @@
     <circle cx="12" cy="5" r="3"/><path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
   {:else if name === 'o'}
     <circle cx="12" cy="12" r="10"/>
+  {:else if name === 'info'}
+    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
   {/if}
 </svg>

frontend/src/organisms/connection/index.svelte

@@ -11,6 +11,7 @@
   import { EventsOn } from '../../../wailsjs/runtime/runtime';
   import ExportInfo from './export/exportinfo.svelte';
   import DumpInfo from './export/dumpinfo.svelte';
+  import Hint from '../../components/hint.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';
@@ -44,11 +45,9 @@
     showHostDetail = true;
   }
 
-  async function createDatabase() {
-    busy.start();
+  function createDatabase() {
     $connections[activeHostKey].databases[newDb.name] = { collections: {} };
     newDb = undefined;
-    busy.end();
   }
 
   function openEditCollModal(collKey) {
@@ -68,11 +67,9 @@
     busy.end();
   }
 
-  async function createCollection() {
-    busy.start();
+  function createCollection() {
     $connections[activeHostKey].databases[activeDbKey].collections[newColl.name] = {};
     newColl = undefined;
-    busy.end();
   }
 
   function exportCollection(collKey) {
@@ -134,7 +131,9 @@
 {#if newDb}
   <Modal bind:show={newDb}>
     <p><strong>Create a database</strong></p>
-    <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
+    <Hint>
+      Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.
+    </Hint>
     <form on:submit|preventDefault={createDatabase}>
       <label class="field">
         <input type="text" spellcheck="false" bind:value={newDb.name} use:input={{ autofocus: true }} placeholder="New collection name" />
@@ -150,7 +149,9 @@
 {#if newColl}
   <Modal bind:show={newColl}>
     <p><strong>Create a collection</strong></p>
-    <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
+    <Hint>
+      Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.
+    </Hint>
     <form on:submit|preventDefault={createCollection}>
       <label class="field">
         <input type="text" spellcheck="false" bind:value={newColl.name} use:input={{ autofocus: true }} placeholder="New collection name" />
@@ -168,11 +169,11 @@
     <form class="rename" on:submit|preventDefault={renameCollection}>
       <div>Renaming collection <strong>{collToRename}</strong></div>
       <Icon name="arr-d" />
-      <div class="inputs">
+      <label class="field">
+        <input type="text" bind:value={newCollKey} use:input={{ autofocus: true }} spellcheck="false" />
+      </label>
+      <div class="cancelorsave">
         <button class="btn secondary" type="button" on:click={() => collToRename = ''}>Cancel</button>
-        <label class="field">
-          <input type="text" bind:value={newCollKey} use:input={{ autofocus: true }} spellcheck="false" />
-        </label>
         <button class="btn" type="submit">Save</button>
       </div>
     </form>
@@ -197,16 +198,20 @@
     gap: 0.5rem;
     align-items: center;
   }
+  .rename .field {
+    width: 100%;
+  }
   .rename input {
     text-align: center;
+    width: 100%;
   }
   .rename strong {
     font-weight: 700;
   }
-  .rename .inputs {
-    display: grid;
+  .rename .cancelorsave {
+    display: flex;
     gap: 0.5rem;
-    grid-template: 1fr / auto 1fr auto;
+    justify-content: space-between;
     width: 100%;
   }
 </style>

frontend/src/organisms/connection/welcome.svelte

@@ -49,10 +49,10 @@
     height: 250px;
   }
 
-  .title {
+  /* .title {
     font-weight: 600;
     font-size: 1.5rem;
-  }
+  } */
 
   .btn {
     margin-top: 2rem;