refactor(badges): buttons

2 files changed, 13 insertions, 8 deletions

diff --git a/src/app.css b/src/app.css
index 3077c828..7af85dbe 100644
--- a/src/app.css
+++ b/src/app.css
@@ -106,3 +106,7 @@ button:active {
 .button-badge:active {
 	transform: scale(0.75);
 }
+
+.button-lined {
+	transform: translateY(0.175em);
+}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 173436d9..11cbacdf 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -204,8 +204,7 @@
 			<p>
 				<a href={`/user/${data.username}`}>Back to Profile</a>
 				•
-				<a
-					href={`#`}
+				<button
 					on:click={() => {
 						if (editMode) selectedBadge = undefined;
 
@@ -213,9 +212,9 @@
 					}}
 				>
 					{editMode ? 'Disable' : 'Enable'} Edit Mode
-				</a>
+				</button>
 				•
-				<a href={`#`} on:click={() => screenshot()}>Download</a>
+				<button on:click={() => screenshot()}>Download</button>
 				•
 				<input type="checkbox" bind:checked={dark} /> Dark Mode
 				<input type="checkbox" bind:checked={transparent} /> Transparent Background
@@ -268,14 +267,16 @@
 							: selectedBadge.category
 						: ''}
 				/>
-				<a href={`#`} on:click={submitBadge}>{selectedBadge ? 'Update' : 'Add'} Badge</a>
+				<button class="button-lined" on:click={submitBadge}
+					>{selectedBadge ? 'Update' : 'Add'}</button
+				>
 				{#if selectedBadge}
 					or
-					<a
-						href={`#`}
+					<button
+						class="button-lined"
 						on:click={() => {
 							if (selectedBadge) removeBadge(selectedBadge);
-						}}>Delete Badge (click twice)</a
+						}}>Delete (click twice)</button
 					>
 				{/if}
 				<span style="float: right;">