mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Fix autocomplete and modal backdrop
This commit is contained in:
parent
f05149cf53
commit
bba3e08ce8
@ -76,7 +76,7 @@ const EnterPinModal: Component<{
|
||||
|
||||
createEffect(() => {
|
||||
if (props.open) {
|
||||
pinInput?.focus();
|
||||
setTimeout(() => pinInput?.focus(), 200);
|
||||
}
|
||||
});
|
||||
|
||||
@ -86,7 +86,7 @@ const EnterPinModal: Component<{
|
||||
|
||||
|
||||
return (
|
||||
<Modal open={props.open}>
|
||||
<Modal open={props.open} opaqueBackdrop={true}>
|
||||
<div id={props.id} class={styles.modal}>
|
||||
<button class={styles.xClose} onClick={props.onAbort}>
|
||||
<div class={styles.iconClose}></div>
|
||||
@ -110,7 +110,7 @@ const EnterPinModal: Component<{
|
||||
onClick={onConfirm}
|
||||
disabled={!isValidPin()}
|
||||
>
|
||||
{intl.formatMessage(tActions.createPin)}
|
||||
{intl.formatMessage(tActions.login)}
|
||||
</ButtonPrimary>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -5,4 +5,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.opaque {
|
||||
background-color: var(--background-site);
|
||||
}
|
||||
}
|
||||
|
@ -4,12 +4,17 @@ import { hookForDev } from '../../lib/devTools';
|
||||
|
||||
import styles from './Modal.module.scss';
|
||||
|
||||
const Modal: Component<{ children: JSXElement, open?: boolean, id?: string}> = (props) => {
|
||||
const Modal: Component<{
|
||||
children: JSXElement,
|
||||
open?: boolean,
|
||||
id?: string,
|
||||
opaqueBackdrop?: boolean,
|
||||
}> = (props) => {
|
||||
|
||||
return (
|
||||
<Show when={props.open}>
|
||||
<Portal mount={document.getElementById("modal") as Node}>
|
||||
<div id={props.id} class={styles.modal}>
|
||||
<div id={props.id} class={`${styles.modal} ${props.opaqueBackdrop ? styles.opaque : ''}`}>
|
||||
{props.children}
|
||||
</div>
|
||||
</Portal>
|
||||
|
@ -14,6 +14,7 @@ const TextInput: Component<{
|
||||
ref?: HTMLInputElement,
|
||||
validationState?: 'valid' | 'invalid',
|
||||
type?: string,
|
||||
autocomplete?: string,
|
||||
}> = (props) => {
|
||||
|
||||
return (
|
||||
@ -36,6 +37,7 @@ const TextInput: Component<{
|
||||
class={styles.input}
|
||||
readOnly={props.readonly}
|
||||
type={props.type}
|
||||
autocomplete={props.autocomplete || "off"}
|
||||
/>
|
||||
|
||||
<div class={styles.inputAfter}>
|
||||
|
Loading…
Reference in New Issue
Block a user