remove header image and set height of overall gender step

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

@@ -52,9 +52,9 @@ class GenderStep extends React.Component {
                     } = props;
                     return (
                         <JoinFlowStep
+                            className="join-flow-gender-step"
                             description={this.props.intl.formatMessage({id: 'registration.genderStepDescription'})}
-                            headerImgSrc="/images/hoc/getting-started.jpg"
-                            title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
+                            title={this.props.intl.formatMessage({id: 'registration.genderStepTitle'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
                         >

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

+const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
 
@@ -9,6 +10,7 @@ require('./join-flow-step.scss');
 
 const JoinFlowStep = ({
     children,
+    className,
     description,
     headerImgSrc,
     nextButton,
@@ -23,7 +25,12 @@ const JoinFlowStep = ({
             </div>
         )}
         <div>
-            <ModalInnerContent className="join-flow-inner-content">
+            <ModalInnerContent
+                className={classNames(
+                    'join-flow-inner-content',
+                    className
+                )}
+            >
                 {title && (
                     <ModalTitle
                         className="join-flow-title"
@@ -47,6 +54,7 @@ const JoinFlowStep = ({
 
 JoinFlowStep.propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
     description: PropTypes.string,
     headerImgSrc: PropTypes.string,
     nextButton: PropTypes.node,

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

@@ -64,6 +64,27 @@
     margin: 0 auto;
 }
 
+.join-flow-gender-step {
+    height: 27.375rem;
+}
+
+.gender-radio-row {
+    transition: all .125s ease;
+    width: 20.875rem;
+    height: 2.85rem;
+    background-color: $ui-gray;
+    border-radius: .5rem;
+    margin-bottom: 0.375rem;
+    padding-left: 0.8125rem;
+    display: flex;
+    align-items: center;
+}
+
+.gender-radio-row-selected {
+    transition: all .125s ease;
+    background-color: $ui-blue-25percent;
+}
+
 .join-flow-next-button-arrow {
     width: 2rem;
     height: 2rem;