add birthdate header image

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

@@ -10,11 +10,17 @@ require('./join-flow-step.scss');
 const JoinFlowStep = ({
     children,
     description,
+    headerImgSrc,
     onSubmit,
     title,
     waiting
 }) => (
     <form onSubmit={onSubmit}>
+        {headerImgSrc && (
+            <div className="join-flow-header-image">
+                <img src={headerImgSrc} />
+            </div>
+        )}
         <div>
             <ModalInnerContent className="join-flow-inner-content">
                 {title && (
@@ -38,6 +44,7 @@ const JoinFlowStep = ({
 JoinFlowStep.propTypes = {
     children: PropTypes.node,
     description: PropTypes.string,
+    headerImgSrc: PropTypes.string,
     onSubmit: PropTypes.func,
     title: PropTypes.string,
     waiting: PropTypes.bool

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

@@ -21,3 +21,13 @@
     padding: 2.3125rem 0 2.5rem;
     font-size: .875rem;
 }
+
+/* overflow will only work if this class is set on parent of img, not img itself */
+.join-flow-header-image {
+    width: 100%;
+    height: 7.5rem;
+    overflow: hidden;
+    margin: 0;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+}

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

@@ -274,6 +274,7 @@ class BirthDateStep extends React.Component {
                     return (
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.birthDateStepDescription'})}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
                             title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}