mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
docs: refine UI components and styling
This commit is contained in:
@@ -28,7 +28,7 @@ export default async function HomePage() {
|
||||
return (
|
||||
<main className="h-min mx-auto overflow-x-hidden">
|
||||
<Section
|
||||
className="-z-1 mb-1 overflow-y-clip"
|
||||
className="mb-1 overflow-y-clip"
|
||||
crosses
|
||||
crossesOffset="lg:translate-y-[5.25rem]"
|
||||
customPaddings
|
||||
|
||||
@@ -269,7 +269,7 @@ export function Builder() {
|
||||
|
||||
<div className="flex gap-4 md:gap-12 flex-col md:flex-row items-center md:items-start">
|
||||
<ScrollArea className="w-4/12">
|
||||
<div className="overflow-scroll h-[580px] relate">
|
||||
<div className="overflow-scroll h-[580px] relative">
|
||||
{options.signUp ? (
|
||||
<AuthTabs
|
||||
tabs={[
|
||||
|
||||
@@ -22,7 +22,7 @@ import { cn } from "@/lib/utils";
|
||||
export default function SignIn() {
|
||||
const [options] = useAtom(optionsAtom);
|
||||
return (
|
||||
<Card className="z-50 rounded-none max-w-md">
|
||||
<Card className="z-50 rounded-none max-w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
|
||||
<CardDescription className="text-xs md:text-sm">
|
||||
|
||||
@@ -74,7 +74,7 @@ export const AuthTabs = ({
|
||||
zIndex: -idx,
|
||||
opacity: idx < 3 ? 1 - idx * 0.1 : 0,
|
||||
}}
|
||||
className={cn("w-50 h-full", isActive(tab) ? "" : "hidden")}
|
||||
className={cn("h-full", isActive(tab) ? "" : "hidden")}
|
||||
>
|
||||
{tab.content}
|
||||
</div>
|
||||
|
||||
@@ -49,7 +49,7 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="max-h-[40rem] relative z-[999] w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden px-8 md:min-h-[40rem]">
|
||||
<section className="max-h-[40rem] relative w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] overflow-hidden px-8 md:min-h-[40rem]">
|
||||
<Spotlight />
|
||||
<div className="overflow-hidden bg-transparent md:px-10 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
|
||||
<div className="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-12">
|
||||
|
||||
@@ -57,7 +57,7 @@ function DialogContent({
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
"fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg w-11/12",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user