Merge pull request #138 from TigerAppsOrg/theme-panel

Theme panel

Author: joshuamotoaki

apps/web/src/lib/components/general/AppHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { modalStore } from "$lib/stores/modal";
+    import { panelStore } from "$lib/stores/panel";
     import { darkTheme, getStyles, isMobile } from "$lib/stores/styles";
     import type { SupabaseClient } from "@supabase/supabase-js";
     import { getContext } from "svelte";
@@ -13,6 +14,17 @@
     };
 
     $: cssVarStyles = getStyles("0");
+
+    // Spinning animation state for theme toggle
+    let spinning = false;
+
+    const toggleTheme = () => {
+        spinning = true;
+        darkTheme.set(!$darkTheme);
+        setTimeout(() => {
+            spinning = false;
+        }, 500);
+    };
 </script>
 
 <nav
@@ -31,17 +43,15 @@ dark:border-zinc-700 border-zinc-200"
         </div>
 
         <div id="right" class="sm:space-x-6 space-x-4 flex items-center">
-            <button
-                on:click={() => ($darkTheme = !$darkTheme)}
-                class="btn-circ">
+            <button on:click={toggleTheme} class="btn-circ">
                 {#if $darkTheme}
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="btn-icon">
+                        class="btn-icon {spinning ? 'spin' : ''}">
                         <path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -54,7 +64,7 @@ dark:border-zinc-700 border-zinc-200"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="btn-icon">
+                        class="btn-icon {spinning ? 'spin' : ''}">
                         <path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -63,7 +73,7 @@ dark:border-zinc-700 border-zinc-200"
                 {/if}
             </button>
 
-            <button class="btn-circ" on:click={() => modalStore.push("theme")}>
+            <button class="btn-circ" on:click={() => panelStore.open("theme")}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -135,4 +145,17 @@ dark:border-zinc-700 border-zinc-200"
     .btn-icon {
         @apply w-5 h-5;
     }
+
+    .spin {
+        animation: spin 0.5s ease-in-out;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
 </style>

apps/web/src/lib/components/general/ModalLib.svelte

@@ -10,10 +10,6 @@
     import Feedback from "./Feedback.svelte";
     import FeedbackPop from "./FeedbackPop.svelte";
 
-    // Style Modals
-    import Theme from "./style/Theme.svelte";
-    import Palettes from "./style/Palettes.svelte";
-
     // Event Modals
     import ManageEvents from "../recal/modals/events/ManageEvents.svelte";
     import EditEvent from "../recal/modals/events/EditEvent.svelte";
@@ -28,8 +24,6 @@
         rstats: RecalStats,
         feedback: Feedback,
         feedbackpop: FeedbackPop,
-        theme: Theme,
-        palettes: Palettes,
         manageEvents: ManageEvents,
         editEvent: EditEvent,
         deleteEvent: DeleteEvent