Page MenuHomePhabricator
Files F3369813

D5140.diff
No OneTemporary
Actions

D5140.diff
View Options

diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -1,4 +1,11 @@
// @flow
+import {
+ faUserMinus,
+ faUserPlus,
+ faUserShield,
+ faUserSlash,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import invariant from 'invariant';
import * as React from 'react';
@@ -24,6 +31,7 @@
import Button from '../../../components/button.react';
import { useSelector } from '../../../redux/redux-utils';
+import css from './thread-settings-relationship-tab.css';
const loadingStatusSelector = createLoadingStatusSelector(
updateRelationshipsActionTypes,
@@ -67,6 +75,35 @@
};
}, [relationshipButton, username]);
+ const icon = React.useMemo(() => {
+ let buttonIcon = null;
+
+ if (relationshipButton === relationshipButtons.FRIEND) {
+ buttonIcon = faUserPlus;
+ } else if (relationshipButton === relationshipButtons.UNFRIEND) {
+ buttonIcon = faUserMinus;
+ } else if (relationshipButton === relationshipButtons.BLOCK) {
+ buttonIcon = faUserShield;
+ } else if (relationshipButton === relationshipButtons.UNBLOCK) {
+ buttonIcon = faUserShield;
+ } else if (relationshipButton === relationshipButtons.ACCEPT) {
+ buttonIcon = faUserPlus;
+ } else if (relationshipButton === relationshipButtons.REJECT) {
+ buttonIcon = faUserSlash;
+ } else if (relationshipButton === relationshipButtons.WITHDRAW) {
+ buttonIcon = faUserMinus;
+ }
+
+ if (buttonIcon) {
+ return (
+ <FontAwesomeIcon
+ icon={buttonIcon}
+ className={css.relationshipButtonIcon}
+ />
+ );
+ }
+ }, [relationshipButton]);
+
const dispatchActionPromise = useDispatchActionPromise();
const callUpdateRelationships = useServerCall(updateRelationships);
@@ -91,7 +128,10 @@
return (
<Button variant={variant} onClick={onClick} disabled={disabled}>
- {text}
+ <div className={css.relationshipButtonContent}>
+ {icon}
+ <div className={css.relationshipButtonText}>{text}</div>
+ </div>
</Button>
);
}
diff --git a/web/modals/threads/settings/thread-settings-relationship-tab.css b/web/modals/threads/settings/thread-settings-relationship-tab.css
--- a/web/modals/threads/settings/thread-settings-relationship-tab.css
+++ b/web/modals/threads/settings/thread-settings-relationship-tab.css
@@ -3,3 +3,18 @@
flex-direction: column;
row-gap: 10px;
}
+
+div.relationshipButtonContent {
+ display: flex;
+ flex: 1;
+ align-items: center;
+}
+
+div.relationshipButtonText {
+ flex: 1;
+ margin: 0 24px;
+}
+
+svg.relationshipButtonIcon {
+ position: absolute;
+}

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 11:35 PM (19 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2586913
Default Alt Text
D5140.diff (2 KB)

Event Timeline