Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: appearance theme support system config

Browse Source
This commit is contained in:
hehehai 2024-05-23 17:41:24 +08:00
parent 2362130927
commit 422187cd4b
11 changed files with 39 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/dashboard/projects/show.tsx
View File

@ -89,9 +89,9 @@ export const ShowProjects = () => {
<span className="flex flex-col gap-1.5"> <span className="flex flex-col gap-1.5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<BookIcon className="size-4 text-muted-foreground" /> <BookIcon className="size-4 text-muted-foreground" />
<span className="text-base font-medium leading-none"> <Link className="text-base font-medium leading-none" href={`/dashboard/project/${project.projectId}`}>
{project.name} {project.name}
</span> </Link>
</div> </div>
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">

58
components/dashboard/settings/appearance-form.tsx
View File

@ -25,7 +25,7 @@ import {
} from "@/components/ui/card"; } from "@/components/ui/card";
const appearanceFormSchema = z.object({ const appearanceFormSchema = z.object({
theme: z.enum(["light", "dark"], { theme: z.enum(["light", "dark", "system"], {
required_error: "Please select a theme.", required_error: "Please select a theme.",
}), }),
}); });
@ -34,7 +34,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
// This can come from your database or API. // This can come from your database or API.
const defaultValues: Partial<AppearanceFormValues> = { const defaultValues: Partial<AppearanceFormValues> = {
theme: "light", theme: "system",
}; };
export function AppearanceForm() { export function AppearanceForm() {
@ -46,7 +46,7 @@ export function AppearanceForm() {
useEffect(() => { useEffect(() => {
form.reset({ form.reset({
theme: theme === "light" ? "light" : "dark", theme: (theme ?? "system") as AppearanceFormValues["theme"],
}); });
}, [form, theme]); }, [form, theme]);
function onSubmit(data: AppearanceFormValues) { function onSubmit(data: AppearanceFormValues) {
@ -81,28 +81,15 @@ export function AppearanceForm() {
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
value={field.value} value={field.value}
className="grid max-w-md grid-cols-1 sm:grid-cols-2 gap-8 pt-2" className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
> >
<FormItem> <FormItem>
<FormLabel className="[&:has([data-state=checked])>div]:border-primary"> <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
<FormControl> <FormControl>
<RadioGroupItem value="light" className="sr-only" /> <RadioGroupItem value="light" className="sr-only" />
</FormControl> </FormControl>
<div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent"> <div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
<div className="space-y-2 rounded-sm bg-[#ecedef] p-2"> <img src="/images/theme-light.svg" alt="light" />
<div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
<div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
</div>
</div> </div>
<span className="block w-full p-2 text-center font-normal"> <span className="block w-full p-2 text-center font-normal">
Light Light
@ -114,27 +101,30 @@ export function AppearanceForm() {
<FormControl> <FormControl>
<RadioGroupItem value="dark" className="sr-only" /> <RadioGroupItem value="dark" className="sr-only" />
</FormControl> </FormControl>
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"> <div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
<div className="space-y-2 rounded-sm bg-slate-950 p-2"> <img src="/images/theme-dark.svg" alt="dark" />
<div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div className="h-2 w-[80px] rounded-lg bg-slate-400" />
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>
<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div className="h-4 w-4 rounded-full bg-slate-400" />
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>
<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div className="h-4 w-4 rounded-full bg-slate-400" />
<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>
</div>
</div> </div>
<span className="block w-full p-2 text-center font-normal"> <span className="block w-full p-2 text-center font-normal">
Dark Dark
</span> </span>
</FormLabel> </FormLabel>
</FormItem> </FormItem>
<FormItem>
<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
<FormControl>
<RadioGroupItem
value="system"
className="sr-only"
/>
</FormControl>
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
<img src="/images/theme-system.svg" alt="system" />
</div>
<span className="block w-full p-2 text-center font-normal">
System
</span>
</FormLabel>
</FormItem>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
); );

4
components/dashboard/settings/github/github-setup.tsx
View File

@ -100,7 +100,7 @@ export const GithubSetup = () => {
<> <>
{data?.githubAppName ? ( {data?.githubAppName ? (
<div className="flex w-fit flex-col gap-4"> <div className="flex w-fit flex-col gap-4">
<span className="text-muted-foreground"> <span className="text-muted-foreground text-sm">
Youve successfully created a GitHub app named Youve successfully created a GitHub app named
{data.githubAppName}! The next step is to install this app in {data.githubAppName}! The next step is to install this app in
your GitHub account. your GitHub account.
@ -121,7 +121,7 @@ export const GithubSetup = () => {
) : ( ) : (
<div> <div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-muted-foreground"> <span className="text-muted-foreground text-sm">
To integrate your GitHub account with our services, youll To integrate your GitHub account with our services, youll
need to create and install a GitHub app. This process is need to create and install a GitHub app. This process is
straightforward and only takes a few minutes. Click the straightforward and only takes a few minutes. Click the

6
components/dashboard/settings/profile/profile-form.tsx
View File

@ -147,11 +147,11 @@ export const ProfileForm = () => {
}} }}
defaultValue={field.value} defaultValue={field.value}
value={field.value} value={field.value}
className="flex flex-row flex-wrap gap-2 max-xl:justify-cente" className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
> >
{randomImages.map((image) => ( {randomImages.map((image) => (
<FormItem key={image}> <FormItem key={image}>
<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px"> <FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">
<FormControl> <FormControl>
<RadioGroupItem <RadioGroupItem
value={image} value={image}
@ -163,7 +163,7 @@ export const ProfileForm = () => {
key={image} key={image}
src={image} src={image}
alt="avatar" alt="avatar"
className="h-12 w-12 rounded-full border transition-transform" className="h-12 w-12 rounded-full border hover:p-px hover:border-primary transition-transform"
/> />
</FormLabel> </FormLabel>
</FormItem> </FormItem>

2
components/layouts/project-layout.tsx
View File

@ -8,7 +8,7 @@ export const ProjectLayout = ({ children }: Props) => {
return ( return (
<div> <div>
<div <div
className="bg-radial relative flex flex-col bg-background pt-6" className="bg-radial relative flex flex-col bg-background"
id="app-container" id="app-container"
> >
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">

4
components/layouts/settings-layout.tsx
View File

@ -97,12 +97,12 @@ interface NavProps {
export const Nav = ({ links }: NavProps) => { export const Nav = ({ links }: NavProps) => {
const router = useRouter(); const router = useRouter();
console.log(router.pathname, links);
return ( return (
<div className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 "> <div className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 ">
<nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2"> <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
{links.map((link, index) => { {links.map((link, index) => {
const isActive = router.pathname === link.href; const isActive = router.pathname === link.href;
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
return ( return (
<Link <Link
key={index} key={index}
@ -110,7 +110,7 @@ export const Nav = ({ links }: NavProps) => {
className={cn( className={cn(
buttonVariants({ variant: "ghost", size: "sm" }), buttonVariants({ variant: "ghost", size: "sm" }),
isActive && isActive &&
"dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white", "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white bg-muted",
"justify-start", "justify-start",
)} )}
> >

3
components/ui/file-tree.tsx
View File

@ -88,8 +88,7 @@ const Tree = React.forwardRef<HTMLDivElement, TreeProps>(
const { ref: refRoot, width, height } = useResizeObserver(); const { ref: refRoot, width, height } = useResizeObserver();
return ( return (
<div ref={refRoot} className={cn("overflow-hidden", className)}> <div ref={refRoot} className={cn("overflow-y-auto", className)}>
{/* style={{ width, height }} */}
<ScrollArea> <ScrollArea>
<div className="relative p-2"> <div className="relative p-2">
<TreeItem <TreeItem

2
pages/dashboard/project/[projectId].tsx
View File

@ -212,7 +212,7 @@ const Project = (
}} }}
className="group relative cursor-pointer bg-transparent transition-colors hover:bg-card h-fit" className="group relative cursor-pointer bg-transparent transition-colors hover:bg-card h-fit"
> >
<div className="absolute -right-1 -top-1"> <div className="absolute -right-1 -top-2">
<StatusTooltip status={service.status} /> <StatusTooltip status={service.status} />
</div> </div>

1
public/images/theme-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 588 406" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="588" height="406" rx="16" fill="#050912"/><g filter="url(#a)"><rect x="24" y="22" width="540" height="122" rx="20" fill="#171E2D"/></g><g filter="url(#b)"><rect x="24" y="167" width="540" height="96" rx="20" fill="#171E2D"/></g><g filter="url(#c)"><rect x="24" y="288" width="540" height="96" rx="20" fill="#171E2D"/></g><rect x="56" y="47" width="240" height="24" rx="12" fill="#8291A9"/><rect x="56" y="94" width="300" height="24" rx="12" fill="#8291A9"/><rect x="129" y="203" width="300" height="24" rx="12" fill="#8291A9"/><rect x="129" y="324" width="300" height="24" rx="12" fill="#8291A9"/><circle cx="80" cy="215" r="24" fill="#8291A9"/><circle cx="80" cy="336" r="24" fill="#8291A9"/><defs><filter id="a" x="19" y="20" width="550" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_60"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_60" result="shape"/></filter><filter id="b" x="19" y="165" width="550" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_60"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_60" result="shape"/></filter><filter id="c" x="19" y="286" width="550" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_60"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_60" result="shape"/></filter></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
public/images/theme-light.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 588 406" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="588" height="406" rx="16" fill="#E7E8EB"/><g filter="url(#a)"><rect x="24" y="22" width="540" height="122" rx="20" fill="#fff"/></g><g filter="url(#b)"><rect x="24" y="167" width="540" height="96" rx="20" fill="#fff"/></g><g filter="url(#c)"><rect x="24" y="288" width="540" height="96" rx="20" fill="#fff"/></g><rect x="56" y="47" width="240" height="24" rx="12" fill="#E7E8EB"/><rect x="56" y="94" width="300" height="24" rx="12" fill="#E7E8EB"/><rect x="129" y="203" width="300" height="24" rx="12" fill="#E7E8EB"/><rect x="129" y="324" width="300" height="24" rx="12" fill="#E7E8EB"/><circle cx="80" cy="215" r="24" fill="#E7E8EB"/><circle cx="80" cy="336" r="24" fill="#E7E8EB"/><defs><filter id="a" x="19" y="20" width="550" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_59"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_59" result="shape"/></filter><filter id="b" x="19" y="165" width="550" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_59"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_59" result="shape"/></filter><filter id="c" x="19" y="286" width="550" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_10_59"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_10_59" result="shape"/></filter></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
public/images/theme-system.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB