diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx index 6ce43ac83..6b1b91fe1 100644 --- a/src/components/join-flow/join-flow-step.jsx +++ b/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 }) => (
+ {headerImgSrc && ( +
+ +
+ )}
{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 diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index eeddbf87c..499646956 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/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; +} diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx index bf28f3e79..92489074e 100644 --- a/src/components/join-flow/join-flow-steps.jsx +++ b/src/components/join-flow/join-flow-steps.jsx @@ -274,6 +274,7 @@ class BirthDateStep extends React.Component { return (