LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-07 12:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add responsivness

Browse Source
This commit is contained in:
Bereket Engida
2024-09-17 18:49:41 +03:00
parent 5617925397
commit 43419f38f8
8 changed files with 34 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/nextjs/app/(auth)/sign-in/page.tsx
View File

@@ -7,10 +7,8 @@ import { Tabs } from "@/components/ui/tabs2";
export default function Page() {
return (
<div className="w-full">
<div className="flex items-center flex-col justify-center w-full py-10">
<div className="w-[400px]">
<div className="flex items-center flex-col justify-center w-full md:py-10">
<div className="md:w-[400px]">
<Tabs tabs={[{
title: "Sign In",
value: "sign-in",

15
demo/nextjs/app/dashboard/organization-card.tsx
View File

@@ -41,7 +41,7 @@ export function OrganizationCard(props: {
const currentMember = optimisticOrg?.members.find((member) => member.userId === session?.user.id)
return (
<Card>
<Card className="rounded-none md:rounded-sm !bg-none border-none">
<CardHeader>
<CardTitle>
Organization
@@ -111,9 +111,9 @@ export function OrganizationCard(props: {
</div>
</div>
</CardHeader>
<CardContent>
<CardContent >
<div className="flex gap-8">
<div className="flex gap-8 flex-col md:flex-row">
<div className="flex flex-col gap-2 flex-grow">
<p className="font-medium border-b-2 border-b-foreground/10">
Members
@@ -276,9 +276,6 @@ export function OrganizationCard(props: {
</div>
</div>
</CardContent>
{/* <CardFooter className="flex justify-between">
</CardFooter> */}
</Card>
)
}
@@ -328,7 +325,7 @@ function CreateOrganizationDialog() {
</p>
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
New Organization
@@ -374,7 +371,7 @@ function CreateOrganizationDialog() {
</div>
</div>
<DialogFooter>
<Button onClick={async () => {
<Button disabled={loading} onClick={async () => {
setLoading(true);
await organization.create({
name: name,
@@ -418,7 +415,7 @@ function InviteMemberDialog({ setOptimisticOrg, optimisticOrg }: { setOptimistic
</p>
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
Invite Member

28
demo/nextjs/app/dashboard/user-card.tsx
View File

@@ -63,11 +63,11 @@ export default function UserCard(props: {
const [isSignOut, setIsSignOut] = useState<boolean>(false);
return (
<Card>
<Card className="rounded-none md:rounded-sm">
<CardHeader>
<CardTitle>User</CardTitle>
</CardHeader>
<CardContent className="grid gap-8">
<CardContent className="grid gap-8 grid-cols-1">
<div className="flex items-start justify-between">
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex ">
@@ -121,12 +121,12 @@ export default function UserCard(props: {
})
}
</div>
<div className="border-y py-4 flex items-center justify-between gap-2">
<div className="border-y py-4 flex items-center flex-wrap justify-between gap-2">
<div className="flex flex-col gap-2">
<p className="text-sm">
Passkeys
</p>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<AddPasskey />
<ListPasskeys />
</div>
@@ -142,12 +142,12 @@ export default function UserCard(props: {
<DialogTrigger asChild>
<Button variant="outline" className="gap-2">
<QrCode size={16} />
<span className="text-sm">
<span className="md:text-sm text-xs">
Scan QR Code
</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
Scan QR Code
@@ -180,14 +180,14 @@ export default function UserCard(props: {
{
session?.user.twoFactorEnabled ? <ShieldOff size={16} /> : <ShieldCheck size={16} />
}
<span className="text-sm">
<span className="md:text-sm text-xs">
{
session?.user.twoFactorEnabled ? "Disable 2FA" : "Enable 2FA"
}
</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
{
@@ -323,7 +323,7 @@ function ChangePassword() {
</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
Change Password
@@ -420,7 +420,7 @@ function EditUserDialog(props: { session: Session | null }) {
Edit User
</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>
Edit User
@@ -526,12 +526,12 @@ function AddPasskey() {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="outline" className="gap-2">
<Button variant="outline" className="gap-2 text-xs md:text-sm">
<Plus size={15} />
Add New Passkey
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>Add New Passkey</DialogTitle>
<DialogDescription>
@@ -584,14 +584,14 @@ function ListPasskeys() {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="outline">
<Button variant="outline" className="gap-2 text-xs md:text-sm">
<Fingerprint className="mr-2 h-4 w-4" />
Passkeys {
data?.length ? `[${data?.length}]` : ""
}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogContent className="sm:max-w-[425px] w-11/12">
<DialogHeader>
<DialogTitle>Passkeys</DialogTitle>
<DialogDescription>

8
demo/nextjs/app/page.tsx
View File

@@ -7,22 +7,22 @@ export default async function Home() {
"Email & Password", "Organization | Teams", "Passkeys", "TwoFactor", "Multi Factor", "Password Reset", "Session Management"
]
return (
<div className="min-h-[80vh] flex items-center justify-center">
<div className="min-h-[80vh] flex items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
<main className="flex flex-col gap-4 row-start-2 items-center justify-center">
<div className="flex flex-col gap-1">
<h3 className="font-bold text-4xl text-black dark:text-white text-center">
Better Auth.
</h3>
<p className="text-center break-words">
<p className="text-center break-words text-sm md:text-base">
Official demo to showcase <a href="https://better-auth.com" target="_blank" className="italic underline">better-auth.</a> features and capabilities. <br />
</p>
</div>
<div className="md:w-10/12 w-full flex flex-col gap-4">
<div className="flex flex-col gap-3 pt-2 flex-wrap">
<div className="border-y py-2 border-dotted bg-secondary/60 opacity-80">
<div className="text-xs flex items-center gap-2 justify-center text-muted-foreground italic">
<div className="text-xs flex items-center gap-2 justify-center text-muted-foreground ">
<span className="text-center">
* All features on this demo are Implemented with better auth without any custom backend code
All features on this demo are Implemented with better auth without any custom backend code
</span>
</div>
</div>

4
demo/nextjs/components/sign-in.tsx
View File

@@ -30,8 +30,8 @@ export default function SignIn() {
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader>
<CardTitle className="text-xl">Sign In</CardTitle>
<CardDescription>
<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
<CardDescription className="text-xs md:text-sm">
Enter your email below to login to your account
</CardDescription>
</CardHeader>

4
demo/nextjs/components/sign-up.tsx
View File

@@ -45,8 +45,8 @@ export function SignUp() {
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader>
<CardTitle className="text-xl">Sign Up</CardTitle>
<CardDescription>
<CardTitle className="text-lg md:text-xl">Sign Up</CardTitle>
<CardDescription className="text-xs md:text-sm">
Enter your information to create an account
</CardDescription>
</CardHeader>

6
demo/nextjs/components/wrapper.tsx
View File

@@ -11,8 +11,8 @@ import {
export function Wrapper(props: { children: React.ReactNode }) {
return (
<div className="min-h-screen w-full dark:bg-black bg-white dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-10/12 lg:w-8/12 px-4 md:px-1">
<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
<Link href="/">
<div className="flex gap-2 cursor-pointer">
<Logo />
@@ -23,7 +23,7 @@ export function Wrapper(props: { children: React.ReactNode }) {
<ThemeToggle />
</div>
</div>
<div className="mt-20 lg:w-7/12 w-9/12">
<div className="mt-20 lg:w-7/12 w-full">
{props.children}
</div>
</div>

2
docs/components/ui/dialog.tsx
View File

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg w-11/12",
className,
)}
{...props}