mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-04-30 18:53:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixing styling issues

Browse Source
This commit is contained in:
Dan Ditomaso
2025-02-20 19:00:47 -05:00
parent a1715ef686
commit ce086ffa82
10 changed files with 86 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

13
src/components/DeviceSelector.tsx
View File

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

34
src/components/PageComponents/Connect/HTTP.tsx
View File

@@ -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 } }) => (
<>
<Label>Use HTTPS</Label>
<Switch
onCheckedChange={onChange}
// label="Use TLS"
// description="Description"
disabled={
location.protocol === "https:" || connectionInProgress
}
checked={value}
{...rest}
/>
</>
)}
render={({ field: { value, onChange, ...rest } }) => {
console.log(value);
return (
<>
<Label>Use HTTPS</Label>
<Switch
onCheckedChange={onChange}
disabled={
location.protocol === "https:" || connectionInProgress
}
checked={!!value}
{...rest}
/>
</>
);
}}
/>
</div>
<Button

47
src/components/ThemeSwitcher.tsx
View File

@@ -1,39 +1,44 @@
import { useTheme } from "@app/core/hooks/useTheme";
import { Moon, Sun } from "lucide-react";
import React from "react";
import { cn } from "@app/core/utils/cn";
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
const [theme, setTheme] = React.useState<Theme>(currentTheme);
React.useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
}, [theme]);
}: {
className?: string;
}) {
const { theme, preference, setPreference } = useTheme();
const themeIcons = {
light: (
<Sun className="size-5 transition-transform duration-300 scale-100" />
),
dark: (
<Moon className="size-5 transition-transform duration-300 scale-100" />
),
light: <Sun className="size-5" />,
dark: <Moon className="size-5" />,
system: <Monitor className="size-5" />,
};
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>
);
}

2
src/components/UI/Button.tsx
View File

@@ -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:

2
src/components/UI/Switch.tsx
View File

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

2
src/components/UI/Toast.tsx
View File

@@ -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=""

67
src/components/generic/ThemeProvider.tsx
View File

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

61
src/core/hooks/useTheme.ts
View File

@@ -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>(() => {
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<Theme>(() =>
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 };
}

3
src/index.css
View File

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