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;
children: ReactNode;
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);
useEffect(() => {
@ -26,14 +32,17 @@ export default function Modal({ toggleModal, className, children }: Props) {
return (
<Drawer.Root
open={drawerIsOpen}
onClose={() => setTimeout(() => toggleModal(), 100)}
onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
dismissible={dismissible}
>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
<Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
<ClickAwayHandler
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
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"
>
<div
@ -55,7 +64,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
data-testid="modal-outer"
>
<ClickAwayHandler
onClickOutside={toggleModal}
onClickOutside={() => dismissible && toggleModal()}
className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
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"
data-testid="modal-container"
>
<div
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"
data-testid="close-modal-button"
></i>
</div>
{dismissible && (
<div
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"
data-testid="close-modal-button"
></i>
</div>
)}
{children}
</div>
</ClickAwayHandler>

9
pages/login.tsx
View File

@ -69,7 +69,7 @@ export default function Login({
function displayLoginCredential() {
if (availableLogins.credentialsEnabled === "true") {
return (
<div data-testid="login-form">
<>
<p className="text-3xl text-black dark:text-white text-center font-extralight">
Enter your credentials
</p>
@ -127,7 +127,7 @@ export default function Login({
{availableLogins.buttonAuths.length > 0 ? (
<div className="divider my-1">OR</div>
) : undefined}
</div>
</>
);
}
}
@ -171,7 +171,10 @@ export default function Login({
return (
<CenteredForm text="Sign in to your account">
<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()}
{displayLoginExternalButton()}
{displayRegistration()}