Page MenuHomePhabricator
Files F3113816

D5100.id16623.diff
No OneTemporary
Actions

D5100.id16623.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';
@@ -12,7 +19,10 @@
getRelationshipDispatchAction,
} from 'lib/shared/relationship-utils';
import type { SetState } from 'lib/types/hook-types';
-import { type RelationshipButton } from 'lib/types/relationship-types';
+import {
+ relationshipButtons,
+ type RelationshipButton,
+} from 'lib/types/relationship-types';
import type { UserInfo } from 'lib/types/user-types';
import {
useDispatchActionPromise,
@@ -21,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,
@@ -40,10 +51,50 @@
const { username } = otherUserInfo;
invariant(username, 'Other username should be specified');
- const { text, action } = React.useMemo(() => {
+ const { text, action, variant, icon } = React.useMemo(() => {
+ let buttonVariant;
+ let buttonIcon;
+
+ switch (relationshipButton) {
+ case relationshipButtons.FRIEND:
+ buttonVariant = 'success';
+ buttonIcon = faUserPlus;
+ break;
+ case relationshipButtons.BLOCK:
+ buttonVariant = 'danger';
+ buttonIcon = faUserShield;
+ break;
+ case relationshipButtons.UNFRIEND:
+ buttonVariant = 'danger';
+ buttonIcon = faUserMinus;
+ break;
+ case relationshipButtons.UNBLOCK:
+ buttonVariant = 'success';
+ buttonIcon = faUserShield;
+ break;
+ case relationshipButtons.ACCEPT:
+ buttonVariant = 'success';
+ buttonIcon = faUserPlus;
+ break;
+ case relationshipButtons.REJECT:
+ buttonVariant = 'danger';
+ buttonIcon = faUserSlash;
+ break;
+ case relationshipButtons.WITHDRAW:
+ buttonVariant = 'danger';
+ buttonIcon = faUserMinus;
+ break;
+ default:
+ buttonVariant = 'primary';
+ buttonIcon = null;
+ break;
+ }
+
return {
text: getRelationshipActionText(relationshipButton, username),
action: getRelationshipDispatchAction(relationshipButton),
+ variant: buttonVariant,
+ icon: buttonIcon,
};
}, [relationshipButton, username]);
@@ -70,7 +121,10 @@
}, [dispatchActionPromise, updateRelationshipsActionPromise]);
return (
- <Button variant="primary" onClick={onClick} disabled={disabled}>
+ <Button variant={variant} onClick={onClick} disabled={disabled}>
+ {icon && (
+ <FontAwesomeIcon icon={icon} className={css.relationshipButtonIcon} />
+ )}
{text}
</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,7 @@
flex-direction: column;
row-gap: 10px;
}
+
+svg.relationshipButtonIcon {
+ padding-right: 0.5rem;
+}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 1, 7:27 PM (21 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2400571
Default Alt Text
D5100.id16623.diff (3 KB)

Event Timeline