diff --git a/web/modals/threads/members/add-members-group.react.js b/web/modals/components/add-members-group.react.js rename from web/modals/threads/members/add-members-group.react.js rename to web/modals/components/add-members-group.react.js --- a/web/modals/threads/members/add-members-group.react.js +++ b/web/modals/components/add-members-group.react.js @@ -5,7 +5,7 @@ import type { UserListItem } from 'lib/types/user-types'; import AddMembersItem from './add-members-item.react'; -import css from './members-modal.css'; +import css from './add-members.css'; type AddMemberItemGroupProps = { +header: ?string, diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/components/add-members-item.react.js rename from web/modals/threads/members/add-members-item.react.js rename to web/modals/components/add-members-item.react.js --- a/web/modals/threads/members/add-members-item.react.js +++ b/web/modals/components/add-members-item.react.js @@ -4,7 +4,7 @@ import type { UserListItem } from 'lib/types/user-types'; -import css from './members-modal.css'; +import css from './add-members.css'; type AddMembersItemProps = { +userInfo: UserListItem, diff --git a/web/modals/components/add-members-list.react.js b/web/modals/components/add-members-list.react.js new file mode 100644 --- /dev/null +++ b/web/modals/components/add-members-list.react.js @@ -0,0 +1,34 @@ +// @flow + +import * as React from 'react'; + +import type { UserListItem } from 'lib/types/user-types'; + +import AddMembersItemGroup from './add-members-group.react'; + +type MemberGroupItem = { + +header: ?string, + +userInfos: $ReadOnlyArray, +}; + +type Props = { + +switchUser: string => void, + +pendingUsersToAdd: $ReadOnlySet, + +sortedGroupedUsersList: $ReadOnlyArray, +}; + +function AddMembersList(props: Props): React.Node { + const { switchUser, pendingUsersToAdd, sortedGroupedUsersList } = props; + + return sortedGroupedUsersList.map(({ header, userInfos }) => ( + + )); +} + +export default AddMembersList; diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css new file mode 100644 --- /dev/null +++ b/web/modals/components/add-members.css @@ -0,0 +1,41 @@ +div.addMemberItemsGroupHeader { + font-size: var(--s-font-14); + color: var(--add-members-group-header-color); + margin: 16px; +} + +button.addMemberItem { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: var(--add-members-item-color); + font-size: var(--l-font-18); + background-color: transparent; + border: none; + width: 100%; +} + +button.addMemberItem:hover { + color: var(--add-members-item-color-hover); +} + +button.addMemberItem:disabled { + color: var(--add-members-item-disabled-color); + cursor: not-allowed; +} + +button.addMemberItem:hover:disabled { + color: var(--add-members-item-disabled-color-hover); +} + +button.addMemberItem .label { + padding: 8px 16px; +} + +button.addMemberItem .danger { + color: var(--add-members-remove-pending-color); +} +button.addMemberItem:hover .danger { + color: var(--add-members-remove-pending-color-hover); +} diff --git a/web/modals/threads/members/add-members-list.react.js b/web/modals/threads/members/add-members-list-content.react.js rename from web/modals/threads/members/add-members-list.react.js rename to web/modals/threads/members/add-members-list-content.react.js --- a/web/modals/threads/members/add-members-list.react.js +++ b/web/modals/threads/members/add-members-list-content.react.js @@ -6,7 +6,7 @@ import type { UserListItem } from 'lib/types/user-types'; -import AddMembersItemGroup from './add-members-group.react'; +import AddMembersList from '../../components/add-members-list.react'; type Props = { +userListItems: $ReadOnlyArray, @@ -15,7 +15,7 @@ +hasParentThread: boolean, }; -function AddMembersList(props: Props): React.Node { +function AddMembersListContent(props: Props): React.Node { const { userListItems, pendingUsersToAdd, @@ -67,19 +67,19 @@ membersInParentThread, ...membersNotInParentThread, usersUnavailableToAdd, - ].filter(Boolean), + ] + .filter(Boolean) + .map(([header, userInfos]) => ({ header, userInfos })), [membersInParentThread, membersNotInParentThread, usersUnavailableToAdd], ); - return sortedGroupedUsersList.map(([header, userInfos]) => ( - - )); + ); } -export default AddMembersList; +export default AddMembersListContent; diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js --- a/web/modals/threads/members/add-members-modal.react.js +++ b/web/modals/threads/members/add-members-modal.react.js @@ -22,7 +22,7 @@ import Label from '../../../components/label.react'; import { useSelector } from '../../../redux/redux-utils'; import SearchModal from '../../search-modal.react'; -import AddMembersList from './add-members-list.react'; +import AddMembersListContent from './add-members-list-content.react'; import css from './members-modal.css'; type ContentProps = { @@ -139,7 +139,7 @@
{labelItems}
-