Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: appearance theme support system config #104

Merged
merged 2 commits into from
May 24, 2024
Merged

feat: appearance theme support system config #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
422187c
feat: appearance theme support system config
hehehai May 23, 2024
ec54c79
refactor: remove logs
Siumauricio May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/dashboard/projects/show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ export const ShowProjects = () => {
<span className="flex flex-col gap-1.5">
<div className="flex items-center gap-2">
<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}
</span>
</Link>
</div>

<span className="text-sm font-medium text-muted-foreground">
Expand Down
58 changes: 24 additions & 34 deletions components/dashboard/settings/appearance-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
} from "@/components/ui/card";

const appearanceFormSchema = z.object({
theme: z.enum(["light", "dark"], {
theme: z.enum(["light", "dark", "system"], {
required_error: "Please select a theme.",
}),
});
Expand All @@ -34,7 +34,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;

// This can come from your database or API.
const defaultValues: Partial<AppearanceFormValues> = {
theme: "light",
theme: "system",
};

export function AppearanceForm() {
Expand All @@ -46,7 +46,7 @@ export function AppearanceForm() {

useEffect(() => {
form.reset({
theme: theme === "light" ? "light" : "dark",
theme: (theme ?? "system") as AppearanceFormValues["theme"],
});
}, [form, theme]);
function onSubmit(data: AppearanceFormValues) {
Expand Down Expand Up @@ -81,28 +81,15 @@ export function AppearanceForm() {
onValueChange={field.onChange}
defaultValue={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>
<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
<FormControl>
<RadioGroupItem value="light" className="sr-only" />
</FormControl>
<div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
<div className="space-y-2 rounded-sm bg-[#ecedef] p-2">
<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 className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
<img src="/images/theme-light.svg" alt="light" />
</div>
<span className="block w-full p-2 text-center font-normal">
Light
Expand All @@ -114,27 +101,30 @@ export function AppearanceForm() {
<FormControl>
<RadioGroupItem value="dark" className="sr-only" />
</FormControl>
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
<div className="space-y-2 rounded-sm bg-slate-950 p-2">
<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 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-dark.svg" alt="dark" />
</div>
<span className="block w-full p-2 text-center font-normal">
Dark
</span>
</FormLabel>
</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>
</FormItem>
);
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/settings/github/github-setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const GithubSetup = () => {
<>
{data?.githubAppName ? (
<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
{data.githubAppName}! The next step is to install this app in
your GitHub account.
Expand All @@ -121,7 +121,7 @@ export const GithubSetup = () => {
) : (
<div>
<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
need to create and install a GitHub app. This process is
straightforward and only takes a few minutes. Click the
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/settings/profile/profile-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,11 +147,11 @@ export const ProfileForm = () => {
}}
defaultValue={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) => (
<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>
<RadioGroupItem
value={image}
Expand All @@ -163,7 +163,7 @@ export const ProfileForm = () => {
key={image}
src={image}
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>
</FormItem>
Expand Down
2 changes: 1 addition & 1 deletion components/layouts/project-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const ProjectLayout = ({ children }: Props) => {
return (
<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"
>
<div className="flex items-center justify-center">
Expand Down
3 changes: 1 addition & 2 deletions components/layouts/settings-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,15 +102,14 @@ export const Nav = ({ links }: NavProps) => {
<nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
{links.map((link, index) => {
const isActive = router.pathname === link.href;
// biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
return (
<Link
key={index}
href={link.href}
className={cn(
buttonVariants({ variant: "ghost", size: "sm" }),
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",
)}
>
Expand Down
3 changes: 1 addition & 2 deletions components/ui/file-tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ const Tree = React.forwardRef<HTMLDivElement, TreeProps>(
const { ref: refRoot, width, height } = useResizeObserver();

return (
<div ref={refRoot} className={cn("overflow-hidden", className)}>
{/* style={{ width, height }} */}
<div ref={refRoot} className={cn("overflow-y-auto", className)}>
<ScrollArea>
<div className="relative p-2">
<TreeItem
Expand Down
2 changes: 1 addition & 1 deletion pages/dashboard/project/[projectId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const Project = (
}}
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} />
</div>

Expand Down
1 change: 1 addition & 0 deletions public/images/theme-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/theme-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/theme-system.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading