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,5 @@ .roleModalDescription { color: var(--change-member-role-modal-description-text); - padding: 16px 32px 0 32px; font-size: medium; line-height: 1.5; } @@ -24,20 +23,10 @@ .roleModalRoleSelector { display: flex; - justify-content: center; flex-direction: column; align-items: center; 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; + height: 172px; } .roleModalSaveButton { 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,45 +110,63 @@ 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} + ); }