Page MenuHomePhorge
Files F32563447

D10746.1767354315.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D10746.1767354315.diff
View Options

diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -15,6 +15,7 @@
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
+import Button from '../../components/button.react.js';
import { useSelector } from '../../redux/redux-utils.js';
type Props = {
@@ -121,6 +122,17 @@
[sortedUsersWithENSNames, toggleUser, pendingUsersToAdd],
);
+ const onClickClearAll = React.useCallback(() => {
+ setPendingUsersToAdd(new Set());
+ }, [setPendingUsersToAdd]);
+
+ const clearAllButtonColor = React.useMemo(() => {
+ if (pendingUsersToAdd.size === 0) {
+ return { color: 'var(--link-background-secondary-disabled)' };
+ }
+ return { color: 'var(--link-background-secondary-default)' };
+ }, [pendingUsersToAdd.size]);
+
const listHeader = React.useMemo(() => {
let selectionText = 'Select users';
if (pendingUsersToAdd.size > 0) {
@@ -130,10 +142,17 @@
return (
<div className={css.listHeaderContainer}>
<div className={css.selectionText}>{selectionText}</div>
- {/* {TODO: Add clear all button here} */}
+ <Button
+ variant="text"
+ buttonColor={clearAllButtonColor}
+ onClick={onClickClearAll}
+ disabled={pendingUsersToAdd.size === 0}
+ >
+ Clear all
+ </Button>
</div>
);
- }, [pendingUsersToAdd.size]);
+ }, [clearAllButtonColor, onClickClearAll, pendingUsersToAdd.size]);
let errors;
if (errorMessage) {
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -293,6 +293,8 @@
/* Link */
--link-background-primary-default: var(--violet-dark-100);
--link-background-primary-disabled: var(--shades-black-50);
+ --link-background-secondary-default: var(--violet-light-100);
+ --link-background-secondary-disabled: var(--shades-black-75);
/* Separator */
--separator-background-primary-default: var(--shades-black-75);
@@ -398,6 +400,9 @@
/* Link */
--link-background-primary-default: var(--violet-dark-100);
--link-background-primary-disabled: var(--shades-black-50);
+ /* @GINSU: TODO double check the secondary values after redesign is finished */
+ --link-background-secondary-default: var(--violet-dark-100);
+ --link-background-secondary-disabled: var(--shades-white-60);
/* Separator */
--separator-background-primary-default: var(--shades-white-60);

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 11:45 AM (8 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5875811
Default Alt Text
D10746.1767354315.diff (2 KB)

Event Timeline