diff --git a/src/components/AddImages/AddImages.css b/src/components/AddImages/AddImages.css index 2f133e88..019fd4dc 100644 --- a/src/components/AddImages/AddImages.css +++ b/src/components/AddImages/AddImages.css @@ -47,13 +47,13 @@ left: 12px; width: 10px; height: 10px; - fill: var(--matterColorLight); - stroke: var(--matterColorLight); + fill: var(--matterColorAnti); + stroke: var(--matterColorAnti); } &:hover svg { - fill: var(--matterColorAnti); - stroke: var(--matterColorAnti); + fill: var(--matterColorLight); + stroke: var(--matterColorLight); } } diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css index 5c3928d7..85e3862f 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css +++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css @@ -13,37 +13,37 @@ flex-grow: 1; } -.payoutModalOpen { - padding: 0; + +/* ================ Modal ================ */ + +.error { + @apply --marketplaceModalErrorStyles; } -.payoutDetails { - margin: 24px; - - @media (--viewportLarge) { - margin: 0 60px 60px; - } -} - -.modalHeading { - margin-top: 89px; +.modalHeaderWrapper { + margin-top: 58px; margin-bottom: 36px; - padding: 0 24px; + padding: 0; - @media (--viewportLarge) { - margin-top: 67px; - padding: 0 60px; - } -} - -.payoutModalTitle { - @apply --marketplaceModalTitle; - - @media (--viewportLarge) { + @media (--viewportMedium) { margin-top: 0; + padding: 0; } } +/* ================ Typography ================ */ + +/* Title of the modal */ +.modalTitle { + @apply --marketplaceModalTitleStyles; +} + +/* Paragraph for the Modal */ +.modalMessage { + @apply --marketplaceModalParagraphStyles; +} + +/* This is the title for the Edit Photos component */ .title { margin-bottom: 19px; diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js index c263a021..b4537eca 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js +++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js @@ -118,6 +118,7 @@ class EditListingPhotosPanel extends Component { updateError={errors.updateListingError} updateInProgress={updateInProgress} /> + -
-

+
+


-

+

@@ -141,6 +142,7 @@ class EditListingPhotosPanel extends Component { onSubmit={this.handlePayoutSubmit} /> +

); } diff --git a/src/components/ListingCard/ListingCard.css b/src/components/ListingCard/ListingCard.css index 3ff281a6..5a1a2891 100644 --- a/src/components/ListingCard/ListingCard.css +++ b/src/components/ListingCard/ListingCard.css @@ -38,7 +38,7 @@ left: 0; right: 0; width: 100%; - border-radius: 2px; + border-radius: var(--borderRadius); } .info { diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index 508271ef..13a172f9 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -12,29 +12,29 @@ width: 100%; z-index: 100; + +/* scrollLayer is the .root for the Modal */ & .scrollLayer { + @apply --marketplaceModalRootStyles; + + /* Additional styles for the modal window, dimming the background and positioning the modal */ min-height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; - background-color: var(--matterColorBright); @media (--viewportMedium) { - padding: 126px 0; + padding: 0; background-color: rgba(0, 0, 0, 0.4); + background-image: none; } } & .container { - position: relative; - height: 100vh; + @apply --marketplaceModalBaseStyles; + height: 100%; @media (--viewportMedium) { - -webkit-overflow-scrolling: auto; - width: 576px; - height: auto; - margin: 0 auto; - background-color: var(--matterColorBright); - border-radius: 2px; + flex-basis: 576px; } } } @@ -47,42 +47,15 @@ } .close { - /* Position inside modal */ - position: absolute; - top: 0; - right: 0; + @apply --marketplaceModalCloseStyles; +} - /* Some content (like map) is positioning itself on top of close button without z-index handling */ - z-index: calc(var(--zIndexModal) + 1); +.closeText { + @apply --marketplaceModalCloseText; +} - /* Safari didn't know how to baseline-align svg icon and text */ - display: flex; - align-items: flex-start; - width: auto; - - /* Sizing (touch area) */ - padding: 23px 24px; - margin: 0; - border: 0; - - /* Colors */ - background-color: transparent; - color: var(--matterColor); - - cursor: pointer; - - &:enabled:hover { - background-color: transparent; - color: var(--matterColorDark); - box-shadow: none; - } - &:enabled:active { - background-color: transparent; - color: var(--matterColorDark); - } - &:disabled { - background-color: transparent; - } +.closeIcon { + @apply --marketplaceModalCloseIcon; } .closeLight { @@ -94,29 +67,3 @@ color: var(--matterColorLight); } } - -.closeText { - /* Font */ - @apply --marketplaceH6FontStyles; - margin: -2.5px 0 0 0; - - @media (--viewportMedium) { - margin-top: -1px; - } -} - -.closeIcon { - display: inline-block; - margin-left: 8px; - padding: 2px 0 4px; - box-sizing: content-box; -} - -.content { - flex-grow: 1; - display: flex; - flex: 1; - flex-direction: column; - overflow: auto; - height: 100%; -} diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css index 99de95f8..72decd2a 100644 --- a/src/components/Topbar/Topbar.css +++ b/src/components/Topbar/Topbar.css @@ -6,6 +6,10 @@ .root { width: 100%; + + /* Top Bar's drop shadow should always be visible */ + z-index: 10; + position: relative; } .container { @@ -132,84 +136,48 @@ z-index: -1; } -/* Verify email reminder (modal) */ + +/* ================ Modal ================ */ .verifyEmailModal { - position: relative; - height: 100vh; - padding: 24px 24px 98px 24px; - - @media (--viewportMedium) { - -webkit-overflow-scrolling: auto; - width: 480px; - min-height: 573px; - height: auto; - margin: 7.5vh auto; - padding: 72px 64px; - background-color: var(--matterColorBright); - border-radius: 2px; - } + @apply --marketplaceModalBaseStyles; + padding-top: 70px; } -.verifyEmailContent {} - -.verifyTitle { - @apply --marketplaceModalTitle; - margin: 21px 0 0 0; - - @media (--viewportMedium) { - margin: 22px 0 0 0; - } +/* Title of the modal */ +.modalTitle { + @apply --marketplaceModalTitleStyles; } -.verifyHelpText { - margin: 17px 0 0 0; - - @media (--viewportMedium) { - margin: 16px 0 0 0; - } +/* Paragraph for the Modal */ +.modalMessage { + @apply --marketplaceModalParagraphStyles; } +/* Make the email pop */ .email { - font-weight: bold; + @apply --marketplaceModalHighlightEmail; } -.verifyLink { - @apply --marketplaceH5FontStyles; - color: var(--matterColor); - margin: 0; - - @media (--viewportMedium) { - margin: 0; - } +.helperLink { + @apply --marketplaceModalHelperLink; } -.resendEmail { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); - margin: 59px 0 0 0; - - @media (--viewportMedium) { - margin: 63px 0 0 0; - } +.helperText { + @apply --marketplaceModalHelperText; } -.resendError { - color: var(--failColor); - margin: 66px 0 0 0; - - @media (--viewportMedium) { - margin: 72px 0 0 0; - } +.error { + @apply --marketplaceModalErrorStyles; } -.fixEmail { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); - margin: 0; +.bottomWrapper { + @apply --marketplaceModalBottomWrapper; - @media (--viewportMedium) { - margin: 0; - } + /* Align the helper links to the left since there isn't a Primary Button anymore */ + text-align: left; } +.modalIcon { + @apply --marketplaceModalIconStyles; +} diff --git a/src/components/Topbar/Topbar.js b/src/components/Topbar/Topbar.js index eb78afd6..ba024f9e 100644 --- a/src/components/Topbar/Topbar.js +++ b/src/components/Topbar/Topbar.js @@ -207,12 +207,12 @@ class TopbarComponent extends Component { const email = user.id ? {user.attributes.email} : ''; const resendEmailLink = ( - + ); const fixEmailLink = ( - + ); @@ -223,7 +223,7 @@ class TopbarComponent extends Component { ? 'Topbar.resendFailedTooManyRequests' : 'Topbar.resendFailed'; const resendErrorMessage = sendVerificationEmailError - ?

+ ?

: null; @@ -290,6 +290,7 @@ class TopbarComponent extends Component {

+
- -

+ +

-

+

-

+

{resendErrorMessage} -

- {sendVerificationEmailInProgress - ? - : } -

-

- -

+ +
+

+ {sendVerificationEmailInProgress + ? + : } +

+

+ +

+
+ +

diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css index 31b3b52a..0c326130 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css +++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.css @@ -42,8 +42,8 @@ .greeting { /* Font */ @apply --marketplaceH1FontStyles; - - margin-bottom: 12px; + margin-bottom: 1px; + margin-top: 16px; } .logoutButton { @@ -59,22 +59,22 @@ .inbox { /* Font */ - @apply --marketplaceH1FontStyles; + @apply --marketplaceH2FontStyles; color: var(--marketplaceColor); position: relative; margin-top: auto; - margin-bottom: 18px; + margin-bottom: 13px; } .navigationLink { /* Font */ - @apply --marketplaceH1FontStyles; + @apply --marketplaceH2FontStyles; color: var(--marketplaceColor); /* Layout */ margin-top: 0; - margin-bottom: 25px; + margin-bottom: 11px; } .currentPageLink { color: var(--marketplaceColorDark); diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css index 02f2cdb2..970eab71 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.css +++ b/src/containers/AuthenticationPage/AuthenticationPage.css @@ -1,45 +1,17 @@ -@import '../../marketplaceFonts.css'; @import '../../marketplace.css'; .root { - @apply --backgroundImage; - - /* PageLayout is using flex: AuthenticationPage's .root takes all available space */ - flex-grow: 1; - - /* AuthenticationPage's root uses flexbox */ - display: flex; - - @media (--viewportMedium) { - justify-content: center; - align-items: flex-start; - } + @apply --marketplaceModalRootStyles; } .content { - flex-grow: 1; - - /* Create context so the close button can be positioned within it */ - position: relative; - - /* Display and dimensions */ - display: flex; - flex-direction: column; - padding: 30px 24px 98px 24px; - - background-color: var(--matterColorLight); - border-radius: 2px; - - @media (--viewportMedium) { - flex-basis: 480px; - flex-grow: 0; - min-height: 573px; - padding: 60px; - margin-top: 7.5vh; - margin-bottom: 7.5vh; - } + @apply --marketplaceModalBaseStyles; + padding-top: 29px; } + +/* ================ Tabs & Form ================ */ + .tabs { @media (--viewportMedium) { margin-top: 6px; @@ -47,24 +19,33 @@ } .tab { - @apply --marketplaceModalTitle; + @apply --marketplaceModalTitleStyles; margin-top: 0; margin-bottom: 0; -} - -.form { - margin-top: 49px; @media (--viewportMedium) { - margin-top: 38px; + margin-top: 0; } } -.error { +.form { margin-top: 24px; - color: var(--failColor); + + @media (--viewportMedium) { + margin-top: 30px; + } } +.bottomWrapper { + @apply --marketplaceModalBottomWrapper; + + /* Align the helper links to the left since there isn't a Primary Button anymore */ + text-align: left; +} + + +/* ================ Hide Top bar in screens smaller than 768px ================ */ + .hideOnMobile { display: none; @@ -73,101 +54,64 @@ } } + +/* ================ Close icon ================ */ + .verifyClose { - /* Position */ - position: absolute; - top: 0; - right: 0; - - /* Display and dimensions */ - display: flex; - align-items: flex-start; - width: auto; - padding: 23px 24px; - - /* Colors */ - color: var(--matterColor); - - &:hover { - color: var(--matterColorDark); - text-decoration: none; - } + @apply --marketplaceModalCloseStyles; } .closeText { - @apply --marketplaceH6FontStyles; - margin: -2.5px 0 0 0; - - @media (--viewportMedium) { - margin-top: -1px; - } + @apply --marketplaceModalCloseText; } .closeIcon { - display: inline-block; - margin-left: 8px; - padding: 2px 0 4px; - - /* SVG elements work better as a content-box */ - box-sizing: content-box; + @apply --marketplaceModalCloseIcon; } -.verifyTitle { - @apply --marketplaceModalTitle; - margin: 21px 0 0 0; - @media (--viewportMedium) { - margin: 22px 0 0 0; - } +/* ================ Typography ================ */ + + +/* Title of the modal */ +.modalTitle { + @apply --marketplaceModalTitleStyles; } -.verifyHelpText { - margin: 17px 0 0 0; - - @media (--viewportMedium) { - margin: 16px 0 0 0; - } +/* Paragraph for the Modal */ +.modalMessage { + @apply --marketplaceModalParagraphStyles; } +/* Make the email pop */ .email { - font-weight: bold; + @apply --marketplaceModalHighlightEmail; } -.verifyLink { - @apply --marketplaceH5FontStyles; - color: var(--matterColor); - margin: 0; +/* Helper links */ +.modalHelperLink { + @apply --marketplaceModalHelperLink; +} + +/* Helper texts for the links, not the actual links */ +.modalHelperText { + @apply --marketplaceModalHelperText; +} + +.modalIcon { + @apply --marketplaceModalIconStyles; + + /* Align the icon and rest of the content in the modal. Sign & Login doesn't use an icon, maybe we should add one? */ + margin-top: 47px; @media (--viewportMedium) { - margin: 0; + margin-top: 0; } } -.resendEmail { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); - margin: 59px 0 0 0; - @media (--viewportMedium) { - margin: 63px 0 0 0; - } -} - -.resendError { - color: var(--failColor); - margin: 66px 0 0 0; - - @media (--viewportMedium) { - margin: 72px 0 0 0; - } -} - -.fixEmail { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); - margin: 0; - - @media (--viewportMedium) { - margin: 0; - } +/* ================ Errors ================ */ + +.error { + @apply --marketplaceModalErrorStyles; } diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js index 49371e40..64168d47 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.js +++ b/src/containers/AuthenticationPage/AuthenticationPage.js @@ -141,12 +141,12 @@ export const AuthenticationPageComponent = props => { const email = {user.attributes.email}; const resendEmailLink = ( - + ); const fixEmailLink = ( - + ); @@ -157,7 +157,7 @@ export const AuthenticationPageComponent = props => { ? 'AuthenticationPage.resendFailedTooManyRequests' : 'AuthenticationPage.resendFailed'; const resendErrorMessage = sendVerificationEmailError - ?

+ ?

: null; @@ -170,22 +170,27 @@ export const AuthenticationPageComponent = props => { - -

+ +

-

+

{resendErrorMessage} -

- {sendVerificationEmailInProgress - ? - : } -

-

- -

+ +
+

+ {sendVerificationEmailInProgress + ? + : } +

+

+ +

+
+ + ); diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index 74591a5c..dc436007 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -59,7 +59,7 @@ const EditListingDescriptionFormComponent = props => { : saveActionMsg; const classes = classNames(css.root, className); - const buttonDisabled = invalid || submitting || disabled || updateInProgress; + const submitDisabled = invalid || submitting || disabled || updateInProgress; return (
@@ -85,7 +85,7 @@ const EditListingDescriptionFormComponent = props => { validate={[required(descriptionRequiredMessage)]} /> -
diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js index a81c3355..6b2d928a 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.js +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js @@ -48,7 +48,7 @@ export const EditListingLocationFormComponent = props => { : null; const classes = classNames(css.root, className); - const buttonDisabled = invalid || submitting || disabled || updateInProgress; + const submitDisabled = invalid || submitting || disabled || updateInProgress; return (
@@ -78,7 +78,7 @@ export const EditListingLocationFormComponent = props => { placeholder={buildingPlaceholderMessage} /> -
diff --git a/src/containers/EditListingPricingForm/EditListingPricingForm.js b/src/containers/EditListingPricingForm/EditListingPricingForm.js index 27a025b7..7936b0d2 100644 --- a/src/containers/EditListingPricingForm/EditListingPricingForm.js +++ b/src/containers/EditListingPricingForm/EditListingPricingForm.js @@ -36,7 +36,7 @@ export const EditListingPricingFormComponent = props => { : null; const classes = classNames(css.root, className); - const buttonDisabled = invalid || submitting || disabled || updateInProgress; + const submitDisabled = invalid || submitting || disabled || updateInProgress; return (
@@ -52,7 +52,7 @@ export const EditListingPricingFormComponent = props => { validate={[required(priceRequiredMessage)]} /> -
diff --git a/src/containers/EmailVerificationForm/EmailVerificationForm.css b/src/containers/EmailVerificationForm/EmailVerificationForm.css index bd9fe052..4e0a0656 100644 --- a/src/containers/EmailVerificationForm/EmailVerificationForm.css +++ b/src/containers/EmailVerificationForm/EmailVerificationForm.css @@ -1,38 +1,34 @@ @import '../../marketplace.css'; .root { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - height: 100%; + @apply --marketplaceModalFormRootStyles; } -.title { - @apply --marketplaceModalTitle; - margin: 28px 0 17px 0; - - @media (--viewportMedium) { - margin: 28px 0 24px 0; - } +.bottomWrapper { + @apply --marketplaceModalBottomWrapper; } -.button { - @apply --marketplaceButtonStylesPrimary; - margin-top: 24px; - align-self: stretch; +/* ================ Typography ================ */ - @media (--viewportMedium) { - margin-top: 72px; - } +/* Title of the modal */ +.modalTitle { + @apply --marketplaceModalTitleStyles; +} + +/* Paragraph for the Modal */ +.modalMessage { + @apply --marketplaceModalParagraphStyles; } .error { - color: var(--failColor); - margin: 23px 0 24px 0; - - @media (--viewportMedium) { - margin: 28px 0 24px 0; - } + @apply --marketplaceModalErrorStyles; +} + +.submitButton { + @apply --marketplaceButtonStylesPrimary; +} + +.modalIcon { + @apply --marketplaceModalIconStyles; } diff --git a/src/containers/EmailVerificationForm/EmailVerificationForm.js b/src/containers/EmailVerificationForm/EmailVerificationForm.js index 4cce8eab..a8ecc82a 100644 --- a/src/containers/EmailVerificationForm/EmailVerificationForm.js +++ b/src/containers/EmailVerificationForm/EmailVerificationForm.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import { compose } from 'redux'; import { FormattedMessage, injectIntl } from 'react-intl'; import { reduxForm, Field, propTypes as formPropTypes } from 'redux-form'; -import { PrimaryButton, NamedLink, IconEmailAttention, IconEmailSuccess } from '../../components'; +import { NamedLink, IconEmailAttention, IconEmailSuccess } from '../../components'; import * as propTypes from '../../util/propTypes'; import css from './EmailVerificationForm.css'; @@ -28,12 +28,12 @@ const EmailVerificationFormComponent = props => { const verifyEmail = (
- -

+ +

-

+

@@ -44,12 +44,15 @@ const EmailVerificationFormComponent = props => {
- +
+ - {submitting || inProgress - ? - : } - + {submitting || inProgress + ? + : } + + +

); @@ -57,20 +60,22 @@ const EmailVerificationFormComponent = props => { const alreadyVerified = (
- -

+ +

-

+

- - - +
+ + + +
); diff --git a/src/containers/EmailVerificationPage/EmailVerificationPage.css b/src/containers/EmailVerificationPage/EmailVerificationPage.css index e60fe8aa..abcbe29f 100644 --- a/src/containers/EmailVerificationPage/EmailVerificationPage.css +++ b/src/containers/EmailVerificationPage/EmailVerificationPage.css @@ -1,39 +1,13 @@ @import '../../marketplace.css'; .root { - @apply --backgroundImage; - - /* PageLayout is using flex: EmailVerificationPage's .root takes all available space */ - flex-grow: 1; - - /* EmailVerificationPage's root uses flexbox */ - display: flex; - - @media (--viewportMedium) { - justify-content: center; - align-items: flex-start; - } + @apply --marketplaceModalRootStyles; } .content { - flex-grow: 1; - display: flex; - flex-direction: column; - padding: 30px 24px 98px 24px; - background-color: var(--matterColorLight); - border-radius: 2px; - - @media (--viewportMedium) { - flex-basis: 480px; - flex-grow: 0; - min-height: 573px; - padding: 60px; - margin-top: 7.5vh; - margin-bottom: 7.5vh; - } + @apply --marketplaceModalBaseStyles; } .error { - margin-top: 24px; - color: var(--failColor); + @apply --marketplaceModalErrorStyles; } diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index ad5081ca..208fe0d7 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -119,11 +119,12 @@ height: calc(0.41 * 100vw); max-height: 50vh; object-fit: cover; - border-radius: 2px; - } + border-radius: var(--borderRadius); - &:hover { - opacity: 0.85; + &:hover { + transform: scale(1.005); + box-shadow: var(--boxShadowListingCard); + } } } diff --git a/src/containers/LoginForm/LoginForm.css b/src/containers/LoginForm/LoginForm.css index c585c53d..831909f3 100644 --- a/src/containers/LoginForm/LoginForm.css +++ b/src/containers/LoginForm/LoginForm.css @@ -1,32 +1,26 @@ @import '../../marketplace.css'; .root { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - height: 100%; + @apply --marketplaceModalFormRootStyles; } .password { - margin-top: 24px; - margin-bottom: 24px; - - @media (--viewportMedium) { - margin-top: 30px; - } + @apply --marketplaceModalPasswordMargins; } .bottomWrapper { - margin-top: auto; - text-align: center; + @apply --marketplaceModalBottomWrapper; +} + +/* Adjust the bottomWrapper's margin to match modals without the helper text */ +.bottomWrapperText { + @apply --marketplaceModalBottomWrapperText; } .recoveryLink { - color: var(--matterColor); + @apply --marketplaceModalHelperLink; } .recoveryLinkInfo { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); + @apply --marketplaceModalHelperText; } diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js index d32ddb8e..cd77fada 100644 --- a/src/containers/LoginForm/LoginForm.js +++ b/src/containers/LoginForm/LoginForm.js @@ -3,7 +3,7 @@ import { compose } from 'redux'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import { reduxForm, propTypes as formPropTypes } from 'redux-form'; import classNames from 'classnames'; -import { Button, TextInputField, NamedLink } from '../../components'; +import { PrimaryButton, TextInputField, NamedLink } from '../../components'; import * as validators from '../../util/validators'; import css from './LoginForm.css'; @@ -55,6 +55,7 @@ const LoginFormComponent = props => { return (
+
{ validate={passwordRequired} />
-

- - - -

- +
+

+ + + +

+ + + +
); }; diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css index a4c925e5..e38e8a75 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css +++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css @@ -1,12 +1,7 @@ @import '../../marketplace.css'; .root { -display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - height: 100%; - min-height: 306px; + @apply --marketplaceModalFormRootStyles; } .email { @@ -18,23 +13,20 @@ display: flex; } .bottomWrapper { - margin-top: auto; + @apply --marketplaceModalBottomWrapper; } -.bottomText { - @apply --marketplaceH5FontStyles; - color: var(--matterColorAnti); - margin: 0; - - @media (--viewportMedium) { - margin: 0; - } +/* Adjust the bottomWrapper's margin to match modals without the helper text */ +.bottomWrapperText { + @apply --marketplaceModalBottomWrapperText; } -.submitButton { - margin-top: 26px; +/* Helper links */ +.modalHelperLink { + @apply --marketplaceModalHelperLink; } -.loginLink { - color: var(--matterColor); +/* Helper texts for the links, not the actual links */ +.modalHelperText { + @apply --marketplaceModalHelperText; } diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js index 5ef51344..b04815b1 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js +++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js @@ -43,11 +43,11 @@ const PasswordRecoveryFormComponent = props => { ? emailNotFoundMessage : null; const initialEmail = initialValues ? initialValues.email : null; - const buttonDisabled = (pristine && !initialEmail) || submitting; + const submitDisabled = (pristine && !initialEmail) || submitting; const classes = classNames(rootClassName || css.root, className); const loginLink = ( - + ); @@ -66,17 +66,22 @@ const PasswordRecoveryFormComponent = props => { />
-

- +

+ + +

- + +
+ ); }; + PasswordRecoveryFormComponent.defaultProps = { rootClassName: null, className: null, diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css index b655d83e..f28f1d45 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css @@ -1,118 +1,48 @@ @import '../../marketplace.css'; -:root { - --baseContent: { - flex-grow: 1; - display: flex; - flex-direction: column; - padding: 32px 24px 98px 24px; - background-color: var(--matterColorLight); - border-radius: 2px; - - @media (--viewportMedium) { - flex-basis: 480px; - flex-grow: 0; - padding: 55px; - margin-top: 7.5vh; - margin-bottom: 7.5vh; - } - } -} - .root { - @apply --backgroundImage; - - display: flex; - flex: 1; - - @media (--viewportMedium) { - justify-content: center; - align-items: flex-start; - } -} - -.submitEmailContent { - @apply --baseContent; -} - -.emailSubmittedContent { - @apply --baseContent; - padding-bottom: 99px; - - @media (--viewportMedium) { - padding-bottom: 62px; - min-height: 508px; - } + @apply --marketplaceModalRootStyles; } +.submitEmailContent, +.genericErrorContent, +.emailSubmittedContent, .emailNotVerifiedContent { - @apply --baseContent; - padding-top: 30px; - - @media (--viewportMedium) { - padding-top: 53px; - padding-bottom: 80px; - } -} - -.genericErrorContent { - @apply --baseContent; -} - -.keysIconRoot { - width: 100%; - height: 100%; -} - -.title { - @apply --marketplaceModalTitle; - margin-top: 31px; - margin-bottom: 0px; -} - -.message { - margin-top: 23px; - margin-bottom: 0px; - - @media (--viewportMedium) { - margin-top: 24px; - margin-bottom: 0px; - } -} - -.submittedEmail { - font-weight: bold; -} - -.emailNotVerifiedBottomText { - margin-top: 30px; - margin-bottom: 0px; - - @media (--viewportMedium) { - margin-top: 32px; - } + @apply --marketplaceModalBaseStyles; } .bottomWrapper { - margin-top: auto; + @apply --marketplaceModalBottomWrapper; + + /* Align the helper links to the left since there isn't a Primary Button anymore */ + text-align: left; } -.bottomInfo { - @apply --marketplaceH5FontStyles; - margin: 0; - color: var(--matterColorAnti); - - @media (--viewportMedium) { - margin: 0; - } +.modalIcon { + @apply --marketplaceModalIconStyles; } -.bottomLink { - @apply --marketplaceH5FontStyles; - margin: 0; - color: var(--matterColor); +/* ================ Typography ================ */ - @media (--viewportMedium) { - margin: 0; - } +/* Title of the modal */ +.modalTitle { + @apply --marketplaceModalTitleStyles; +} + +/* Paragraph for the Modal */ +.modalMessage { + @apply --marketplaceModalParagraphStyles; +} + +/* Make the email pop */ +.email { + @apply --marketplaceModalHighlightEmail; +} + +.helperLink { + @apply --marketplaceModalHelperLink; +} + +.helperText { + @apply --marketplaceModalHelperText; } diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js index 99467875..3953fa08 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js @@ -55,24 +55,24 @@ export const PasswordRecoveryPageComponent = props => { }); const resendEmailLink = ( - onSubmitEmail(submittedEmail)}> + onSubmitEmail(submittedEmail)}> ); const fixEmailLink = ( - + ); const submitEmailContent = (
- -

+ +

-

+

{ ); const submittedEmailText = passwordRequested - ? {initialEmail} - : {submittedEmail}; + ? {initialEmail} + : {submittedEmail}; const emailSubmittedContent = (
- -

+ +

-

+

-

+

{recoveryInProgress ? : { values={{ resendEmailLink }} />}

-

- +

+

); - const initialEmailText = {initialEmail}; + const initialEmailText = {initialEmail}; const emailNotVerifiedContent = (
- -

+ +

-

+

-

+

@@ -137,11 +137,11 @@ export const PasswordRecoveryPageComponent = props => { const genericErrorContent = (
- -

+ +

-

+

diff --git a/src/containers/PasswordResetForm/PasswordResetForm.css b/src/containers/PasswordResetForm/PasswordResetForm.css index 4377786e..90b9e320 100644 --- a/src/containers/PasswordResetForm/PasswordResetForm.css +++ b/src/containers/PasswordResetForm/PasswordResetForm.css @@ -1,15 +1,9 @@ +@import '../../marketplace.css'; + .root { } -.passwordInput { - /* Leave space between the input and the button below when the - viewport height is small */ - margin-bottom: 24px; -} - -.submitButton { - /* In a flexbox context, this makes the button position itself to the - bottom */ - margin-top: auto; +.password { + @apply --marketplaceModalPasswordMargins; } diff --git a/src/containers/PasswordResetForm/PasswordResetForm.js b/src/containers/PasswordResetForm/PasswordResetForm.js index 19094daa..2908c5b5 100644 --- a/src/containers/PasswordResetForm/PasswordResetForm.js +++ b/src/containers/PasswordResetForm/PasswordResetForm.js @@ -62,7 +62,7 @@ const PasswordResetFormComponent = props => { return (
- -

+ +

-

+

{resetPasswordError @@ -103,14 +103,14 @@ export class PasswordResetPageComponent extends Component { const resetDoneContent = (
- -

+ +

-

+

- +

diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css index cbae2a35..4fdbdc57 100644 --- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css +++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css @@ -60,9 +60,5 @@ } .error { - color: red; -} - -.submitButton { - margin-top: 40px; -} + @apply --marketplaceModalErrorStyles; +} \ No newline at end of file diff --git a/src/containers/SignupForm/SignupForm.css b/src/containers/SignupForm/SignupForm.css index 4490d4e1..bd3f2f37 100644 --- a/src/containers/SignupForm/SignupForm.css +++ b/src/containers/SignupForm/SignupForm.css @@ -1,11 +1,7 @@ @import '../../marketplace.css'; .root { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - height: 100%; + @apply --marketplaceModalFormRootStyles; } .name { @@ -27,18 +23,9 @@ } .password { - margin-top: 24px; - - @media (--viewportMedium) { - margin-top: 30px; - } + @apply --marketplaceModalPasswordMargins; } -.button { - margin-top: 24px; - align-self: stretch; - - @media (--viewportMedium) { - margin-top: 72px; - } +.bottomWrapper { + @apply --marketplaceModalBottomWrapper; } diff --git a/src/containers/SignupForm/SignupForm.js b/src/containers/SignupForm/SignupForm.js index db5a6106..5c3c696d 100644 --- a/src/containers/SignupForm/SignupForm.js +++ b/src/containers/SignupForm/SignupForm.js @@ -3,7 +3,7 @@ import { compose } from 'redux'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import { reduxForm, propTypes as formPropTypes } from 'redux-form'; import classNames from 'classnames'; -import { Button, TextInputField } from '../../components'; +import { PrimaryButton, TextInputField } from '../../components'; import * as validators from '../../util/validators'; import css from './SignupForm.css'; @@ -137,9 +137,13 @@ const SignupFormComponent = props => { validate={passwordValidators} />

- + +
+ + + +
+ ); }; diff --git a/src/marketplace.css b/src/marketplace.css index 89c74f53..b6720181 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -286,6 +286,224 @@ outline: none; } } + + + + +/* ================ Modals ================ */ + + --marketplaceModalRootStyles { + /* PageLayout is using flex: AuthenticationPage's .root takes all available space */ + flex-grow: 1; + + /* AuthenticationPage's root uses flexbox */ + display: flex; + + @media (--viewportMedium) { + justify-content: center; + align-items: flex-start; + @apply --backgroundImage; + } + } + + --marketplaceModalFormRootStyles { + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-between; + height: 100%; + } + + --marketplaceModalBaseStyles { + flex-grow: 1; + + /* Create context so the close button can be positioned within it */ + position: relative; + + /* Display and dimensions */ + display: flex; + flex-direction: column; + padding: 24px 24px 48px 24px; + + background-color: var(--matterColorLight); + border-radius: var(--borderRadius); + + @media (--viewportMedium) { + flex-basis: 480px; + flex-grow: 0; + /* min-height: 568px; */ + padding: 55px 60px 55px 60px; + margin-top: 12.5vh; + margin-bottom: 12.5vh; + } + } + + + /* Modal title */ + + --marketplaceModalTitleStyles { + font-weight: var(--fontWeightSemiBold); + font-size: 30px; + line-height: 36px; + letter-spacing: -0.5px; + margin: 0; + font-weight: var(--fontWeightBold); + + @media (--viewportMedium) { + font-weight: var(--fontWeightSemiBold); + line-height: 40px; + letter-spacing: -0.9px; + margin: 0; + } + } + + + /* Modal message */ + + --marketplaceModalParagraphStyles { + margin: 18px 0 0 0; + + @media (--viewportMedium) { + margin: 24px 0 0 0; + } + } + + + /* Bottom wrapper for the modal */ + + --marketplaceModalBottomWrapper { + text-align: center; + margin-top: 60px; + align-self: stretch; + + @media (--viewportMedium) { + margin-top: 96px; + } + } + + /* Adjust the bottomWrapper's margin to match modals without the helper text */ + --marketplaceModalBottomWrapperText { + margin-top: -24px; + padding-bottom: 8px; + + @media (--viewportMedium) { + padding-bottom: 0; + } + } + + --marketplaceModalHelperText { + @apply --marketplaceH5FontStyles; + color: var(--matterColorAnti); + margin: 0; + + @media (--viewportMedium) { + margin: 0; + } + } + + --marketplaceModalHelperLink { + @apply --marketplaceH5FontStyles; + color: var(--matterColor); + margin: 0; + + @media (--viewportMedium) { + margin: 0; + } + } + + /* Modal Close icon */ + + --marketplaceModalCloseStyles { + + /* Position inside modal */ + position: absolute; + top: 0; + right: 0; + + /* Some content (like map) is positioning itself on top of close button without z-index handling */ + z-index: calc(var(--zIndexModal) + 1); + + /* Safari didn't know how to baseline-align svg icon and text */ + display: flex; + align-items: flex-start; + width: auto; + + /* Sizing (touch area) */ + padding: 24px 30px; + margin: 0; + border: 0; + + @media (--viewportMedium) { + padding: 27px 30px; + } + + /* Colors */ + background-color: transparent; + color: var(--matterColor); + + cursor: pointer; + + &:enabled:hover { + background-color: transparent; + color: var(--matterColorDark); + box-shadow: none; + text-decoration: none; + } + &:enabled:active { + background-color: transparent; + color: var(--matterColorDark); + } + &:disabled { + background-color: transparent; + } + } + + --marketplaceModalIconStyles { + height: 48px; + margin-bottom: 12px; + + @media (--viewportMedium) { + height: 64px; + margin-bottom: 23px; + } + } + + --marketplaceModalCloseText { + /* Font */ + @apply --marketplaceH6FontStyles; + margin: -2.5px 0 0 0; + + @media (--viewportMedium) { + margin-top: -1px; + } + } + + --marketplaceModalCloseIcon { + display: inline-block; + margin-left: 8px; + padding: 2px 0 4px; + box-sizing: content-box; + } + + --marketplaceModalErrorStyles { + @apply --marketplaceH4FontStyles; + margin-top: 24px; + color: var(--failColor); + } + + --marketplaceModalHighlightEmail { + font-weight: var(--fontWeightBold); + } + + --marketplaceModalPasswordMargins { + /* Leave space between the input and the button below when the + viewport height is small */ + margin-top: 24px; + + @media (--viewportMedium) { + margin-top: 30px; + } + } } diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index c8c7b7ee..3e6bb89a 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -198,20 +198,6 @@ } - /* This font is specific to Modal's (Lightbox) titles */ - --marketplaceModalTitle: { - font-weight: var(--fontWeightSemiBold); - font-size: 30px; - line-height: 36px; - letter-spacing: -0.5px; - - @media (--viewportMedium) { - line-height: 40px; - letter-spacing: -0.9px; - } - } - - /* ================ Tabbed navigation font styles ================ */ --marketplaceTabNavFontStyles { diff --git a/src/marketplaceIndex.css b/src/marketplaceIndex.css index 83338b98..bb8be7fe 100644 --- a/src/marketplaceIndex.css +++ b/src/marketplaceIndex.css @@ -74,6 +74,10 @@ label { } } +button { + font-family: "sofiapro", Helvetica, Arial, sans-serif; +} + select { @apply --marketplaceSelectStyles; }