diff --git a/web/modals/user-profile/user-profile-action-buttons.react.js b/web/modals/user-profile/user-profile-action-buttons.react.js index c14549ccb..96097bd9f 100644 --- a/web/modals/user-profile/user-profile-action-buttons.react.js +++ b/web/modals/user-profile/user-profile-action-buttons.react.js @@ -1,29 +1,100 @@ // @flow +import { faUserMinus, faUserPlus } from '@fortawesome/free-solid-svg-icons'; import * as React from 'react'; +import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js'; +import { userRelationshipStatus } from 'lib/types/relationship-types.js'; import type { ThreadInfo } from 'lib/types/thread-types'; import UserProfileMessageButton from './user-profile-message-button.react.js'; import css from './user-profile.css'; +import RelationshipPromptButton from '../../chat/relationship-prompt/relationship-prompt-button.js'; +import { buttonThemes } from '../../components/button.react.js'; type Props = { +threadInfo: ThreadInfo, }; function UserProfileActionButtons(props: Props): React.Node { const { threadInfo } = props; - const userProfileActionButtons = React.useMemo( - () => ( -
+ const { + otherUserInfo, + callbacks: { friendUser, unfriendUser }, + } = useRelationshipPrompt(threadInfo); + + const userProfileActionButtons = React.useMemo(() => { + if ( + !otherUserInfo || + otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND + ) { + return ; + } + + if ( + otherUserInfo.relationshipStatus === + userRelationshipStatus.REQUEST_RECEIVED + ) { + return ( + <> + +
+

+ Incoming friend request +

+
+ + +
+
+ + ); + } + + if ( + otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT + ) { + return ( +
+ + +
+ ); + } + return ( +
+
- ), - [threadInfo], - ); + ); + }, [otherUserInfo, friendUser, threadInfo, unfriendUser]); return userProfileActionButtons; } export default UserProfileActionButtons; diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css index 6bcb9e051..159662fac 100644 --- a/web/modals/user-profile/user-profile.css +++ b/web/modals/user-profile/user-profile.css @@ -1,46 +1,52 @@ .container { padding: 0 32px 32px; width: 552px; max-width: 80vw; } .userInfoContainer { display: flex; align-items: center; + margin-bottom: 24px; } .usernameContainer { padding-left: 16px; } .usernameText { font-size: var(--xxl-font-24); color: var(--fg); font-weight: 500; } .copyUsernameContainer { display: flex; align-items: center; color: var(--purple-link); margin-top: 8px; } .copyUsernameContainer:hover { cursor: pointer; } .copyUsernameText { font-size: var(--xs-font-12); margin-left: 4px; } -.buttonsContainer { - margin-top: 24px; +.multiButtonRowContainer { display: flex; + column-gap: 8px; } .actionButton { column-gap: 8px; - flex-grow: 1; + flex: 1; +} + +.incomingFriendRequestText { + color: var(--fg); + margin: 24px 0 8px 0; }