diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/threads/members/change-member-role-modal.css @@ -0,0 +1,29 @@ +.roleModalDescription { + color: var(--change-member-role-modal-description-text); + padding: 16px 32px 0 32px; + font-size: medium; + line-height: 1.5; +} + +.roleModalMember { + display: flex; + align-items: center; + justify-content: center; + margin-top: 24px; +} + +.roleModalMemberAvatar { + margin-right: 4px; +} + +.roleModalMemberName { + margin-left: 4px; + font-size: large; + color: var(--change-member-role-modal-generic-text); +} + +.roleModalRoleSelector { + display: flex; + justify-content: center; + padding: 20px; +} diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/threads/members/change-member-role-modal.react.js @@ -0,0 +1,37 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types'; + +import css from './change-member-role-modal.css'; +import UserAvatar from '../../../avatars/user-avatar.react.js'; +import Modal from '../../modal.react.js'; + +type ChangeMemberRoleModalProps = { + +memberInfo: RelativeMemberInfo, + +threadInfo: ThreadInfo, +}; + +function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node { + const { memberInfo } = props; + const { popModal } = useModalContext(); + + return ( + +
+ Members can only be assigned to one role at a time. Changing a + member’s role will replace their previously assigned role. +
+
+
+ +
+
{memberInfo.username}
+
+
+ ); +} + +export default ChangeMemberRoleModal; diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js --- a/web/modals/threads/members/member.react.js +++ b/web/modals/threads/members/member.react.js @@ -4,6 +4,7 @@ import * as React from 'react'; import { removeUsersFromThread } from 'lib/actions/thread-actions.js'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { removeMemberFromThread, @@ -20,6 +21,7 @@ useServerCall, } from 'lib/utils/action-utils.js'; +import ChangeMemberRoleModal from './change-member-role-modal.react.js'; import css from './members-modal.css'; import UserAvatar from '../../../avatars/user-avatar.react.js'; import Label from '../../../components/label.react.js'; @@ -35,6 +37,7 @@ function ThreadMember(props: Props): React.Node { const { memberInfo, threadInfo, setOpenMenu, isMenuOpen } = props; + const { pushModal } = useModalContext(); const userName = stringForUser(memberInfo); const { roles } = threadInfo; const { role } = memberInfo; @@ -64,7 +67,11 @@ [boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo], ); - const onClickChangeRole = React.useCallback(() => {}, []); + const onClickChangeRole = React.useCallback(() => { + pushModal( + , + ); + }, [memberInfo, pushModal, threadInfo]); const menuItems = React.useMemo( () => diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -233,4 +233,6 @@ --dropdown-option-hover-bg: var(--shades-black-70); --dropdown-selected-option-check-color: var(--violet-dark-100); --dropdown-disabled-color: var(--shades-black-60); + --change-member-role-modal-description-text: var(--shades-white-60); + --change-member-role-modal-generic-text: var(--shades-white-100); }