fix: fixing styling issues

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"
   }
 }

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 => {
           <button
             type="button"
             onClick={() => setConnectDialogOpen(true)}
-            className="transition-all duration-300 hover:text-accent"
+            className="transition-all duration-300"
           >
             <PlusIcon />
           </button>
         </ul>
       </div>
-      <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
+      <div className="flex w-20 flex-col items-center space-y-5 px-5 pb-5">
         <ThemeSwitcher />
-        {/* <button
-          type="button"
-          className="transition-all hover:text-accent"
-          onClick={() => setDarkMode(!darkMode)}
-        >
-          {darkMode ? <SunIcon /> : <MoonIcon />}
-        </button> */}
         <button
           type="button"
           className="transition-all hover:text-accent"

src/components/PageComponents/Connect/HTTP.tsx

@@ -57,28 +57,30 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
         <Input
           prefix={https ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
-          className="text-black"
+          className="text-black dark:text-black"
           disabled={connectionInProgress}
           {...register("ip")}
         />
         <Controller
           name="tls"
           control={control}
-          render={({ field: { value, onChange, ...rest } }) => (
+          render={({ field: { value, onChange, ...rest } }) => {
-            <>
+            console.log(value);
-              <Label>Use HTTPS</Label>
+
-              <Switch
+            return (
-                onCheckedChange={onChange}
+              <>
-                // label="Use TLS"
+                <Label>Use HTTPS</Label>
-                // description="Description"
+                <Switch
-                disabled={
+                  onCheckedChange={onChange}
-                  location.protocol === "https:" || connectionInProgress
+                  disabled={
-                }
+                    location.protocol === "https:" || connectionInProgress
-                checked={value}
+                  }
-                {...rest}
+                  checked={!!value}
-              />
+                  {...rest}
-            </>
+                />
-          )}
+              </>
+            );
+          }}
         />
       </div>
       <Button

src/components/ThemeSwitcher.tsx

@@ -1,39 +1,44 @@
 import { useTheme } from "@app/core/hooks/useTheme";
-import { Moon, Sun } from "lucide-react";
+import { cn } from "@app/core/utils/cn";
-import React from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
 
-type Theme = "light" | "dark";
+type ThemePreference = "light" | "dark" | "system";
 
 export default function ThemeSwitcher({
   className = "",
-}: { className?: string }) {
+}: {
-  const currentTheme = useTheme(); // Get current theme from DOM
+  className?: string;
-  const [theme, setTheme] = React.useState<Theme>(currentTheme);
+}) {
-
+  const { theme, preference, setPreference } = useTheme();
-  React.useEffect(() => {
-    document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
-  }, [theme]);
 
   const themeIcons = {
-    light: (
+    light: <Sun className="size-5" />,
-      <Sun className="size-5 transition-transform duration-300 scale-100" />
+    dark: <Moon className="size-5" />,
-    ),
+    system: <Monitor className="size-5" />,
-    dark: (
-      <Moon className="size-5 transition-transform duration-300 scale-100" />
-    ),
   };
 
-  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
+  const toggleTheme = () => {
+    const preferences: ThemePreference[] = ["light", "dark", "system"];
+    const currentIndex = preferences.indexOf(preference);
+    const nextPreference = preferences[(currentIndex + 1) % preferences.length];
+    setPreference(nextPreference);
+  };
 
   return (
     <button
       type="button"
-      className={`transition-all duration-300 hover:text-accent ${className}`}
+      className={cn(
+        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2",
+        className,
+      )}
       onClick={toggleTheme}
-      aria-label={`Current theme: ${theme}. Click to change theme.`}
+      aria-label={
+        preference === "system"
+          ? `System theme (currently ${theme}). Click to change theme.`
+          : `Current theme: ${theme}. Click to change theme.`
+      }
     >
-      {themeIcons[theme]}
+      {themeIcons[preference]}
     </button>
   );
 }

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:

src/components/UI/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-600 dark:data-[state=unchecked]:bg-slate-100",
       className,
     )}
     {...props}

src/components/UI/Toast.tsx

@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600 dark:text-slate-400 dark:hover:text-slate-50",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600 text-black",
       className,
     )}
     toast-close=""

src/components/generic/ThemeProvider.tsx

@@ -1,67 +0,0 @@
-import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "light" | "dark" | "system";
-
-interface ThemeContextType {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>(() => {
-    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 (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}

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<Theme>(() => {
+  const getSystemTheme = () =>
-    if (typeof window === "undefined") return "light";
+    window.matchMedia("(prefers-color-scheme: dark)").matches
-    return (
+      ? "dark"
-      (document.documentElement.getAttribute("data-theme") as Theme) || "light"
+      : "light";
-    );
+
-  });
+  const getStoredPreference = useCallback(
+    (): Theme => (localStorage.getItem("theme") as Theme) || "system",
+    [],
+  );
+
+  const [preference, setPreference] = useState<Theme>(() =>
+    typeof window !== "undefined" ? getStoredPreference() : "light",
+  );
+
+  const theme = preference === "system" ? getSystemTheme() : preference;
 
   useEffect(() => {
-    const observer = new MutationObserver((mutations) => {
+    document.documentElement.setAttribute("data-theme", theme);
-      for (const mutation of mutations) {
+  }, [theme]);
-        if (
-          mutation.type === "attributes" &&
-          mutation.attributeName === "data-theme"
-        ) {
-          const newTheme = document.documentElement.getAttribute(
-            "data-theme",
-          ) as Theme;
-          setTheme(newTheme);
-        }
-      }
-    });
 
-    observer.observe(document.documentElement, {
+  useEffect(() => {
-      attributes: true,
+    if (preference !== "system") return;
-      attributeFilter: ["data-theme"],
-    });
 
-    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 };
 }

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;
   }
 }