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( + () => ( + + ), + [disabledRoleChangeMessage, onSave], + ); + + const secondaryButton = React.useMemo( + () => ( + + ), + [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} -
- - +
+
+ +
+
{memberInfo.username}
+
+
+ +
+ {disabledRoleChangeMessage}
);