CSS: renamed .btn to .button

frontend/src/app.svelte

@@ -50,7 +50,7 @@
     <main class:empty={showWelcomeScreen}>
       {#if showWelcomeScreen}
         <BlankState label="Welcome to Rolens!" image="/logo.png" pale={false} big={true}>
-          <button class="btn" on:click={createFirstHost}>Add your first host</button>
+          <button class="button" on:click={createFirstHost}>Add your first host</button>
         </BlankState>
       {:else}
         <Connection />
@@ -102,7 +102,7 @@
     overflow: scroll;
   }
 
-  .btn.create {
+  .button.create {
     margin-top: 0.5rem;
   }
 </style>

frontend/src/components/blankstate.svelte

@@ -53,7 +53,7 @@
     margin-bottom: -1.85rem;
   }
 
-  .blankstate :global(.btn) {
+  .blankstate :global(.button) {
     font-size: 1.35rem;
     padding: 1rem;
   }

frontend/src/components/datepicker.svelte

@@ -136,10 +136,10 @@
   </div>
 
   <div slot="footer" class="footer">
-    <button class="btn secondary" type="button" on:click={() => value = new Date()}>
+    <button class="button secondary" type="button" on:click={() => value = new Date()}>
       <Icon name="o" /> Set to now
     </button>
-    <button class="btn" type="button" on:click={() => show = false}>
+    <button class="button" type="button" on:click={() => show = false}>
       <Icon name="check" /> OK
     </button>
   </div>

frontend/src/components/grid.svelte

@@ -35,7 +35,7 @@
   <!-- {#if actions?.length}
     <div class="actions">
       {#each actions as action}
-        <button class="btn" on:click={action.fn} disabled={action.disabled}>
+        <button class="button" on:click={action.fn} disabled={action.disabled}>
           {#if action.icon}<Icon name={action.icon} />{/if}
           {action.label || ''}
         </button>

frontend/src/components/icon.svelte

@@ -14,7 +14,7 @@
     margin-right: 2px;
   }
 
-  :global(.btn) svg {
+  :global(.button) svg {
     height: 13px;
     width: auto;
     vertical-align: bottom;

frontend/src/components/modal.svelte

@@ -48,7 +48,7 @@
       {#if title}
         <header>
           <div class="title">{title}</div>
-          <button class="btn close" on:click={close} title="close" type="button">
+          <button class="button close" on:click={close} title="close" type="button">
             <Icon name="x" />
           </button>
         </header>

frontend/src/components/objectviewer.svelte

@@ -42,16 +42,16 @@
 
     <svelte:fragment slot="footer">
       {#if saveable}
-        <button class="btn" on:click={save} disabled={invalid}>
+        <button class="button" on:click={save} disabled={invalid}>
           <Icon name="save" /> Save
         </button>
       {/if}
 
-      <button class="btn secondary" on:click={close}>
+      <button class="button secondary" on:click={close}>
         <Icon name="x" /> Close
       </button>
 
-      <button class="btn secondary" on:click={copy}>
+      <button class="button secondary" on:click={copy}>
         <Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy
       </button>
 

frontend/src/dialogs/input.svelte

@@ -32,8 +32,8 @@
   </form>
 
   <svelte:fragment slot="footer">
-    <button on:click={submit} class="btn">OK</button>
+    <button on:click={submit} class="button">OK</button>
-    <button on:click={close} class="btn secondary">Cancel</button>
+    <button on:click={close} class="button secondary">Cancel</button>
   </svelte:fragment>
 </Modal>
 

frontend/src/organisms/connection/collection/aggregate.svelte

@@ -61,7 +61,7 @@
               <option {value}>{value}</option>
             {/each}
           </select>
-          <button class="btn secondary" type="button" on:click={() => openStageDocs(stage.type)} title="Open documentation about {stage.type || 'this stage'} on mongodb.org">
+          <button class="button secondary" type="button" on:click={() => openStageDocs(stage.type)} title="Open documentation about {stage.type || 'this stage'} on mongodb.org">
             <Icon name="?" />
           </button>
         </label>
@@ -93,10 +93,10 @@
 
   <div class="controls">
     <div>
-      <button class="btn" type="submit" disabled={invalid}>
+      <button class="button" type="submit" disabled={invalid}>
         <Icon name="play" /> Run pipeline
       </button>
-      <button class="btn" type="button" on:click={() => settingsModalOpen = true}>
+      <button class="button" type="button" on:click={() => settingsModalOpen = true}>
         <Icon name="cog" /> Settings
       </button>
     </div>

frontend/src/organisms/connection/collection/dialogs/export.svelte

@@ -44,14 +44,14 @@
           <option value={key}>{name}</option>
         {/each}
       </select>
-      <button class="btn" type="button" on:click={() => dispatch('openViewConfig')} title="Edit view">
+      <button class="button" type="button" on:click={() => dispatch('openViewConfig')} title="Edit view">
         <Icon name="cog" />
       </button>
     </label>
   </form>
 
   <svelte:fragment slot="footer">
-    <button class="btn" on:click={submit}>
+    <button class="button" on:click={submit}>
       <Icon name="play" /> Start export
     </button>
   </svelte:fragment>

frontend/src/organisms/connection/collection/dialogs/indexdetail.svelte

@@ -71,7 +71,7 @@
               <option value="hashed" disabled={index.model.length > 1}>Hashed</option>
             </select>
           </label>
-          <button type="button" class="btn danger" on:click={() => removeRule(ruleIndex)} disabled={index.model.length < 2}>
+          <button type="button" class="button danger" on:click={() => removeRule(ruleIndex)} disabled={index.model.length < 2}>
             <Icon name="-" />
           </button>
         </div>
@@ -82,10 +82,10 @@
   </form>
 
   <div class="buttons" slot="footer">
-    <button class="btn" on:click={addRule} disabled={index.model.some(r => r.sort === 'hashed')}>
+    <button class="button" on:click={addRule} disabled={index.model.some(r => r.sort === 'hashed')}>
       <Icon name="+" /> Add rule
     </button>
-    <button class="btn" on:click={create} disabled={!index.model.length || index.model.some(r => !r.key)}>
+    <button class="button" on:click={create} disabled={!index.model.length || index.model.some(r => !r.key)}>
       <Icon name="+" /> Create index
     </button>
   </div>

frontend/src/organisms/connection/collection/dialogs/querychooser.svelte

@@ -106,11 +106,11 @@
 
   <svelte:fragment slot="footer">
     {#if queryToSave}
-      <button class="btn" on:click={submit}>
+      <button class="button" on:click={submit}>
         <Icon name="save" /> Save query
       </button>
     {:else}
-      <button class="btn" on:click={submit} disabled={!selectedKey}>
+      <button class="button" on:click={submit} disabled={!selectedKey}>
         <Icon name="upload" /> Load query
       </button>
     {/if}
@@ -131,7 +131,7 @@
     min-height: 200px;
   }
 
-  .btn + :global(.hint) {
+  .button + :global(.hint) {
     margin-top: 0.5rem;
   }
 </style>

frontend/src/organisms/connection/collection/dialogs/viewconfig.svelte

@@ -185,16 +185,16 @@
                 </span>
               </label>
 
-              <button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
+              <button class="button" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
                 <Icon name="+" />
               </button>
-              <button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
+              <button class="button" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
                 <Icon name="chev-u" />
               </button>
-              <button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[collection.viewKey].columns.length - 1} title="Move column one position down">
+              <button class="button" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[collection.viewKey].columns.length - 1} title="Move column one position down">
                 <Icon name="chev-d" />
               </button>
-              <button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
+              <button class="button danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
                 <Icon name="x" />
               </button>
             </div>
@@ -202,10 +202,10 @@
             <p>No columns yet</p>
           {/each}
         </div>
-        <button class="btn" on:click={addColumn}>
+        <button class="button" on:click={addColumn}>
           <Icon name="+" /> Add column
         </button>
-        <button class="btn" on:click={addSuggestedColumns} disabled={!Object.keys(firstItem || {}).length}>
+        <button class="button" on:click={addSuggestedColumns} disabled={!Object.keys(firstItem || {}).length}>
           <Icon name="zap" /> Add suggested columns
         </button>
       {/if}

frontend/src/organisms/connection/collection/find.svelte

@@ -230,17 +230,17 @@
     </div>
 
     <div class="form-row actions">
-      <button type="submit" class="btn" title="Run query">
+      <button type="submit" class="button" title="Run query">
         <Icon name="play" /> Run
       </button>
-      <button class="btn secondary" type="button" on:click={() => collection.export(form)}>
+      <button class="button secondary" type="button" on:click={() => collection.export(form)}>
         <Icon name="save" /> Export results…
       </button>
       <div class="field">
-        <button class="btn secondary" type="button" on:click={loadQuery}>
+        <button class="button secondary" type="button" on:click={loadQuery}>
           <Icon name="upload" /> Load query…
         </button>
-        <button class="btn secondary" type="button" on:click={saveQuery}>
+        <button class="button secondary" type="button" on:click={saveQuery}>
           <Icon name="save" /> Save as…
         </button>
       </div>
@@ -293,23 +293,23 @@
               <option value={key}>{view.name}</option>
             {/each}
           </select>
-          <button class="btn" on:click={openViewConfig} title="Configure view">
+          <button class="button" on:click={openViewConfig} title="Configure view">
             <Icon name="cog" />
           </button>
         </label>
-        <button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
+        <button class="button danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
           <Icon name="-" />
         </button>
-        <button class="btn" on:click={first} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="First page">
+        <button class="button" on:click={first} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="First page">
           <Icon name="chevs-l" />
         </button>
-        <button class="btn" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="Previous {submittedForm.limit} items">
+        <button class="button" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="Previous {submittedForm.limit} items">
           <Icon name="chev-l" />
         </button>
-        <button class="btn" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Next {submittedForm.limit} items">
+        <button class="button" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Next {submittedForm.limit} items">
           <Icon name="chev-r" />
         </button>
-        <button class="btn" on:click={last} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Last page">
+        <button class="button" on:click={last} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Last page">
           <Icon name="chevs-r" />
         </button>
       </div>

frontend/src/organisms/connection/collection/indexes.svelte

@@ -66,13 +66,13 @@
   </div>
 
   <div class="actions">
-    <button class="btn" on:click={refresh}>
+    <button class="button" on:click={refresh}>
       <Icon name="reload" spin={busy} /> Reload
     </button>
-    <button class="btn" on:click={createIndex}>
+    <button class="button" on:click={createIndex}>
       <Icon name="+" /> Create index…
     </button>
-    <button class="btn danger" on:click={dropIndex} disabled={!_indexes.length || !activePath[0]}>
+    <button class="button danger" on:click={dropIndex} disabled={!_indexes.length || !activePath[0]}>
       <Icon name="x" /> Drop selected
     </button>
   </div>

frontend/src/organisms/connection/collection/insert.svelte

@@ -178,13 +178,13 @@
     </div>
     <div>
       {#if insertedIds}
-        <button class="btn" type="button" on:click={showDocs}>View inserted docs</button>
+        <button class="button" type="button" on:click={showDocs}>View inserted docs</button>
       {/if}
       {#if collection.viewKey !== 'list'}
-        <button class="btn" type="button" on:click={showJson} title="Show JSON">
+        <button class="button" type="button" on:click={showJson} title="Show JSON">
           <Icon name="code" />
         </button>
-        <button class="btn" type="button" on:click={switchViewType} title="Edit as {oppositeViewType}">
+        <button class="button" type="button" on:click={switchViewType} title="Edit as {oppositeViewType}">
           <Icon name={oppositeViewType} /> {capitalise(oppositeViewType)}
         </button>
       {/if}
@@ -194,11 +194,11 @@
             <option value={key}>{key === 'list' ? 'Raw JSON' : view.name}</option>
           {/each}
         </select>
-        <button class="btn" type="button" on:click={openViewConfig} title="Configure view">
+        <button class="button" type="button" on:click={openViewConfig} title="Configure view">
           <Icon name="cog" />
         </button>
       </label>
-      <button type="submit" class="btn" disabled={$views[collection.viewKey]?.type === 'list' ? !json : !allValid}>
+      <button type="submit" class="button" disabled={$views[collection.viewKey]?.type === 'list' ? !json : !allValid}>
         <Icon name="+" /> Insert
       </button>
     </div>

frontend/src/organisms/connection/collection/remove.svelte

@@ -45,7 +45,7 @@
   </label>
 
   <div class="actions">
-    <button type="submit" class="btn danger">
+    <button type="submit" class="button danger">
       <Icon name="-" /> Remove
     </button>
 

frontend/src/organisms/connection/collection/stats.svelte

@@ -27,7 +27,7 @@
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy} disabled={!collection.stats}>
+    <button class="button secondary" on:click={copy} disabled={!collection.stats}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/collection/update.svelte

@@ -107,7 +107,7 @@
       {/if}
     {/key}
 
-    <button class="btn" type="submit" disabled={invalid}>
+    <button class="button" type="submit" disabled={invalid}>
       <Icon name="check" /> Update
     </button>
   </div>
@@ -135,11 +135,11 @@
           <input type="text" class="code" bind:value={param.value} placeholder={'{}'} use:input={{ type: 'json' }} />
         </label>
 
-        <button class="btn" disabled={form.parameters.length >= allOperators.length} on:click={() => addParameter()} type="button">
+        <button class="button" disabled={form.parameters.length >= allOperators.length} on:click={() => addParameter()} type="button">
           <Icon name="+" />
         </button>
 
-        <button class="btn" disabled={form.parameters.length < 2} on:click={() => removeParam(index)} type="button">
+        <button class="button" disabled={form.parameters.length < 2} on:click={() => removeParam(index)} type="button">
           <Icon name="-" />
         </button>
       </fieldset>

frontend/src/organisms/connection/database/dialogs/dump.svelte

@@ -126,7 +126,7 @@
   </form>
 
   <svelte:fragment slot="footer">
-    <button class="btn" on:click={performDump}>Perform dump</button>
+    <button class="button" on:click={performDump}>Perform dump</button>
   </svelte:fragment>
 </Modal>
 

frontend/src/organisms/connection/database/stats.svelte

@@ -27,7 +27,7 @@
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy} disabled={!database.stats}>
+    <button class="button secondary" on:click={copy} disabled={!database.stats}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/host/dialogs/hostdetail.svelte

@@ -64,7 +64,7 @@
         <div class="error">{error}</div>
       {/if}
     </div>
-    <button class="btn" disabled={!valid} on:click={submit}>
+    <button class="button" disabled={!valid} on:click={submit}>
       {host ? 'Save' : 'Create'}
     </button>
   </div>

frontend/src/organisms/connection/host/status.svelte

@@ -27,7 +27,7 @@
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy} disabled={!host.status}>
+    <button class="button secondary" on:click={copy} disabled={!host.status}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/host/systeminfo.svelte

@@ -27,7 +27,7 @@
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy} disabled={!host.systemInfo}>
+    <button class="button secondary" on:click={copy} disabled={!host.systemInfo}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/styles/style.css

@@ -65,38 +65,38 @@ select:disabled {
   color: #444;
 }
 
-.btn {
+.button {
   background-color: #00008b;
   border: 1px solid #00008b;
   padding: 0.5rem;
   border-radius: var(--radius);
   color: #fff;
 }
-.btn:focus,
+.button:focus,
-.btn:active {
+.button:active {
   box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
   outline: none;
 }
-.btn.danger {
+.button.danger {
   background-color: #c00;
   border: 1px solid #c00;
 }
-.btn.danger:active,
+.button.danger:active,
-.btn.danger:focus {
+.button.danger:focus {
   box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
 }
-.btn.secondary {
+.button.secondary {
   border: 1px solid #ccc;
   background-color: #fff;
   color: inherit;
 }
-.btn.secondary:hover {
+.button.secondary:hover {
   background-color: #eee;
 }
-.btn.secondary:active {
+.button.secondary:active {
   background-color: #ddd;
 }
-.btn:disabled {
+.button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }