Add dark mod

This commit is contained in:
yoan
2024-08-31 13:16:03 +08:00
parent 7479c25e7a
commit 7d3e94247e
19 changed files with 260 additions and 75 deletions

View File

@@ -21,6 +21,7 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import { ConfigProvider } from "@/providers/config";
import { getPb } from "@/repository/api";
import { ThemeToggle } from "@/components/ThemeToggle";
export default function Dashboard() {
const navigate = useNavigate();
@@ -49,12 +50,12 @@ export default function Dashboard() {
<>
<ConfigProvider>
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div className="hidden border-r bg-muted/40 md:block">
<div className="hidden border-r dark:border-stone-500 bg-muted/40 md:block">
<div className="flex h-full max-h-screen flex-col gap-2">
<div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
<div className="flex h-14 items-center border-b dark:border-stone-500 px-4 lg:h-[60px] lg:px-6">
<Link to="/" className="flex items-center gap-2 font-semibold">
<img src="/vite.svg" className="w-[36px] h-[36px]" />
<span className="">Certimate</span>
<span className="dark:text-white">Certimate</span>
</Link>
</div>
<div className="flex-1">
@@ -95,7 +96,7 @@ export default function Dashboard() {
</div>
</div>
<div className="flex flex-col">
<header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<header className="flex h-14 items-center gap-4 border-b dark:border-stone-500 bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<Sheet>
<SheetTrigger asChild>
<Button
@@ -152,6 +153,7 @@ export default function Dashboard() {
</SheetContent>
</Sheet>
<div className="w-full flex-1"></div>
<ThemeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -182,12 +184,12 @@ export default function Dashboard() {
<div className="fixed right-0 bottom-0 w-full flex justify-between p-5">
<div className=""></div>
<div className="text-muted-foreground text-sm hover:text-stone-900">
<div className="text-muted-foreground text-sm hover:text-stone-900 dark:hover:text-stone-200">
<a
href="https://github.com/usual2970/certimate/releases"
target="_blank"
>
Certimate v0.0.9
Certimate v0.0.10
</a>
</div>
</div>

View File

@@ -5,7 +5,9 @@ const SettingLayout = () => {
return (
<div>
<Toaster />
<div className="text-muted-foreground border-b py-5"></div>
<div className="text-muted-foreground border-b dark:border-stone-500 py-5">
</div>
<div className="w-full sm:w-[35em] mt-10 flex flex-col p-3 mx-auto">
{/* <div className="text-muted-foreground">
<span className="transition-all text-sm bg-gray-400 px-3 py-1 rounded-sm text-white cursor-pointer">

View File

@@ -39,7 +39,7 @@ const Access = () => {
</div>
) : (
<>
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
<div className="w-48"></div>
<div className="w-48"></div>
@@ -52,7 +52,7 @@ const Access = () => {
</div>
{accesses.map((access) => (
<div
className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={access.id}
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">

View File

@@ -152,12 +152,15 @@ const Edit = () => {
<>
<div className="">
<Toaster />
<div className="border-b h-10 text-muted-foreground">
<div className="border-b dark:border-stone-500 h-10 text-muted-foreground">
{domain?.id ? "编辑" : "新增"}
</div>
<div className="max-w-[35em] mx-auto mt-10">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="domain"

View File

@@ -170,7 +170,7 @@ const Home = () => {
</>
) : (
<>
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
<div className="w-40"></div>
<div className="w-48"></div>
<div className="w-32"></div>
@@ -185,7 +185,7 @@ const Home = () => {
{domains.map((domain) => (
<div
className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={domain.id}
>
<div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">

View File

@@ -66,7 +66,7 @@ const History = () => {
</>
) : (
<>
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
<div className="w-48"></div>
<div className="w-24"></div>
@@ -82,7 +82,7 @@ const History = () => {
{deployments?.map((deployment) => (
<div
key={deployment.id}
className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
{deployment.expand.domain?.domain}

View File

@@ -85,7 +85,10 @@ const Password = () => {
return (
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="oldPassword"