maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Apply inline buttons partly to bottom texts

Browse source
This commit is contained in:
Hannu Lyytikainen 2017-09-13 15:41:32 +03:00
parent 13f4d81648
commit 968673c830
5 changed files with 43 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css
View file

@ -19,14 +19,11 @@
}
.bottomWrapper {
margin-top: auto;
}
.goToLoginLink {
@apply --marketplaceH5FontStyles;
color: var(--matterColor);
}
.goToLoginLinkHelp {
margin-top: auto;
color: var(--matterColorAnti);
}
.loginLink {
color: var(--matterColor);
}

14
src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js
View file

@ -8,7 +8,7 @@ import * as validators from '../../util/validators';
import css from './PasswordRecoveryForm.css';
const isNotFoundError = (error) => error && error.status === 404;
const isNotFoundError = error => error && error.status === 404;
const PasswordRecoveryFormComponent = props => {
const {
@ -43,10 +43,10 @@ const PasswordRecoveryFormComponent = props => {
const buttonDisabled = (pristine && !initialEmail) || submitting;
const classes = classNames(rootClassName || css.root, className);
const goToLoginHelp = (
<span className={css.goToLoginLinkHelp}>
<FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
</span>
const loginLink = (
<NamedLink name="LoginPage" className={css.loginLink}>
<FormattedMessage id="PasswordRecoveryForm.loginLinkText" />
</NamedLink>
);
return (
@ -62,9 +62,7 @@ const PasswordRecoveryFormComponent = props => {
customErrorText={customErrorText}
/>
<p className={css.bottomWrapper}>
<NamedLink name="LoginPage" className={css.goToLoginLink}>
<FormattedMessage id="PasswordRecoveryForm.goToLogin" values={{ goToLoginHelp }} />
</NamedLink>
<FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
</p>
<PrimaryButton type="submit" disabled={buttonDisabled}>
<FormattedMessage id="PasswordRecoveryForm.sendInstructions" />

33
src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
View file

@ -44,32 +44,25 @@
}
.bottomWrapper {
margin-top: auto;
@media (--viewportMedium) {
margin-top: 67px;
}
margin-top: 67px;
}
.bottomWrapper p {
line-height: 24px;
margin-top: 0px;
margin-bottom: 0px;
}
.emailSubmittedLink {
.bottomText {
@apply --marketplaceH5FontStyles;
color: var(--matterColor);
line-height: 24px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
color: var(--matterColorAnti);
@media (--viewportMedium) {
line-height: 24px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
}
}
.emailSubmittedLinkHelp {
color: var(--matterColorAnti);
.bottomLink {
@apply --marketplaceH5FontStyles;
margin: 0;
color: var(--matterColor);
@media (--viewportMedium) {
margin: 0;
}
}

32
src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
View file

@ -53,31 +53,25 @@ export const PasswordRecoveryPageComponent = props => {
const message = recoveryMessage(submittedEmail);
const sendAnotherHelp = (
<span className={css.emailSubmittedLinkHelp}>
<FormattedMessage id="PasswordRecoveryPage.sendAnotherHelp" />
</span>
const resendEmailLink = (
<InlineTextButton className={css.bottomLink} onClick={() => onSubmitEmail(submittedEmail)}>
<FormattedMessage id="PasswordRecoveryPage.resendEmailLinkText" />
</InlineTextButton>
);
const fixEmailHelp = (
<span className={css.emailSubmittedLinkHelp}>
<FormattedMessage id="PasswordRecoveryPage.fixEmailHelp" />
</span>
const fixEmailLink = (
<InlineTextButton className={css.bottomLink} onClick={onRetypeEmail}>
<FormattedMessage id="PasswordRecoveryPage.fixEmailLinkText" />
</InlineTextButton>
);
const emailSubmittedLinks = (
<div className={css.bottomWrapper}>
<p>
<InlineTextButton
className={css.emailSubmittedLink}
onClick={() => onSubmitEmail(submittedEmail)}
>
<FormattedMessage id="PasswordRecoveryPage.sendAnother" values={{ sendAnotherHelp }} />
</InlineTextButton>
<p className={css.bottomText}>
<FormattedMessage id="PasswordRecoveryPage.resendEmailInfo" values={{ resendEmailLink }} />
</p>
<p>
<InlineTextButton className={css.emailSubmittedLink} onClick={onRetypeEmail}>
<FormattedMessage id="PasswordRecoveryPage.fixEmail" values={{ fixEmailHelp }} />
</InlineTextButton>
<p className={css.bottomText}>
<FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
</p>
</div>
);

12
src/translations/en.json
View file

@ -229,17 +229,17 @@
"PasswordRecoveryForm.emailNotFound": "Hmm. We didn't find an account with that email. Please double-check your email and try again.",
"PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
"PasswordRecoveryForm.emailRequired": "This field is required",
"PasswordRecoveryForm.goToLogin": "{goToLoginHelp} Go to log in.",
"PasswordRecoveryForm.goToLoginHelp": "Suddenly remembered your password?",
"PasswordRecoveryForm.loginLinkText": "Go log in.",
"PasswordRecoveryForm.loginLinkInfo": "Suddenly remembered your password? {loginLink}",
"PasswordRecoveryForm.sendInstructions": "Send instructions",
"PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",
"PasswordRecoveryPage.emailSubmittedMessage": "We have sent the instructions for resetting your password to {email}.",
"PasswordRecoveryPage.fixEmail": "{fixEmailHelp} Fix it.",
"PasswordRecoveryPage.fixEmailHelp": "Whoops, typo in your email?",
"PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
"PasswordRecoveryPage.fixEmailInfo": "Whoops, typo in your email? {fixEmailLink}",
"PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
"PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
"PasswordRecoveryPage.sendAnother": "{sendAnotherHelp} Send another email.",
"PasswordRecoveryPage.sendAnotherHelp": "Didn't get the email?",
"PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
"PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
"PayoutDetailsForm.addressTitle": "Address",
"PayoutDetailsForm.bankDetails": "Bank details",
"PayoutDetailsForm.birthdayDatePlaceholder": "dd",