diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 19b3d774..7bca6255 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -31,6 +31,7 @@ import { CONTROL, FIRST_STEP, getMultiStepRegistrationNextStep, + getRegisterButtonClassInExperiment, getRegisterButtonLabelInExperiment, getRegisterButtonSubmitStateInExperiment, MULTI_STEP_REGISTRATION_EXP_VARIATION, @@ -522,7 +523,10 @@ const RegistrationPage = (props) => { name="register-user" type="submit" variant="brand" - className="mt-4 mb-4" + className={` + mt-4 mb-4 + ${getRegisterButtonClassInExperiment(multiStepRegistrationExpVariation, multiStepRegistrationPageStep)} + `} state={getRegisterButtonSubmitStateInExperiment( submitState, validationsSubmitState, diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js index e59ec718..7140d5ec 100644 --- a/src/register/data/optimizelyExperiment/helper.js +++ b/src/register/data/optimizelyExperiment/helper.js @@ -75,6 +75,13 @@ export const getRegisterButtonLabelInExperiment = ( return existingButtonLabel; }; +export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => { + if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) { + return 'continue-button'; + } + return 'register-button'; +}; + export const getRegisterButtonSubmitStateInExperiment = ( registerSubmitState, validationsSubmitState, expVariation, registerPageStep, ) => { diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss index 4126da9a..884af10d 100644 --- a/src/sass/_registration.scss +++ b/src/sass/_registration.scss @@ -1,3 +1,11 @@ +.register-button { + min-width: 14.4rem; +} + +.continue-button { + min-width: 7rem; +} + .pgn__form-autosuggest__wrapper > .pgn__form-group { margin-bottom: 0 !important; }