Slight restyle to better fit mobile screens

This commit is contained in:
Imbus 2023-12-18 15:42:49 +01:00
parent 8edb1c77c2
commit ebfce0db65

View file

@ -19,7 +19,7 @@ export function LoginModal(): JSXElement {
return (
<Show when={modal_ctx.isOpen()}>
<dialog class="modal modal-open">
<div class="modal-box">
<div class="modal-box p-4 md:p-6">
<form method="dialog">
<button
onClick={closeModal}
@ -37,9 +37,9 @@ export function LoginModal(): JSXElement {
aria-label="Login"
checked
/>
<div class="tab-content rounded-box border-base-300 bg-base-100 p-10">
<FormContainer>
<LoginForm />
</div>
</FormContainer>
<input
type="radio"
@ -47,10 +47,10 @@ export function LoginModal(): JSXElement {
class="tab"
aria-label="Register"
/>
<div class="tab-content rounded-box border-base-300 bg-base-100 p-10">
</div>
<FormContainer>
<RegisterForm />
</div>
</div>
</FormContainer>
</div>
<form method="dialog" class="modal-backdrop">
<button onClick={closeModal}>close</button>
@ -59,3 +59,12 @@ export function LoginModal(): JSXElement {
</Show>
);
}
// Local wrapper component for the login and register forms
function FormContainer({ children }: { children: JSXElement }): JSXElement {
return (
<div class="tab-content rounded-box border-base-300 bg-base-100 p-2 md:p-10">
<span class="label-text">{children}</span>
</div>
);
}