From ce086ffa823a42b6c04cfeecf044c1c3adc2cc48 Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Thu, 20 Feb 2025 19:00:47 -0500 Subject: [PATCH] fix: fixing styling issues --- package.json | 2 +- src/components/DeviceSelector.tsx | 13 +--- .../PageComponents/Connect/HTTP.tsx | 34 +++++----- src/components/ThemeSwitcher.tsx | 47 +++++++------ src/components/UI/Button.tsx | 2 +- src/components/UI/Switch.tsx | 2 +- src/components/UI/Toast.tsx | 2 +- src/components/generic/ThemeProvider.tsx | 67 ------------------- src/core/hooks/useTheme.ts | 61 +++++++++-------- src/index.css | 3 +- 10 files changed, 86 insertions(+), 147 deletions(-) delete mode 100644 src/components/generic/ThemeProvider.tsx diff --git a/package.json b/package.json index 35f02a73..bf03feb1 100644 --- a/package.json +++ b/package.json @@ -95,6 +95,6 @@ "tailwindcss-animate": "^1.0.7", "tar": "^7.4.3", "typescript": "^5.7.3", - "vite": "^6.1.0" + "vite": "^6.1.1" } } diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 90d0d8a6..3b6d5835 100644 --- a/src/components/DeviceSelector.tsx +++ b/src/components/DeviceSelector.tsx @@ -1,11 +1,11 @@ import { DeviceSelectorButton } from "@components/DeviceSelectorButton.tsx"; +import ThemeSwitcher from "@components/ThemeSwitcher"; import { Separator } from "@components/UI/Seperator.tsx"; import { Code } from "@components/UI/Typography/Code.tsx"; import { useAppStore } from "@core/stores/appStore.ts"; import { useDeviceStore } from "@core/stores/deviceStore.ts"; import { HomeIcon, PlusIcon, SearchIcon } from "lucide-react"; import type { JSX } from "react"; -import ThemeSwitcher from "./ThemeSwitcher"; import { Avatar } from "./UI/Avatar"; export const DeviceSelector = (): JSX.Element => { @@ -50,21 +50,14 @@ export const DeviceSelector = (): JSX.Element => { -
+
- {/* */}
); } diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx index 256fada5..a00d215b 100644 --- a/src/components/UI/Button.tsx +++ b/src/components/UI/Button.tsx @@ -15,7 +15,7 @@ const buttonVariants = cva( success: "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600", outline: - "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-100", + "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500", subtle: "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 dark:bg-slate-700 dark:text-slate-100", ghost: diff --git a/src/components/UI/Switch.tsx b/src/components/UI/Switch.tsx index 1f7b6d9f..3a0bd38f 100644 --- a/src/components/UI/Switch.tsx +++ b/src/components/UI/Switch.tsx @@ -9,7 +9,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( void; -} - -const ThemeContext = createContext(undefined); - -export function ThemeProvider({ children }: { children: React.ReactNode }) { - const [theme, setTheme] = useState(() => { - if (typeof window !== "undefined") { - const savedTheme = localStorage.getItem("theme") as Theme; - return savedTheme || "system"; - } - return "system"; - }); - - useEffect(() => { - const root = window.document.documentElement; - root.classList.remove("light", "dark"); - - if (theme === "system") { - const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") - .matches - ? "dark" - : "light"; - root.classList.add(systemTheme); - } else { - root.classList.add(theme); - } - - localStorage.setItem("theme", theme); - }, [theme]); - - useEffect(() => { - const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); - - const handleChange = () => { - if (theme === "system") { - const root = window.document.documentElement; - root.classList.remove("light", "dark"); - root.classList.add(mediaQuery.matches ? "dark" : "light"); - } - }; - - mediaQuery.addEventListener("change", handleChange); - return () => mediaQuery.removeEventListener("change", handleChange); - }, [theme]); - - return ( - - {children} - - ); -} - -export function useTheme() { - const context = useContext(ThemeContext); - if (context === undefined) { - throw new Error("useTheme must be used within a ThemeProvider"); - } - return context; -} diff --git a/src/core/hooks/useTheme.ts b/src/core/hooks/useTheme.ts index f90d8e03..624ca822 100644 --- a/src/core/hooks/useTheme.ts +++ b/src/core/hooks/useTheme.ts @@ -1,37 +1,42 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; -type Theme = "light" | "dark"; +type Theme = "light" | "dark" | "system"; export function useTheme() { - const [theme, setTheme] = useState(() => { - if (typeof window === "undefined") return "light"; - return ( - (document.documentElement.getAttribute("data-theme") as Theme) || "light" - ); - }); + const getSystemTheme = () => + window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + + const getStoredPreference = useCallback( + (): Theme => (localStorage.getItem("theme") as Theme) || "system", + [], + ); + + const [preference, setPreference] = useState(() => + typeof window !== "undefined" ? getStoredPreference() : "light", + ); + + const theme = preference === "system" ? getSystemTheme() : preference; useEffect(() => { - const observer = new MutationObserver((mutations) => { - for (const mutation of mutations) { - if ( - mutation.type === "attributes" && - mutation.attributeName === "data-theme" - ) { - const newTheme = document.documentElement.getAttribute( - "data-theme", - ) as Theme; - setTheme(newTheme); - } - } - }); + document.documentElement.setAttribute("data-theme", theme); + }, [theme]); - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["data-theme"], - }); + useEffect(() => { + if (preference !== "system") return; - return () => observer.disconnect(); - }, []); + const media = window.matchMedia("(prefers-color-scheme: dark)"); + const updateTheme = () => setPreference(getStoredPreference()); - return theme; + media.addEventListener("change", updateTheme); + return () => media.removeEventListener("change", updateTheme); + }, [preference, getStoredPreference]); + + const setPreferenceValue = (newPreference: Theme) => { + localStorage.setItem("theme", newPreference); + setPreference(newPreference); + }; + + return { theme, preference, setPreference: setPreferenceValue }; } diff --git a/src/index.css b/src/index.css index 51a00097..2cffb301 100644 --- a/src/index.css +++ b/src/index.css @@ -82,10 +82,11 @@ .maplibregl-popup-close-button { padding: 4px 10px 8px 0; font-size: 1.2rem; + color: #000; } .maplibregl-popup-close-button:hover { - background-color: white !important; + background-color: transparent !important; } }