Merge pull request #3435 from benjiwheeler/join-flow-image-bg-color

Join flow image preview using background color

src/_colors.scss

@@ -28,8 +28,9 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 $ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
 $ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
 $ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
+$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
 
-$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Control Primary
+$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Events Primary
 $ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary
 $ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
 
@@ -63,3 +64,4 @@ $link-blue: $ui-blue;
 
 /* Down Deep */
 $dd-darkblue: hsla(195, 72.4, 17.1, 1);
+$dd-medium-blue: hsla(195, 72.4, 42, .65);

src/components/join-flow/birthdate-step.jsx

@@ -90,6 +90,7 @@ class BirthDateStep extends React.Component {
                     } = props;
                     return (
                         <JoinFlowStep
+                            headerImgClass="birthdate-step-image"
                             headerImgSrc="/images/join-flow/birthdate-header.png"
                             innerClassName="join-flow-inner-birthdate-step"
                             title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}

src/components/join-flow/country-step.jsx

@@ -69,6 +69,7 @@ class CountryStep extends React.Component {
                     } = props;
                     return (
                         <JoinFlowStep
+                            headerImgClass="country-step-image"
                             headerImgSrc="/images/join-flow/country-header.png"
                             innerClassName="join-flow-inner-country-step"
                             title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}

src/components/join-flow/email-step.jsx

@@ -151,6 +151,7 @@ class EmailStep extends React.Component {
                                     }}
                                 />
                             )}
+                            headerImgClass="email-step-image"
                             headerImgSrc="/images/join-flow/email-header.png"
                             innerClassName="join-flow-inner-email-step"
                             nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}

src/components/join-flow/join-flow-step.jsx

@@ -14,6 +14,7 @@ const JoinFlowStep = ({
     description,
     descriptionClassName,
     footerContent,
+    headerImgClass,
     headerImgSrc,
     nextButton,
     onSubmit,
@@ -24,7 +25,12 @@ const JoinFlowStep = ({
     <form onSubmit={onSubmit}>
         <div className="join-flow-outer-content">
             {headerImgSrc && (
-                <div className="join-flow-header-image-wrapper">
+                <div
+                    className={classNames(
+                        'join-flow-header-image-wrapper',
+                        headerImgClass
+                    )}
+                >
                     <img
                         className="join-flow-header-image"
                         src={headerImgSrc}
@@ -80,6 +86,7 @@ JoinFlowStep.propTypes = {
     description: PropTypes.string,
     descriptionClassName: PropTypes.string,
     footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    headerImgClass: PropTypes.string,
     headerImgSrc: PropTypes.string,
     innerClassName: PropTypes.string,
     nextButton: PropTypes.node,

src/components/join-flow/join-flow-step.scss

@@ -36,8 +36,7 @@
 /* overflow will only work if this class is set on parent of img, not img itself */
 .join-flow-header-image-wrapper {
     width: 100%;
-    min-height: 7.5rem;
-    max-height: 8.75rem;
+    height: 7.5rem;
     overflow: hidden;
     margin: 0;
     border-top-left-radius: 1rem;

src/components/join-flow/join-flow-steps.scss

@@ -100,6 +100,10 @@
     margin: 0 auto;
 }
 
+.country-step-image {
+    background-color: $ui-purple;
+}
+
 .join-flow-password-section {
     margin-top: 1.125rem;
 }
@@ -109,6 +113,10 @@
     margin: 0 auto;
 }
 
+.birthdate-step-image {
+    background-color: $ui-magenta;
+}
+
 .join-flow-privacy-message {
     margin: 1rem auto;
     font-size: .75rem;
@@ -157,6 +165,10 @@
     margin-top: 0;
 }
 
+.email-step-image {
+    background-color: $dd-medium-blue;
+}
+
 .join-flow-registration-error {
     padding-top: 5.5rem;
 }
@@ -183,6 +195,10 @@
     margin-bottom: 1.25rem;
 }
 
+.welcome-step-image {
+    background-color: $ui-yellow;
+}
+
 .gender-radio-row {
     transition: all .125s ease;
     width: 20.875rem;

src/components/join-flow/welcome-step.jsx

@@ -43,6 +43,7 @@ class WelcomeStep extends React.Component {
                                 id: 'registration.welcomeStepDescriptionNonEducator'
                             })}
                             descriptionClassName="join-flow-welcome-description"
+                            headerImgClass="welcome-step-image"
                             headerImgSrc="/images/join-flow/welcome-header.png"
                             innerClassName="join-flow-inner-welcome-step"
                             nextButton={this.props.createProjectOnComplete ? (