Slight restyle to better fit mobile screens
This commit is contained in:
parent
8edb1c77c2
commit
ebfce0db65
1 changed files with 15 additions and 6 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue