From 8a35ec4a21471a71fb3a6ad7144d67f703c19cda Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 3 Oct 2019 19:23:13 -0400 Subject: [PATCH 1/5] correct comment to identify yellow as Events, not Control --- src/_colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_colors.scss b/src/_colors.scss index cc0d46c71..02deecec5 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -29,7 +29,7 @@ $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-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 From 6430c58478f71a29142564538ab65970e769ab72 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 3 Oct 2019 19:23:35 -0400 Subject: [PATCH 2/5] add colors to use in join flow image loading background --- src/_colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/_colors.scss b/src/_colors.scss index 02deecec5..5401a6541 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -28,6 +28,7 @@ $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 Events Primary $ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary @@ -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); From 6da150d02e317a9f405a73415681e15cd3570244 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 3 Oct 2019 19:24:43 -0400 Subject: [PATCH 3/5] add background styles for join flow images --- src/components/join-flow/join-flow-steps.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index de027bbe3..9fcaab952 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/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; @@ -158,6 +166,10 @@ margin-top: 0; } +.email-step-image { + background-color: $dd-medium-blue; +} + .join-flow-registration-error { padding-top: 5.5rem; } @@ -184,6 +196,10 @@ margin-bottom: 1.25rem; } +.welcome-step-image { + background-color: $ui-yellow; +} + .gender-radio-row { transition: all .125s ease; width: 20.875rem; From e27a7cdbbc5da27c49d7982ca51465a26d5010e1 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 3 Oct 2019 19:25:56 -0400 Subject: [PATCH 4/5] pass join flow image background classes through to relevant steps --- src/components/join-flow/birthdate-step.jsx | 1 + src/components/join-flow/country-step.jsx | 1 + src/components/join-flow/email-step.jsx | 1 + src/components/join-flow/join-flow-step.jsx | 9 ++++++++- src/components/join-flow/welcome-step.jsx | 1 + 5 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx index 7e507468b..4773d6d9e 100644 --- a/src/components/join-flow/birthdate-step.jsx +++ b/src/components/join-flow/birthdate-step.jsx @@ -90,6 +90,7 @@ class BirthDateStep extends React.Component { } = props; return ( )} + 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'})} diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx index d26e35d03..4c0f4dbf2 100644 --- a/src/components/join-flow/join-flow-step.jsx +++ b/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 = ({
{headerImgSrc && ( -
+
Date: Thu, 3 Oct 2019 19:26:41 -0400 Subject: [PATCH 5/5] fix join flow header image height, so color background will be completely covered --- src/components/join-flow/join-flow-step.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index 5ae543ca9..716367ed5 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/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;