External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(onboarding): restyle theme toggles in preferences step to org-combobox card style

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Théo LAGACHE
2026-06-17 10:24:10 +02:00
co-authored by Claude Sonnet 4.6
parent 34cce3b07d
commit 51317b0d08
1 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/steps/step-preferences.tsx
+31 -6
View File
@@ -2,6 +2,7 @@
import { useState } from "react";
import { useOnboarding } from "@onboardjs/react";
import { Check, Moon, Sun } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -35,6 +36,11 @@ export const StepPreferences = () => {
await next();
};
const themeOptions: { value: "light" | "dark"; label: string; Icon: typeof Sun }[] = [
{ value: "light", label: "Light", Icon: Sun },
{ value: "dark", label: "Dark", Icon: Moon },
];
return (
<div className="flex flex-col gap-4">
<div>
@@ -52,12 +58,31 @@ export const StepPreferences = () => {
</label>
</div>
<div className="flex gap-2">
<Button type="button" variant={theme === "light" ? "default" : "outline"} onClick={() => setTheme("light")}>
Light
</Button>
<Button type="button" variant={theme === "dark" ? "default" : "outline"} onClick={() => setTheme("dark")}>
Dark
</Button>
{themeOptions.map(({ value, label, Icon }) => {
const isActive = theme === value;
return (
<button
key={value}
type="button"
onClick={() => setTheme(value)}
className={`flex items-center gap-2 rounded-lg border p-3 text-sm transition-colors flex-1 ${
isActive
? "border-primary/20 bg-primary/10 text-primary"
: "border-border hover:bg-accent/50 hover:border-primary/20"
}`}
>
<div className="size-7 rounded-md border bg-muted/50 flex items-center justify-center shrink-0">
<Icon className="size-4" />
</div>
<span className="flex-1 text-left">{label}</span>
{isActive && (
<div className="size-5 rounded-full bg-primary flex items-center justify-center">
<Check className="size-3 text-primary-foreground" strokeWidth={3} />
</div>
)}
</button>
);
})}
</div>
<Button type="button" onClick={onContinue}>
Continue