add default border to square buttons

tetrahedral-tech · Oct 23, 2023 · acf6752 · acf6752
1 parent 8d3d92c
commit acf6752
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/routes/dashboard/BotControls.svelte b/src/routes/dashboard/BotControls.svelte
@@ -10,18 +10,20 @@
 	class="{$selectedAccount ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-40'}
 	bg-section-200 flex flex-wrap items-center justify-center transition-[opacity] duration-300"
 >
-	<button class="square hover:!bg-white" title="Temporary Pause Bot"><Clock class="icon" /></button>
-	<button class="square border-green-500/20 hover:!bg-green-500" title="Resume Bot"
+	<button class="square !border-white/20 hover:!bg-white" title="Temporary Pause Bot"
+		><Clock class="icon" /></button
+	>
+	<button class="square !border-green-500/20 hover:!bg-green-500" title="Resume Bot"
 		><Play class="icon" />
 	</button>
-	<button class="square border-yellow-500/20 hover:!bg-yellow-500" title="Pause Bot"
+	<button class="square !border-yellow-500/20 hover:!bg-yellow-500" title="Pause Bot"
 		><Pause class="icon" />
 	</button>
-	<button class="square border-rose-500/20 hover:!bg-rose-500" title="Delete Bot">
+	<button class="square !border-rose-500/20 hover:!bg-rose-500" title="Delete Bot">
 		<Minus class="icon" />
 	</button>
-	<button class=" border-accent/20 square"><AdjustmentsHorizontal class="icon" /></button>
+	<button class="square"><AdjustmentsHorizontal class="icon" /></button>
 	{#if $user.admin}
-		<button class=" border-accent/20 square"><CommandLine class="icon" /></button>
+		<button class="square"><CommandLine class="icon" /></button>
 	{/if}
 </section>
diff --git a/src/routes/styles.scss b/src/routes/styles.scss
@@ -37,7 +37,7 @@
 		@apply p-4;
 
 		&.square {
-			@apply aspect-square text-2xl leading-[0] transition-colors duration-300 hover:bg-accent hover:text-black;
+			@apply aspect-square border-accent/20 text-2xl leading-[0] transition-colors duration-300 hover:bg-accent hover:text-black;
 			&:hover {
 				@apply bg-accent text-black;
 			}