fix: use system as defaultTheme (#60)

* fix: use system as defaultTheme

* chore: auto-fix linting and formatting issues

* fix: AnimatedMan position on login page

* fix: login form overflow on mobile

* fix: theme selected value display overflow

* fix: dropdown menu username overflow

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
This commit is contained in:
仓鼠
2024-12-17 21:51:16 +08:00
committed by GitHub
parent b0f09f4292
commit 896221e83e
5 changed files with 34 additions and 28 deletions

View File

@@ -18,6 +18,7 @@ import {
import { useAuth } from "@/hooks/useAuth" import { useAuth } from "@/hooks/useAuth"
import { useMainStore } from "@/hooks/useMainStore" import { useMainStore } from "@/hooks/useMainStore"
import { useMediaQuery } from "@/hooks/useMediaQuery" import { useMediaQuery } from "@/hooks/useMediaQuery"
import { cn } from "@/lib/utils"
import i18next from "i18next" import i18next from "i18next"
import { LogOut, Settings, User2 } from "lucide-react" import { LogOut, Settings, User2 } from "lucide-react"
import { DateTime } from "luxon" import { DateTime } from "luxon"
@@ -72,7 +73,12 @@ export default function Header() {
<NavigationMenu className="flex flex-col items-start relative max-w-5xl mx-auto"> <NavigationMenu className="flex flex-col items-start relative max-w-5xl mx-auto">
{!disableAnimatedMan && ( {!disableAnimatedMan && (
<img <img
className="absolute -right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none" className={cn(
"absolute right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none",
{
"top-2 right-4": location.pathname === "/dashboard/login",
},
)}
alt={"animated-man"} alt={"animated-man"}
src={"/dashboard/animated-man.webp"} src={"/dashboard/animated-man.webp"}
/> />
@@ -110,7 +116,7 @@ export default function Header() {
</Avatar> </Avatar>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-32"> <DropdownMenuContent className="w-32">
<DropdownMenuLabel> <DropdownMenuLabel className="break-all">
{profile.username} {profile.username}
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />

View File

@@ -22,7 +22,7 @@ enum OSTypes {
export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => { export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const [copy, setCopy] = useState(false) const [copy, setCopy] = useState(false)
const {data: settings} = useSettings() const { data: settings } = useSettings()
const { t } = useTranslation() const { t } = useTranslation()
const switchState = async (type: number) => { const switchState = async (type: number) => {

View File

@@ -42,7 +42,7 @@ function Login() {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className="mt-28 max-w-sm m-auto"> <div className="mt-28 sm:max-w-sm m-auto max-w-fit">
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField <FormField

View File

@@ -40,7 +40,7 @@ export default function Root() {
} }
return ( return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
<section className="text-sm mx-auto h-full flex flex-col justify-between"> <section className="text-sm mx-auto h-full flex flex-col justify-between">
<div> <div>
<Header /> <Header />

View File

@@ -57,21 +57,21 @@ export default function SettingsPage() {
resolver: zodResolver(settingFormSchema), resolver: zodResolver(settingFormSchema),
defaultValues: config defaultValues: config
? { ? {
...config, ...config,
language: config.language, language: config.language,
site_name: config.site_name || "", site_name: config.site_name || "",
user_template: user_template:
config.user_template || config.user_template ||
Object.keys(config.frontend_templates.filter((t) => !t.is_admin) || {})[0] || Object.keys(config.frontend_templates.filter((t) => !t.is_admin) || {})[0] ||
"user-dist", "user-dist",
} }
: { : {
ip_change_notification_group_id: 0, ip_change_notification_group_id: 0,
cover: 1, cover: 1,
site_name: "", site_name: "",
language: "", language: "",
user_template: "user-dist", user_template: "user-dist",
}, },
resetOptions: { resetOptions: {
keepDefaultValues: false, keepDefaultValues: false,
}, },
@@ -167,7 +167,7 @@ export default function SettingsPage() {
}} }}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger className="py-8">
<SelectValue placeholder={t("SelectTheme")} /> <SelectValue placeholder={t("SelectTheme")} />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@@ -219,15 +219,15 @@ export default function SettingsPage() {
{!config?.frontend_templates?.find( {!config?.frontend_templates?.find(
(t) => t.path === field.value, (t) => t.path === field.value,
)?.is_official && ( )?.is_official && (
<div className="mt-2 text-sm text-yellow-700 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-md p-2"> <div className="mt-2 text-sm text-yellow-700 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-md p-2">
<div className="font-medium text-lg mb-1"> <div className="font-medium text-lg mb-1">
{t("CommunityThemeWarning")} {t("CommunityThemeWarning")}
</div>
<div className="text-yellow-700 dark:text-yellow-200">
{t("CommunityThemeDescription")}
</div>
</div> </div>
)} <div className="text-yellow-700 dark:text-yellow-200">
{t("CommunityThemeDescription")}
</div>
</div>
)}
</FormItem> </FormItem>
)} )}
/> />