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 @@ -25,5 +25,26 @@ .roleModalRoleSelector { display: flex; justify-content: center; + flex-direction: column; + align-items: center; padding: 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; +} + +.roleModalBackButton { + 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 @@ -1,11 +1,15 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types'; +import { values } from 'lib/utils/objects.js'; import css from './change-member-role-modal.css'; +import Button, { buttonThemes } from '../../../components/button.react.js'; +import Dropdown from '../../../components/dropdown.react.js'; import UserAvatar from '../../../components/user-avatar.react.js'; import Modal from '../../modal.react.js'; @@ -15,9 +19,23 @@ }; function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node { - const { memberInfo } = props; + const { memberInfo, threadInfo } = props; const { popModal } = useModalContext(); + const roleOptions = React.useMemo( + () => + values(threadInfo.roles).map(role => ({ + id: role.id, + name: role.name, + })), + [threadInfo.roles], + ); + + const initialSelectedRole = memberInfo.role; + invariant(initialSelectedRole, "Member's role must be defined"); + + const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole); + return (
@@ -30,6 +48,25 @@
{memberInfo.username}
+
+ +
+
+ + +
); }