ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved ThemeToggle to account settings

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-21 12:19:29 +00:00
parent 94236ad0bf
commit 7514a46d36
3 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/frontend/src/components/account-dialog.tsx
View File

@@ -12,6 +12,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { UploadAvatar } from "@/components/upload-avatar"; import { UploadAvatar } from "@/components/upload-avatar";
import { useUpdateUser } from "@/lib/query/hooks"; import { useUpdateUser } from "@/lib/query/hooks";
import { parseError } from "@/lib/server"; import { parseError } from "@/lib/server";
import { cn } from "@/lib/utils";
import ThemeToggle from "./theme-toggle";
function AccountDialog({ trigger }: { trigger?: ReactNode }) { function AccountDialog({ trigger }: { trigger?: ReactNode }) {
const { user: currentUser, setUser } = useAuthenticatedSession(); const { user: currentUser, setUser } = useAuthenticatedSession();
@@ -82,7 +84,7 @@ function AccountDialog({ trigger }: { trigger?: ReactNode }) {
)} )}
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-sm"> <DialogContent className={cn("sm:max-w-sm", error !== "" && "border border-destructive")}>
<DialogHeader> <DialogHeader>
<DialogTitle>Account</DialogTitle> <DialogTitle>Account</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -122,41 +124,47 @@ function AccountDialog({ trigger }: { trigger?: ReactNode }) {
/> />
<Label className="text-lg -mt-2">Preferences</Label> <Label className="text-lg -mt-2">Preferences</Label>
<div className="flex flex-col gap-1 w-min"> <div className="flex gap-8 justify w-full">
<Label className="text-sm">Icon Style</Label> <div className="flex flex-col items-start gap-1">
<Select <Label className="text-sm">Light/Dark Mode</Label>
value={iconPreference} <ThemeToggle withText />
onValueChange={(v) => setIconPreference(v as IconStyle)} </div>
> <div className="flex flex-col items-start gap-1">
<SelectTrigger className="w-full"> <Label className="text-sm">Icon Style</Label>
<SelectValue /> <Select
</SelectTrigger> value={iconPreference}
<SelectContent position="popper" side="bottom" align="start"> onValueChange={(v) => setIconPreference(v as IconStyle)}
<SelectItem value="lucide"> >
<div className="flex items-center gap-2"> <SelectTrigger className="w-full">
<Icon icon="sun" iconStyle="lucide" size={16} /> <SelectValue />
Lucide </SelectTrigger>
</div> <SelectContent position="popper" side="bottom" align="start">
</SelectItem> <SelectItem value="lucide">
<SelectItem value="pixel"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Icon icon="sun" iconStyle="lucide" size={16} />
<Icon icon="sun" iconStyle="pixel" size={16} /> Lucide
Pixel </div>
</div> </SelectItem>
</SelectItem> <SelectItem value="pixel">
<SelectItem value="phosphor"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Icon icon="sun" iconStyle="pixel" size={16} />
<Icon icon="sun" iconStyle="phosphor" size={16} /> Pixel
Phosphor </div>
</div> </SelectItem>
</SelectItem> <SelectItem value="phosphor">
</SelectContent> <div className="flex items-center gap-2">
</Select> <Icon icon="sun" iconStyle="phosphor" size={16} />
Phosphor
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
{error !== "" && <Label className="text-destructive text-sm">{error}</Label>} {error !== "" && <Label className="text-destructive text-sm">{error}</Label>}
<div className="flex justify-end"> <div className="flex justify-end mt-4">
<Button variant={"outline"} type={"submit"} className="px-12"> <Button variant={"outline"} type={"submit"} className="px-12">
Save Save
</Button> </Button>

21
packages/frontend/src/components/theme-toggle.tsx
View File

@@ -3,7 +3,7 @@ import Icon from "@/components/ui/icon";
import { IconButton } from "@/components/ui/icon-button"; import { IconButton } from "@/components/ui/icon-button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function ThemeToggle({ className }: { className?: string }) { function ThemeToggle({ withText, className }: { withText?: boolean; className?: string }) {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const resolvedTheme = const resolvedTheme =
theme === "system" theme === "system"
@@ -14,14 +14,17 @@ function ThemeToggle({ className }: { className?: string }) {
const isDark = resolvedTheme === "dark"; const isDark = resolvedTheme === "dark";
return ( return (
<IconButton <div className={cn("flex items-center gap-2", className)}>
size="md" <IconButton
className={cn("hover:text-muted-foreground", className)} size="md"
onClick={() => setTheme(isDark ? "light" : "dark")} className={cn("hover:text-muted-foreground", className)}
title={isDark ? "Switch to light mode" : "Switch to dark mode"} onClick={() => setTheme(isDark ? "light" : "dark")}
> title={isDark ? "Switch to light mode" : "Switch to dark mode"}
{isDark ? <Icon icon="sun" className="size-5" /> : <Icon icon="moon" className="size-5" />} >
</IconButton> {isDark ? <Icon icon="sun" className="size-5" /> : <Icon icon="moon" className="size-5" />}
</IconButton>
{withText && (isDark ? "Dark Mode" : "Light Mode")}
</div>
); );
} }

2
packages/frontend/src/pages/App.tsx
View File

@@ -15,7 +15,6 @@ import { useSelection } from "@/components/selection-provider";
import { ServerConfigurationDialog } from "@/components/server-configuration-dialog"; import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
import { useAuthenticatedSession } from "@/components/session-provider"; import { useAuthenticatedSession } from "@/components/session-provider";
import SmallUserDisplay from "@/components/small-user-display"; import SmallUserDisplay from "@/components/small-user-display";
import ThemeToggle from "@/components/theme-toggle";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
@@ -217,7 +216,6 @@ export default function App() {
)} )}
</div> </div>
<div className={`flex gap-${BREATHING_ROOM} items-center`}> <div className={`flex gap-${BREATHING_ROOM} items-center`}>
<ThemeToggle />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger className="text-sm"> <DropdownMenuTrigger className="text-sm">
<SmallUserDisplay user={user} /> <SmallUserDisplay user={user} />