xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

small improvement

This commit is contained in:
daniel31x13 2024-05-01 17:15:00 -04:00
parent b4ea7dcd8e
commit 58d71a863b
2 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/Modal.tsx
View File

@ -6,9 +6,15 @@ type Props = {
toggleModal: Function; toggleModal: Function;
children: ReactNode; children: ReactNode;
className?: string; className?: string;
dismissible?: boolean;
}; };
export default function Modal({ toggleModal, className, children }: Props) { export default function Modal({
toggleModal,
className,
children,
dismissible = true,
}: Props) {
const [drawerIsOpen, setDrawerIsOpen] = React.useState(true); const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
useEffect(() => { useEffect(() => {
@ -26,14 +32,17 @@ export default function Modal({ toggleModal, className, children }: Props) {
return ( return (
<Drawer.Root <Drawer.Root
open={drawerIsOpen} open={drawerIsOpen}
onClose={() => setTimeout(() => toggleModal(), 100)} onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
dismissible={dismissible}
> >
<Drawer.Portal> <Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" /> <Drawer.Overlay className="fixed inset-0 bg-black/40" />
<ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}> <ClickAwayHandler
<Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30"> onClickOutside={() => dismissible && setDrawerIsOpen(false)}
>
<Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
<div <div
className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto" className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
data-testid="mobile-modal-container" data-testid="mobile-modal-container"
> >
<div <div
@ -55,7 +64,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
data-testid="modal-outer" data-testid="modal-outer"
> >
<ClickAwayHandler <ClickAwayHandler
onClickOutside={toggleModal} onClickOutside={() => dismissible && toggleModal()}
className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${ className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
className || "" className || ""
}`} }`}
@ -64,15 +73,17 @@ export default function Modal({ toggleModal, className, children }: Props) {
className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible" className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible"
data-testid="modal-container" data-testid="modal-container"
> >
<div {dismissible && (
onClick={toggleModal as MouseEventHandler<HTMLDivElement>} <div
className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10" onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
> className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
<i >
className="bi-x text-neutral text-2xl" <i
data-testid="close-modal-button" className="bi-x text-neutral text-2xl"
></i> data-testid="close-modal-button"
</div> ></i>
</div>
)}
{children} {children}
</div> </div>
</ClickAwayHandler> </ClickAwayHandler>

9
pages/login.tsx
View File

@ -69,7 +69,7 @@ export default function Login({
function displayLoginCredential() { function displayLoginCredential() {
if (availableLogins.credentialsEnabled === "true") { if (availableLogins.credentialsEnabled === "true") {
return ( return (
<div data-testid="login-form"> <>
<p className="text-3xl text-black dark:text-white text-center font-extralight"> <p className="text-3xl text-black dark:text-white text-center font-extralight">
Enter your credentials Enter your credentials
</p> </p>
@ -127,7 +127,7 @@ export default function Login({
{availableLogins.buttonAuths.length > 0 ? ( {availableLogins.buttonAuths.length > 0 ? (
<div className="divider my-1">OR</div> <div className="divider my-1">OR</div>
) : undefined} ) : undefined}
</div> </>
); );
} }
} }
@ -171,7 +171,10 @@ export default function Login({
return ( return (
<CenteredForm text="Sign in to your account"> <CenteredForm text="Sign in to your account">
<form onSubmit={loginUser}> <form onSubmit={loginUser}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"> <div
className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"
data-testid="login-form"
>
{displayLoginCredential()} {displayLoginCredential()}
{displayLoginExternalButton()} {displayLoginExternalButton()}
{displayRegistration()} {displayRegistration()}