style: visual tweaks to settings page

src/interface/components/Button.svelte

@@ -2,6 +2,6 @@
   let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] bg-gradient-to-tr dark:from-[#38373D] dark:to-[#38373D]/80 from-[#DDDDDD] to-[#DDDDDD]/80 dark:text-white rounded-lg'>
+<button onclick={onClick} class='px-5 py-1.5 text-[0.75rem] shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg'>
   {text}
 </button>

src/interface/components/ColourPicker.svelte

@@ -81,20 +81,20 @@
 </script>
 
 {#if standalone}
-  <div class="h-auto rounded-xl overflow-clip">
+  <div class="h-auto overflow-clip rounded-xl">
     <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
   </div>
 {:else}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={background}
-    class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
+    class="flex absolute top-0 left-0 z-50 justify-center items-center w-full h-full shadow-2xl cursor-pointer bg-black/20 border border-[#DDDDDD]/30 dark:border-[#38373D]/30"
     onclick={handleBackgroundClick}
     onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
   >
     <div
       bind:this={content}
-      class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+      class="p-4 h-auto bg-white rounded-xl border shadow-lg cursor-auto dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
     >
       <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
     </div>

src/interface/components/PickerSwatch.svelte

@@ -8,5 +8,5 @@
   aria-label="Color Picker Swatch"
   onclick={onClick}
   style="background: {$settingsState.selectedColor}"
-  class="w-16 h-8 rounded-md"
+  class="w-16 h-8 rounded-md shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30"
 ></button>

src/interface/components/Select.svelte

@@ -8,7 +8,7 @@
   let select: HTMLSelectElement;
 </script>
 
-<div class="bg-gradient-to-tr dark:to-[#38373D]/80 dark:from-[#38373D]/90 from-[#DDDDDD] to-[#DDDDDD]/80 rounded-lg w-full overflow-clip">
+<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
   <select
     bind:this={select}
     value={state}

src/interface/components/Switch.svelte

@@ -30,8 +30,7 @@
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD] switch select-none"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr select-none shadow-2xl ring-[1px] ring-[#DDDDDD]/30 dark:ring-[#38373D]/30 {state ? 'to-[#30D259]/80 from-[#30D259] dark:from-[#30D259]/40 dark:to-[#30D259]' : 'dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD]'}"
-  data-ison={state}
   onclick={() => onChange(!state)}
   onkeydown={(e) => e.key === "Enter" && onChange(!state)}
   role="switch"
@@ -43,13 +42,3 @@
     class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
   ></div>
 </div>
-
-<style>
-  .switch[data-ison="true"] {
-    @apply to-[#30D259]/80 from-[#30D259];
-  }
-
-  .dark .switch[data-ison="true"] {
-    @apply from-[#30D259]/40 to-[#30D259];
-  }
-</style>

src/interface/pages/settings/general.svelte

@@ -203,7 +203,7 @@
               <h2 class="flex gap-2 items-center text-sm font-bold">
                 Enable {plugin.name}
                 {#if plugin.beta}
-                  <span class="px-2 py-0.5 text-xs font-medium text-orange-800 bg-orange-100 rounded-full dark:bg-orange-900/30 dark:text-orange-300">
+                  <span class="px-2 py-0.5 text-xs font-medium text-orange-800 bg-orange-100 rounded-full border border-orange-300/30 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-900/30">
                     Beta
                   </span>
                 {/if}
@@ -292,25 +292,27 @@
   })}
 
   {#if $settingsState.devMode}
-    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
+    <div class="flex-col p-1 my-1 bg-gradient-to-br from-white rounded-xl border shadow-sm to-zinc-100 border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
-      <div class="pr-4">
+      <div class="flex justify-between items-center px-4 py-3">
-        <h2 class="text-sm font-bold">Developer Mode</h2>
+        <div class="pr-4">
-        <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
+          <h2 class="text-sm font-bold">Developer Mode</h2>
+          <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
+        </div>
+        <div>
+          <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
+        </div>
       </div>
-      <div>
+      <div class="flex justify-between items-center px-4 py-3">
-        <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
+        <div class="pr-4">
-      </div>
+          <h2 class="text-sm font-bold">Sensitive Hider</h2>
-    </div>
+          <p class="text-xs">Replace sensitive content with mock data</p>
-    <div class="flex justify-between items-center px-4 py-3">
+        </div>
-      <div class="pr-4">
+        <div>
-        <h2 class="text-sm font-bold">Sensitive Hider</h2>
+          <Button 
-        <p class="text-xs">Replace sensitive content with mock data</p>
+            onClick={() => hideSensitiveContent()}
-      </div>
+            text="Hide"
-      <div>
+          />
-        <Button 
+        </div>
-          onClick={() => hideSensitiveContent()}
-          text="Hide"
-        />
       </div>
     </div>
   {/if}