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 { useMainStore } from "@/hooks/useMainStore"
import { useMediaQuery } from "@/hooks/useMediaQuery"
import { cn } from "@/lib/utils"
import i18next from "i18next"
import { LogOut, Settings, User2 } from "lucide-react"
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">
{!disableAnimatedMan && (
<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"}
src={"/dashboard/animated-man.webp"}
/>
@@ -110,7 +116,7 @@ export default function Header() {
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-32">
<DropdownMenuLabel>
<DropdownMenuLabel className="break-all">
{profile.username}
</DropdownMenuLabel>
<DropdownMenuSeparator />

View File

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

View File

@@ -42,7 +42,7 @@ function Login() {
const { t } = useTranslation()
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 onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField

View File

@@ -40,7 +40,7 @@ export default function Root() {
}
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">
<div>
<Header />

View File

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