rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make purchase flow modal mobile-friendly (#732)

Browse Source
This commit is contained in:
Aman Harwara
2021-11-11 19:27:46 +05:30
committed by GitHub
parent 1d5d205c98
commit 1e219699df
4 changed files with 89 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/purchaseFlow/panes/SignIn.tsx
View File

@@ -31,7 +31,7 @@ export const SignIn: FunctionComponent<Props> = observer(
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef.current) emailInputRef.current!.focus();
if (emailInputRef.current) emailInputRef.current?.focus();
}, []);
const handleEmailChange = (e: Event) => {
@@ -56,18 +56,18 @@ export const SignIn: FunctionComponent<Props> = observer(
const handleSignIn = async () => {
if (!email) {
emailInputRef?.current!.focus();
emailInputRef?.current?.focus();
return;
}
if (!isEmailValid(email)) {
setIsEmailInvalid(true);
emailInputRef?.current!.focus();
emailInputRef?.current?.focus();
return;
}
if (!password) {
passwordInputRef?.current!.focus();
passwordInputRef?.current?.focus();
return;
}
@@ -117,7 +117,7 @@ export const SignIn: FunctionComponent<Props> = observer(
<form onSubmit={handleSignIn}>
<div className="flex flex-col">
<FloatingLabelInput
className={`min-w-90 ${
className={`min-w-90 xs:min-w-auto ${
isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'
}`}
id="purchase-sign-in-email"
@@ -135,7 +135,9 @@ export const SignIn: FunctionComponent<Props> = observer(
</div>
) : null}
<FloatingLabelInput
className={`min-w-90 ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
className={`min-w-90 xs:min-w-auto ${
otherErrorMessage ? 'mb-2' : 'mb-4'
}`}
id="purchase-sign-in-password"
type="password"
label="Password"