Page MenuHomePhabricator
Files F3379583

D3677.id11503.diff
No OneTemporary
Actions

D3677.id11503.diff
View Options

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,27 @@
font-size: var(--l-font-18);
line-height: var(--line-height-display);
}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+}
+
+.button {
+ font-size: var(--s-font-14);
+ line-height: var(--line-height-text);
+ color: var(--btn-bg-primary);
+ cursor: pointer;
+ background: none;
+ border: none;
+}
+
+.destructive {
+ color: var(--btn-bg-danger);
+}
+
+.edit_button {
+ color: var(--relationship-modal-color);
+}
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,48 @@
// @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 = (
+ <button className={classnames([css.button, css.destructive])}>
+ Cancel request
+ </button>
+ );
+ } else if (
+ userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED
+ ) {
+ buttons = (
+ <>
+ <button className={css.button}>Accept</button>
+ <button className={classnames([css.button, css.destructive])}>
+ Reject
+ </button>
+ </>
+ );
+ } else if (userInfo.relationshipStatus === userRelationshipStatus.FRIEND) {
+ buttons = (
+ <button className={classnames([css.button, css.edit_button])}>
+ <SWMansionIcon icon="edit" size={22} />
+ </button>
+ );
+ }
- return <div className={css.container}>{userInfo.username}</div>;
+ return (
+ <div className={css.container}>
+ {userInfo.username}
+ <div className={css.buttons}>{buttons}</div>
+ </div>
+ );
}
export default FriendListRow;

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 5:21 PM (21 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594347
Default Alt Text
D3677.id11503.diff (2 KB)

Event Timeline