diff --git a/src/register/registrationFields/UsernameField.jsx b/src/register/registrationFields/UsernameField.jsx index 498886a6..a308a5eb 100644 --- a/src/register/registrationFields/UsernameField.jsx +++ b/src/register/registrationFields/UsernameField.jsx @@ -42,8 +42,8 @@ const UsernameField = (props) => { iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />; suggestedUsernameDiv = suggestedUsernames(); } else if (usernameSuggestions.length > 0 && props.value === ' ') { - className = 'suggested-username'; - iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />; + className = 'username-suggestions d-flex align-items-center'; + iconButton = handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />; suggestedUsernameDiv = suggestedUsernames(); } else if (usernameSuggestions.length > 0 && errorMessage) { suggestedUsernameDiv = suggestedUsernames(); diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index cd2cc3bf..bbaf969d 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/src/register/tests/RegistrationPage.test.jsx @@ -660,7 +660,7 @@ describe('RegistrationPage', () => { const registrationPage = mount(reduxWrapper()); registrationPage.find('input#name').simulate('change', { target: { value: 'test name', name: 'name' } }); - registrationPage.find('button.suggested-username-close-button').at(0).simulate('click'); + registrationPage.find('button.username-suggestions__close__button').at(0).simulate('click'); expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions()); }); diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss index 5b4f93a0..a0870138 100644 --- a/src/sass/_registration.scss +++ b/src/sass/_registration.scss @@ -1,3 +1,109 @@ .register-stateful-button-width { min-width: 14.4rem; } + +.pgn__form-autosuggest__wrapper > .pgn__form-group { + margin-bottom: 0 !important; +} + +.email-suggestion-alert-error { + padding: 0.5rem 1rem; + + .email-suggestion__close { + float: right; + + &:hover { + cursor: pointer; + } + } + + .email-suggestion__text { + font-size: 0.75rem; + line-height: 1.25rem; + } + + .alert-link { + color: $primary !important; + + &:hover { + text-decoration: underline; + color: $info-700 !important; + } + } +} + +.email-suggestion-alert-warning { + color: $info-500 !important; + + &:hover { + text-decoration: underline; + color: $info-700 !important; + } +} + +.form-field--checkbox { + .pgn__form-label { + font-size: 0.75rem; + line-height: 1.25rem; + } + margin-left: 3px; +} + +.username-suggestions--chip { + padding: 1px 0.5rem; + margin: 0.25rem; + border-radius: 0.375rem; + line-height: 24px; + font-size: 12px; + font-weight: normal; + color: $primary-700; +} + +.username-suggestion--label { + font-size: 0.75rem; + line-height: 1.25rem; + margin-right: 0.25rem; +} + +.username-suggestions { + position: relative; + margin-top: -2.5rem; + margin-left: 15px; +} + +.username-suggestions__close__button { + right: 1rem; + position: absolute; +} + +.username-suggestions__error { + position: relative; + margin-top: -13.7%; + margin-bottom: 11%; + margin-left: 15px; +} + +.username-scroll-suggested--form-field { + width: 20rem; + white-space: nowrap; + overflow-x: auto; + display: inline-flex; +} + +@media (max-width: 372px) { + .username-scroll-suggested--form-field { + width: 11rem !important; + } + .username-suggestions__close__button { + right: 0.5rem; + } +} + +@media (max-width: map-get($grid-breakpoints, "sm")) { + .username-scroll-suggested--form-field { + width: 15rem; + } + .username-suggestions__close__button { + right: 0.5rem; + } +}