diff --git a/web/settings/relationship/friend-list-row.css b/web/settings/relationship/friend-list-row.css --- a/web/settings/relationship/friend-list-row.css +++ b/web/settings/relationship/friend-list-row.css @@ -6,3 +6,21 @@ font-size: var(--l-font-18); line-height: var(--line-height-display); } + +.buttons { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + line-height: var(--line-height-text); +} + +.button { + font-size: var(--s-font-14); + color: var(--btn-bg-primary); + cursor: pointer; +} + +.destructive { + color: var(--btn-bg-danger); +} diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js --- a/web/settings/relationship/friend-list-row.react.js +++ b/web/settings/relationship/friend-list-row.react.js @@ -1,14 +1,42 @@ // @flow +import classnames from 'classnames'; import * as React from 'react'; +import { userRelationshipStatus } from 'lib/types/relationship-types'; + +import SWMansionIcon from '../../SWMansionIcon.react'; import css from './friend-list-row.css'; import type { UserRowProps } from './user-list.react'; function FriendListRow(props: UserRowProps): React.Node { const { userInfo } = props; + let buttons = null; + if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) { + buttons = ( +