Skip to content

Commit 1bf0540

Browse files
wbazantwbazant
committed
Full size and bigger buttons on auth forms
1 parent 07f78dd commit 1bf0540

9 files changed

Lines changed: 57 additions & 81 deletions

File tree

‎src/components/account/AccountPage.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { editProfile, logout } from '../../redux/authSlice'
1010
import { pathWithCurrentView } from '../../utils/appUrl'
1111
import { useAppHistory } from '../../utils/useAppHistory'
1212
import { useIsDesktop } from '../../utils/useBreakpoint'
13-
import { FormButtonWrapper, FormInputWrapper } from '../auth/AuthWrappers'
1413
import { Input, Textarea } from '../form/FormikWrappers'
1514
import AboutSection from '../mobile/AboutSection'
1615
import Button from '../ui/Button'
1716
import Checkbox from '../ui/Checkbox'
17+
import FormButtons from '../ui/FormButtons'
1818
import LabeledRow from '../ui/LabeledRow'
1919
import Column from '../ui/LinkColumn'
2020
import LoadingIndicator from '../ui/LoadingIndicator'
@@ -161,12 +161,12 @@ const AccountPage = () => {
161161
>
162162
{({ dirty, isValid, isSubmitting }) => (
163163
<Form>
164-
<FormInputWrapper>
164+
<div>
165165
<Input type="text" name="name" label={t('glossary.name')} />
166166
<Textarea name="bio" label={t('users.bio')} />
167-
</FormInputWrapper>
167+
</div>
168168

169-
<FormButtonWrapper>
169+
<FormButtons>
170170
<Button secondary type="reset">
171171
{t('form.button.reset')}
172172
</Button>
@@ -178,7 +178,7 @@ const AccountPage = () => {
178178
? t('form.button.submitting')
179179
: t('users.save_changes')}
180180
</Button>
181-
</FormButtonWrapper>
181+
</FormButtons>
182182
</Form>
183183
)}
184184
</Formik>

‎src/components/account/ChangeEmailPage.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@ import * as Yup from 'yup'
88
import { editProfile } from '../../redux/authSlice'
99
import { pathWithCurrentView } from '../../utils/appUrl'
1010
import { useAppHistory } from '../../utils/useAppHistory'
11-
import {
12-
ErrorMessage,
13-
FormButtonWrapper,
14-
FormInputWrapper,
15-
} from '../auth/AuthWrappers'
11+
import { ErrorMessage } from '../auth/AuthWrappers'
1612
import { Input, PasswordInput } from '../form/FormikWrappers'
1713
import { BackButton } from '../ui/ActionButtons'
1814
import Button from '../ui/Button'
15+
import FormButtons from '../ui/FormButtons'
1916
import LoadingIndicator from '../ui/LoadingIndicator'
2017
import { TopSafeAreaInsetPage } from '../ui/PageTemplate'
2118

@@ -99,7 +96,7 @@ const ChangeEmailPage = () => {
9996
>
10097
{({ errors, isValid, isSubmitting }) => (
10198
<Form>
102-
<FormInputWrapper>
99+
<div>
103100
<Input
104101
name="email"
105102
type="email"
@@ -114,12 +111,12 @@ const ChangeEmailPage = () => {
114111
autoComplete="current-password"
115112
required
116113
/>
117-
</FormInputWrapper>
118-
<FormButtonWrapper>
114+
</div>
115+
<FormButtons>
119116
<Button type="submit" disabled={!isValid || isSubmitting}>
120117
{t('form.button.submit')}
121118
</Button>
122-
</FormButtonWrapper>
119+
</FormButtons>
123120
</Form>
124121
)}
125122
</Formik>

‎src/components/account/ChangePasswordPage.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@ import * as Yup from 'yup'
88
import { editProfile } from '../../redux/authSlice'
99
import { pathWithCurrentView } from '../../utils/appUrl'
1010
import { useAppHistory } from '../../utils/useAppHistory'
11-
import {
12-
ErrorMessage,
13-
FormButtonWrapper,
14-
FormInputWrapper,
15-
} from '../auth/AuthWrappers'
11+
import { ErrorMessage } from '../auth/AuthWrappers'
1612
import { PasswordInput } from '../form/FormikWrappers'
1713
import { BackButton } from '../ui/ActionButtons'
1814
import Button from '../ui/Button'
15+
import FormButtons from '../ui/FormButtons'
1916
import LoadingIndicator from '../ui/LoadingIndicator'
2017
import { TopSafeAreaInsetPage } from '../ui/PageTemplate'
2118

@@ -78,7 +75,7 @@ const ChangePasswordPage = () => {
7875
>
7976
{({ errors, dirty, isValid, isSubmitting }) => (
8077
<Form>
81-
<FormInputWrapper>
78+
<div>
8279
<PasswordInput
8380
invalidWhenUntouched
8481
name="password"
@@ -116,15 +113,15 @@ const ChangePasswordPage = () => {
116113
)}
117114
</ErrorMessage>
118115
)}
119-
</FormInputWrapper>
120-
<FormButtonWrapper>
116+
</div>
117+
<FormButtons>
121118
<Button
122119
type="submit"
123120
disabled={!dirty || !isValid || isSubmitting}
124121
>
125122
{t('form.button.submit')}
126123
</Button>
127-
</FormButtonWrapper>
124+
</FormButtons>
128125
</Form>
129126
)}
130127
</Formik>

‎src/components/auth/AuthWrappers.js‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,5 @@
11
import styled from 'styled-components'
22

3-
const FormWrapper = styled.div`
4-
&:not(:last-child) {
5-
margin-block-end: 1em;
6-
}
7-
`
8-
9-
export const FormInputWrapper = styled(FormWrapper)`
10-
max-width: 400px;
11-
`
12-
13-
export const FormCheckboxWrapper = styled(FormWrapper)`
14-
& > *:not(:last-child) {
15-
margin-block-end: 0.5em;
16-
}
17-
`
18-
19-
export const FormButtonWrapper = styled(FormWrapper)`
20-
margin: 1em 0;
21-
& > *:not(:last-child) {
22-
margin-inline-end: 0.5em;
23-
}
24-
`
25-
263
export const ErrorMessage = styled.p`
274
color: ${({ theme }) => theme.invalid} !important;
285
margin-block-start: 0.25em;

‎src/components/auth/EmailForm.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as Yup from 'yup'
44

55
import { Input, Recaptcha } from '../form/FormikWrappers'
66
import Button from '../ui/Button'
7-
import { FormButtonWrapper, FormInputWrapper } from './AuthWrappers'
7+
import FormButtons from '../ui/FormButtons'
88

99
export const EmailForm = ({ onSubmit, recaptchaRef }) => {
1010
const { t } = useTranslation()
@@ -21,15 +21,15 @@ export const EmailForm = ({ onSubmit, recaptchaRef }) => {
2121
>
2222
{({ dirty, isValid, isSubmitting }) => (
2323
<Form>
24-
<FormInputWrapper>
24+
<div>
2525
<Input
2626
type="text"
2727
name="email"
2828
label={t('glossary.email')}
2929
autoComplete="off"
3030
required
3131
/>
32-
</FormInputWrapper>
32+
</div>
3333

3434
<Recaptcha
3535
name="g-recaptcha-response"
@@ -39,11 +39,11 @@ export const EmailForm = ({ onSubmit, recaptchaRef }) => {
3939
}}
4040
/>
4141

42-
<FormButtonWrapper>
42+
<FormButtons>
4343
<Button disabled={!dirty || !isValid || isSubmitting} type="submit">
4444
{t('users.send')}
4545
</Button>
46-
</FormButtonWrapper>
46+
</FormButtons>
4747
</Form>
4848
)}
4949
</Formik>

‎src/components/auth/PasswordSetPage.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,10 @@ import { resetPassword } from '../../utils/api'
88
import { useAppHistory } from '../../utils/useAppHistory'
99
import { PasswordInput } from '../form/FormikWrappers'
1010
import Button from '../ui/Button'
11+
import FormButtons from '../ui/FormButtons'
1112
import { AuthPage } from '../ui/PageTemplate'
1213
import AuthLinks from './AuthLinks'
13-
import {
14-
ErrorMessage,
15-
FormButtonWrapper,
16-
FormInputWrapper,
17-
} from './AuthWrappers'
14+
import { ErrorMessage } from './AuthWrappers'
1815
import { withAuthRedirect } from './withAuthRedirect'
1916

2017
const getResetToken = () =>
@@ -69,7 +66,7 @@ const PasswordSetPage = () => {
6966
>
7067
{({ errors, dirty, isValid, isSubmitting, values }) => (
7168
<Form>
72-
<FormInputWrapper>
69+
<div>
7370
<PasswordInput name="password" label={t('users.new_password')} />
7471
{errors.password && (
7572
<ErrorMessage>
@@ -90,16 +87,16 @@ const PasswordSetPage = () => {
9087
)}
9188
</ErrorMessage>
9289
)}
93-
</FormInputWrapper>
90+
</div>
9491

95-
<FormButtonWrapper>
92+
<FormButtons>
9693
<Button
9794
disabled={!dirty || !isValid || isSubmitting}
9895
type="submit"
9996
>
10097
{t('users.change_password')}
10198
</Button>
102-
</FormButtonWrapper>
99+
</FormButtons>
103100
</Form>
104101
)}
105102
</Formik>

‎src/components/auth/SignInPage.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@ import { Form, Formik } from 'formik'
22
import { useTranslation } from 'react-i18next'
33
import { useDispatch, useSelector } from 'react-redux'
44
import { useLocation } from 'react-router-dom'
5+
import styled from 'styled-components'
56
import * as Yup from 'yup'
67

78
import { login } from '../../redux/authSlice'
89
import { useIsDesktop } from '../../utils/useBreakpoint'
910
import { Checkbox, Input, PasswordInput } from '../form/FormikWrappers'
1011
import AboutSection from '../mobile/AboutSection'
1112
import Button from '../ui/Button'
13+
import FormButtons from '../ui/FormButtons'
1214
import LabeledRow from '../ui/LabeledRow'
1315
import { AuthPage } from '../ui/PageTemplate'
1416
import AuthLinks from './AuthLinks'
15-
import {
16-
FormButtonWrapper,
17-
FormCheckboxWrapper,
18-
FormInputWrapper,
19-
} from './AuthWrappers'
2017
import { withAuthRedirect } from './withAuthRedirect'
2118

19+
const RememberMeRow = styled.div`
20+
margin-block-start: 1em;
21+
`
22+
2223
const SignInPage = () => {
2324
const isDesktop = useIsDesktop()
2425
const { isLoading } = useSelector((state) => state.auth)
@@ -48,30 +49,30 @@ const SignInPage = () => {
4849
>
4950
{({ dirty, isValid }) => (
5051
<Form>
51-
<FormInputWrapper>
52+
<div>
5253
<Input
5354
name="email"
5455
type="text"
5556
label={t('glossary.email')}
5657
autoComplete="off"
5758
/>
5859
<PasswordInput name="password" label={t('glossary.password')} />
59-
</FormInputWrapper>
60+
</div>
6061

61-
<FormCheckboxWrapper>
62+
<RememberMeRow>
6263
<LabeledRow
6364
label={
6465
<label htmlFor="remember_me">{t('users.remember_me')}</label>
6566
}
6667
left={<Checkbox id="remember_me" />}
6768
/>
68-
</FormCheckboxWrapper>
69+
</RememberMeRow>
6970

70-
<FormButtonWrapper>
71+
<FormButtons>
7172
<Button disabled={!dirty || !isValid || isLoading} type="submit">
7273
{t('users.sign_in')}
7374
</Button>
74-
</FormButtonWrapper>
75+
</FormButtons>
7576
</Form>
7677
)}
7778
</Formik>

‎src/components/auth/SignUpPage.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,11 @@ import {
1414
Textarea,
1515
} from '../form/FormikWrappers'
1616
import Button from '../ui/Button'
17+
import FormButtons from '../ui/FormButtons'
1718
import LabeledRow from '../ui/LabeledRow'
1819
import { AuthPage } from '../ui/PageTemplate'
1920
import AuthLinks from './AuthLinks'
20-
import {
21-
ErrorMessage,
22-
FormButtonWrapper,
23-
FormInputWrapper,
24-
} from './AuthWrappers'
21+
import { ErrorMessage } from './AuthWrappers'
2522
import { withAuthRedirect } from './withAuthRedirect'
2623

2724
const formToUser = (form) => ({ ...form, password_confirm: undefined })
@@ -73,7 +70,7 @@ const SignUpPage = () => {
7370
>
7471
{({ errors, dirty, isValid, isSubmitting, values }) => (
7572
<Form>
76-
<FormInputWrapper>
73+
<div>
7774
<Input
7875
type="email"
7976
name="email"
@@ -116,7 +113,7 @@ const SignUpPage = () => {
116113
/>
117114

118115
<Textarea name="bio" label={t('users.bio')} />
119-
</FormInputWrapper>
116+
</div>
120117
<LabeledRow
121118
label={
122119
<label htmlFor="announcements_email">
@@ -135,7 +132,7 @@ const SignUpPage = () => {
135132
}}
136133
/>
137134

138-
<FormButtonWrapper>
135+
<FormButtons>
139136
<Button secondary type="reset">
140137
{t('form.button.reset')}
141138
</Button>
@@ -145,7 +142,7 @@ const SignUpPage = () => {
145142
>
146143
{t('glossary.sign_up')}
147144
</Button>
148-
</FormButtonWrapper>
145+
</FormButtons>
149146
</Form>
150147
)}
151148
</Formik>

‎src/components/ui/PageTemplate.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,14 @@ const InfoPage = ({ children }) => {
195195
)
196196
}
197197

198+
const LimitedWidthContainer = styled.div`
199+
${({ isDesktop }) =>
200+
isDesktop &&
201+
`
202+
max-width: 400px;
203+
`}
204+
`
205+
198206
const AuthPage = ({ children }) => {
199207
const isDesktop = useIsDesktop()
200208

@@ -212,7 +220,9 @@ const AuthPage = ({ children }) => {
212220
<LanguageSelect />
213221
</LanguageContainer>
214222
)}
215-
{children}
223+
<LimitedWidthContainer isDesktop={isDesktop}>
224+
{children}
225+
</LimitedWidthContainer>
216226
</TopSafeAreaInsetPageWrapper>
217227
</TopSafeAreaInsetPageScrollWrapper>
218228
)

0 commit comments

Comments
 (0)