diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css --- a/web/modals/threads/members/change-member-role-modal.css +++ b/web/modals/threads/members/change-member-role-modal.css @@ -1,6 +1,9 @@ +.container { + height: 70vh; +} + .roleModalDescription { color: var(--change-member-role-modal-description-text); - padding: 16px 32px 0 32px; font-size: medium; line-height: 1.5; } @@ -30,16 +33,6 @@ padding: 20px 20px 0 20px; } -.roleModalActionButtons { - width: 100%; - display: flex; - flex-direction: row; - justify-content: flex-end; - align-self: center; - align-items: stretch; - margin: 16px 200px 16px 0; -} - .roleModalSaveButton { margin-left: 8px; padding: 14px 32px; diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js --- a/web/modals/threads/members/change-member-role-modal.react.js +++ b/web/modals/threads/members/change-member-role-modal.react.js @@ -110,44 +110,62 @@ threadInfo.id, ]); + const primaryButton = React.useMemo( + () => ( + + Save + + ), + [disabledRoleChangeMessage, onSave], + ); + + const secondaryButton = React.useMemo( + () => ( + + Back + + ), + [onCloseModal], + ); + return ( - - - Members can only be assigned to one role at a time. Changing a - member’s role will replace their previously assigned role. - - - - + + + + Members can only be assigned to one role at a time. Changing a + member’s role will replace their previously assigned role. - {memberInfo.username} - - - - - {disabledRoleChangeMessage} - - - Back - - - Save - + + + + + {memberInfo.username} + + + + + {disabledRoleChangeMessage} );