From 28a4590b86ebe44b07571020350aeb5671e94024 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 24 Feb 2024 17:54:02 -0800
Subject: [PATCH] feat: allow disabling setting buttons

---
 client/src/lib/Apps/Settings/SettingsToggle.svelte |  6 +++++-
 client/src/lib/Apps/Settings/Switch.svelte         | 11 ++++++++---
 client/src/lib/Loading/SvelteLogo.svelte           |  4 ++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/lib/Apps/Settings/SettingsToggle.svelte b/client/src/lib/Apps/Settings/SettingsToggle.svelte
index 39b0229..35ac12f 100644
--- a/client/src/lib/Apps/Settings/SettingsToggle.svelte
+++ b/client/src/lib/Apps/Settings/SettingsToggle.svelte
@@ -4,6 +4,7 @@
   @param setting - The setting to be toggled
   @param inverted? - If false, the toggle syncs to the setting (toggle = on, setting = true). If true, the toggle syncs to the setting's inverse (toggle = off, setting = true).
   @param tooltip - Helpful tooltip for the setting
+  @param disabled - Whether or not the setting is disabled
 
   @children The setting's label
  -->
@@ -16,6 +17,7 @@
   export let setting: keyof SettingsStoreData
   export let inverted: boolean = false
   export let tooltip: string = ''
+  export let disabled: boolean = false
 
   $: value = inverted ? !$settingsStore[setting] : $settingsStore[setting]
 
@@ -24,4 +26,6 @@
   }
 </script>
 
-<Switch bind:checked={value} on:click={handleClick} {tooltip}><slot /></Switch>
+<Switch {disabled} bind:checked={value} on:click={handleClick} {tooltip}
+  ><slot /></Switch
+>
diff --git a/client/src/lib/Apps/Settings/Switch.svelte b/client/src/lib/Apps/Settings/Switch.svelte
index 06dcc96..52e9381 100644
--- a/client/src/lib/Apps/Settings/Switch.svelte
+++ b/client/src/lib/Apps/Settings/Switch.svelte
@@ -3,14 +3,19 @@
 
   export let checked: boolean
   export let tooltip: string
+  export let disabled: boolean = false
 </script>
 
-<div class="flex gap-2">
+<div
+  class="flex gap-2"
+  class:brightness-75={disabled}
+  class:cursor-not-allowed={disabled}
+>
   <label class="switch">
-    <input type="checkbox" bind:checked on:click />
+    <input type="checkbox" bind:checked on:click {disabled} />
     <span class="slider" />
   </label>
-  {#if tooltip !== ''}
+  {#if tooltip !== '' && !disabled}
     <Tooltip content={tooltip} arrow={false}>
       <span class="flex-grow text-xl text-slate-100 font-medium"
         ><slot />
diff --git a/client/src/lib/Loading/SvelteLogo.svelte b/client/src/lib/Loading/SvelteLogo.svelte
index c36e6b1..45e75a5 100644
--- a/client/src/lib/Loading/SvelteLogo.svelte
+++ b/client/src/lib/Loading/SvelteLogo.svelte
@@ -14,7 +14,7 @@
 
 {#if visible}
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-    <g out:fade={{ duration: 200 }} opacity="0.3">
+    <g out:fade={{ duration: 200 }} opacity="0.35">
       <path
         in:expand={{ duration: 400, delay: 1000, easing: quintOut }}
         style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
@@ -22,7 +22,7 @@
       />
       <path
         in:draw={{ duration: 1000 }}
-        style="stroke:#ff3e00; stroke-width: 1.5"
+        style="stroke:#ff3e00; stroke-width: 1.75"
         d={inner}
       />
     </g>