Optimize ui

This commit is contained in:
yoan 2024-08-31 16:18:34 +08:00
parent 7d3e94247e
commit 227d44926f
4 changed files with 32 additions and 29 deletions

@ -1,6 +1,6 @@
<p align="center"> <p align="center">
<a href="#" target="_blank" rel="noopener"> <a href="#" target="_blank" rel="noopener">
<img src="https://i.imgur.com/4ff4nUV.jpeg" alt="Certimate - Your Trusted SSL Automation Partner" /> <img src="https://i.imgur.com/Nno3V5B.jpeg" alt="Certimate - Your Trusted SSL Automation Partner" />
</a> </a>
</p> </p>

@ -1,17 +1,17 @@
import * as React from "react" import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog" import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority";
import { X } from "lucide-react" import { X } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const Sheet = SheetPrimitive.Root const Sheet = SheetPrimitive.Root;
const SheetTrigger = SheetPrimitive.Trigger const SheetTrigger = SheetPrimitive.Trigger;
const SheetClose = SheetPrimitive.Close const SheetClose = SheetPrimitive.Close;
const SheetPortal = SheetPrimitive.Portal const SheetPortal = SheetPrimitive.Portal;
const SheetOverlay = React.forwardRef< const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>, React.ElementRef<typeof SheetPrimitive.Overlay>,
@ -25,8 +25,8 @@ const SheetOverlay = React.forwardRef<
{...props} {...props}
ref={ref} ref={ref}
/> />
)) ));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva( const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@ -45,7 +45,7 @@ const sheetVariants = cva(
side: "right", side: "right",
}, },
} }
) );
interface SheetContentProps interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@ -64,13 +64,13 @@ const SheetContent = React.forwardRef<
> >
{children} {children}
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" /> <X className="h-4 w-4 dark:text-stone-200" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</SheetPrimitive.Close> </SheetPrimitive.Close>
</SheetPrimitive.Content> </SheetPrimitive.Content>
</SheetPortal> </SheetPortal>
)) ));
SheetContent.displayName = SheetPrimitive.Content.displayName SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({ const SheetHeader = ({
className, className,
@ -83,8 +83,8 @@ const SheetHeader = ({
)} )}
{...props} {...props}
/> />
) );
SheetHeader.displayName = "SheetHeader" SheetHeader.displayName = "SheetHeader";
const SheetFooter = ({ const SheetFooter = ({
className, className,
@ -97,8 +97,8 @@ const SheetFooter = ({
)} )}
{...props} {...props}
/> />
) );
SheetFooter.displayName = "SheetFooter" SheetFooter.displayName = "SheetFooter";
const SheetTitle = React.forwardRef< const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>, React.ElementRef<typeof SheetPrimitive.Title>,
@ -109,8 +109,8 @@ const SheetTitle = React.forwardRef<
className={cn("text-lg font-semibold text-foreground", className)} className={cn("text-lg font-semibold text-foreground", className)}
{...props} {...props}
/> />
)) ));
SheetTitle.displayName = SheetPrimitive.Title.displayName SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription = React.forwardRef< const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>, React.ElementRef<typeof SheetPrimitive.Description>,
@ -121,8 +121,8 @@ const SheetDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />
)) ));
SheetDescription.displayName = SheetPrimitive.Description.displayName SheetDescription.displayName = SheetPrimitive.Description.displayName;
export { export {
Sheet, Sheet,
@ -135,4 +135,4 @@ export {
SheetFooter, SheetFooter,
SheetTitle, SheetTitle,
SheetDescription, SheetDescription,
} };

@ -104,7 +104,7 @@ export default function Dashboard() {
size="icon" size="icon"
className="shrink-0 md:hidden" className="shrink-0 md:hidden"
> >
<Menu className="h-5 w-5" /> <Menu className="h-5 w-5 dark:text-white" />
<span className="sr-only">Toggle navigation menu</span> <span className="sr-only">Toggle navigation menu</span>
</Button> </Button>
</SheetTrigger> </SheetTrigger>
@ -115,7 +115,7 @@ export default function Dashboard() {
className="flex items-center gap-2 text-lg font-semibold" className="flex items-center gap-2 text-lg font-semibold"
> >
<img src="/vite.svg" className="w-[36px] h-[36px]" /> <img src="/vite.svg" className="w-[36px] h-[36px]" />
<span className="">Certimate</span> <span className="dark:text-white">Certimate</span>
<span className="sr-only">Certimate</span> <span className="sr-only">Certimate</span>
</Link> </Link>
<Link <Link

@ -47,12 +47,15 @@ const Login = () => {
const navigage = useNavigate(); const navigage = useNavigate();
return ( return (
<div className="max-w-[35em] border mx-auto mt-32 p-10 rounded-md shadow-md"> <div className="max-w-[35em] border dark:border-stone-500 mx-auto mt-32 p-10 rounded-md shadow-md">
<div className="flex justify-center mb-10"> <div className="flex justify-center mb-10">
<img src="/vite.svg" className="w-16" /> <img src="/vite.svg" className="w-16" />
</div> </div>
<Form {...form}> <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 <FormField
control={form.control} control={form.control}
name="username" name="username"