diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/threads/members/add-members-item.react.js new file mode 100644 --- /dev/null +++ b/web/modals/threads/members/add-members-item.react.js @@ -0,0 +1,50 @@ +// @flow + +import * as React from 'react'; + +import type { UserListItem } from 'lib/types/user-types'; + +import css from './members-modal.css'; + +type AddMembersItemProps = { + +userInfo: UserListItem, + +onClick: (userID: string) => void, + +userAdded: boolean, +}; + +function AddMemberItem(props: AddMembersItemProps): React.Node { + const { userInfo, onClick, userAdded = false } = props; + + const canBeAdded = !userInfo.alertText; + + const onClickCallback = React.useCallback(() => { + if (!canBeAdded) { + return; + } + onClick(userInfo.id); + }, [canBeAdded, onClick, userInfo.id]); + + const action = React.useMemo(() => { + if (!canBeAdded) { + return userInfo.alertTitle; + } + if (userAdded) { + return Remove; + } else { + return 'Add'; + } + }, [canBeAdded, userAdded, userInfo.alertTitle]); + + return ( + + ); +} + +export default AddMemberItem; diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css --- a/web/modals/threads/members/members-modal.css +++ b/web/modals/threads/members/members-modal.css @@ -49,3 +49,39 @@ padding-top: 16px; text-align: center; } + +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/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -152,4 +152,10 @@ --arrow-extension-color: var(--shades-black-60); --modal-close-color: var(--shades-black-60); --modal-close-color-hover: var(--shades-white-100); + --add-members-item-color: var(--shades-black-60); + --add-members-item-color-hover: var(--shades-white-100); + --add-members-item-disabled-color: var(--shades-black-80); + --add-members-item-disabled-color-hover: var(--shades-black-60); + --add-members-remove-pending-color: var(--error-primary); + --add-members-remove-pending-color-hover: var(--error-light-50); }