From 0e4c5d474be17a27e709d4ce68282c89ca56e149 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 27 Jun 2023 17:21:54 +0200
Subject: [PATCH] CSS: renamed `.btn` to `.button`

---
 frontend/src/app.svelte                       |  4 ++--
 frontend/src/components/blankstate.svelte     |  2 +-
 frontend/src/components/datepicker.svelte     |  4 ++--
 frontend/src/components/grid.svelte           |  2 +-
 frontend/src/components/icon.svelte           |  2 +-
 frontend/src/components/modal.svelte          |  2 +-
 frontend/src/components/objectviewer.svelte   |  6 +++---
 frontend/src/dialogs/input.svelte             |  4 ++--
 .../connection/collection/aggregate.svelte    |  6 +++---
 .../collection/dialogs/export.svelte          |  4 ++--
 .../collection/dialogs/indexdetail.svelte     |  6 +++---
 .../collection/dialogs/querychooser.svelte    |  6 +++---
 .../collection/dialogs/viewconfig.svelte      | 12 +++++------
 .../connection/collection/find.svelte         | 20 +++++++++----------
 .../connection/collection/indexes.svelte      |  6 +++---
 .../connection/collection/insert.svelte       | 10 +++++-----
 .../connection/collection/remove.svelte       |  2 +-
 .../connection/collection/stats.svelte        |  2 +-
 .../connection/collection/update.svelte       |  6 +++---
 .../connection/database/dialogs/dump.svelte   |  2 +-
 .../connection/database/stats.svelte          |  2 +-
 .../connection/host/dialogs/hostdetail.svelte |  2 +-
 .../organisms/connection/host/status.svelte   |  2 +-
 .../connection/host/systeminfo.svelte         |  2 +-
 frontend/src/styles/style.css                 | 20 +++++++++----------
 25 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/frontend/src/app.svelte b/frontend/src/app.svelte
index b5ef25a..ad684d1 100644
--- a/frontend/src/app.svelte
+++ b/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>
diff --git a/frontend/src/components/blankstate.svelte b/frontend/src/components/blankstate.svelte
index 5d12d5c..c157b50 100644
--- a/frontend/src/components/blankstate.svelte
+++ b/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;
   }
diff --git a/frontend/src/components/datepicker.svelte b/frontend/src/components/datepicker.svelte
index 0cde0f1..c4659d8 100644
--- a/frontend/src/components/datepicker.svelte
+++ b/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>
diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index 6db2162..ee10fbd 100644
--- a/frontend/src/components/grid.svelte
+++ b/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>
diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte
index 5e5d67f..4f9f6d0 100644
--- a/frontend/src/components/icon.svelte
+++ b/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;
diff --git a/frontend/src/components/modal.svelte b/frontend/src/components/modal.svelte
index bfe99b2..a7c9e7d 100644
--- a/frontend/src/components/modal.svelte
+++ b/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>
diff --git a/frontend/src/components/objectviewer.svelte b/frontend/src/components/objectviewer.svelte
index db404f2..a05d8ec 100644
--- a/frontend/src/components/objectviewer.svelte
+++ b/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>
 
diff --git a/frontend/src/dialogs/input.svelte b/frontend/src/dialogs/input.svelte
index 2cb990c..17a3505 100644
--- a/frontend/src/dialogs/input.svelte
+++ b/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={close} class="btn secondary">Cancel</button>
+    <button on:click={submit} class="button">OK</button>
+    <button on:click={close} class="button secondary">Cancel</button>
   </svelte:fragment>
 </Modal>
 
diff --git a/frontend/src/organisms/connection/collection/aggregate.svelte b/frontend/src/organisms/connection/collection/aggregate.svelte
index c03da80..4a730e1 100644
--- a/frontend/src/organisms/connection/collection/aggregate.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/dialogs/export.svelte b/frontend/src/organisms/connection/collection/dialogs/export.svelte
index b314f7b..e3a5689 100644
--- a/frontend/src/organisms/connection/collection/dialogs/export.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/dialogs/indexdetail.svelte b/frontend/src/organisms/connection/collection/dialogs/indexdetail.svelte
index 304fbe5..a611be7 100644
--- a/frontend/src/organisms/connection/collection/dialogs/indexdetail.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/dialogs/querychooser.svelte b/frontend/src/organisms/connection/collection/dialogs/querychooser.svelte
index b850482..887f391 100644
--- a/frontend/src/organisms/connection/collection/dialogs/querychooser.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/dialogs/viewconfig.svelte b/frontend/src/organisms/connection/collection/dialogs/viewconfig.svelte
index a44149c..ef19b0e 100644
--- a/frontend/src/organisms/connection/collection/dialogs/viewconfig.svelte
+++ b/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}
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 5207f3f..26a1d62 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/indexes.svelte b/frontend/src/organisms/connection/collection/indexes.svelte
index 9f76cc6..cc29229 100644
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/insert.svelte b/frontend/src/organisms/connection/collection/insert.svelte
index f75bcad..669c044 100644
--- a/frontend/src/organisms/connection/collection/insert.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/remove.svelte b/frontend/src/organisms/connection/collection/remove.svelte
index 48a1ac8..d7bb300 100644
--- a/frontend/src/organisms/connection/collection/remove.svelte
+++ b/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>
 
diff --git a/frontend/src/organisms/connection/collection/stats.svelte b/frontend/src/organisms/connection/collection/stats.svelte
index 36aaac9..b8d404d 100644
--- a/frontend/src/organisms/connection/collection/stats.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/collection/update.svelte b/frontend/src/organisms/connection/collection/update.svelte
index 3423ee8..a053eb1 100644
--- a/frontend/src/organisms/connection/collection/update.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/database/dialogs/dump.svelte b/frontend/src/organisms/connection/database/dialogs/dump.svelte
index 27434e9..bbc8248 100644
--- a/frontend/src/organisms/connection/database/dialogs/dump.svelte
+++ b/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>
 
diff --git a/frontend/src/organisms/connection/database/stats.svelte b/frontend/src/organisms/connection/database/stats.svelte
index 8caaad3..1143ba1 100644
--- a/frontend/src/organisms/connection/database/stats.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/host/dialogs/hostdetail.svelte b/frontend/src/organisms/connection/host/dialogs/hostdetail.svelte
index 00407d1..ab34cde 100644
--- a/frontend/src/organisms/connection/host/dialogs/hostdetail.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/host/status.svelte b/frontend/src/organisms/connection/host/status.svelte
index b5af594..b63e270 100644
--- a/frontend/src/organisms/connection/host/status.svelte
+++ b/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>
diff --git a/frontend/src/organisms/connection/host/systeminfo.svelte b/frontend/src/organisms/connection/host/systeminfo.svelte
index 3dac86f..9626f56 100644
--- a/frontend/src/organisms/connection/host/systeminfo.svelte
+++ b/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>
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
index a8ae532..590e2ef 100644
--- a/frontend/src/styles/style.css
+++ b/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,
-.btn:active {
+.button:focus,
+.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,
-.btn.danger:focus {
+.button.danger:active,
+.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;
 }