From d3625f9fc986dc3a01db3c1ee33f16122b693f2f Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Mon, 17 Jul 2023 14:37:43 +0100
Subject: [PATCH] Update the toggle UI.

---
 src/routes/instances/+page.svelte | 35 ++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/routes/instances/+page.svelte b/src/routes/instances/+page.svelte
index c8329fb..d628a77 100644
--- a/src/routes/instances/+page.svelte
+++ b/src/routes/instances/+page.svelte
@@ -18,24 +18,29 @@
 		><div class="i-ic:outline-computer" />
 		Advanced</a
 	>
+ <button                                        
+ 	on:click={toggle}                            
+ 	class="text-text flex items-center text-sm"  
+ >                                              
+ 	<div                                         
+ 		class="i-ic:{insturl === 'long'            
+ 			? 'baseline-toggle-off bg-accent'                  
+ 			: 'baseline-toggle-on bg-amber-500'} h-15 w-15"       
+ 	/>                                           
+ 	{#if insturl === "long"}                     
+ 		Long URL                                   
+ 	{:else}                                      
+ 		Short URL                                  
+ 	{/if}                                        
+ </button>                                      
+
+
+
+
 </div>
 
 <div class="flex flex-col">
-	<button
-		on:click={toggle}
-		class="text-text flex items-center text-sm"
-	>
-		<div
-			class="i-ic:{insturl === 'long'
-				? 'baseline-toggle-off'
-				: 'baseline-toggle-on'} h-10 w-10"
-		/>
-		{#if insturl === "long"}
-			Long URL
-		{:else}
-			Short URL
-		{/if}
-	</button>
+
 	{#if insturl === "long"}
 	{#each data.instances as category}
 		<div class="flex flex-col">