Page MenuHomePhabricator
Files F3300755

D10722.id36104.diff
No OneTemporary
Actions

D10722.id36104.diff
View Options

diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -1,29 +1,52 @@
// @flow
+import classnames from 'classnames';
import * as React from 'react';
import type { AccountUserInfo } from 'lib/types/user-types.js';
import css from './add-users-list.css';
-import Button from '../../components/button.react.js';
+import UserAvatar from '../../avatars/user-avatar.react.js';
+import Checkbox from '../../components/checkbox.react.js';
type Props = {
+userInfo: AccountUserInfo,
- +selectUser: (userID: string) => mixed,
+ +userSelected: boolean,
+ +onToggleUser: (userID: string) => mixed,
};
function AddUsersListItem(props: Props): React.Node {
- const { userInfo, selectUser } = props;
- const addUser = React.useCallback(
- () => selectUser(userInfo.id),
- [selectUser, userInfo.id],
+ const { userInfo, userSelected, onToggleUser } = props;
+
+ const toggleUser = React.useCallback(
+ () => onToggleUser(userInfo.id),
+ [onToggleUser, userInfo.id],
);
- return (
- <Button className={css.addUserButton} onClick={addUser}>
- <div className={css.addUserButtonUsername}>{userInfo.username}</div>
- Add
- </Button>
+
+ const usernameClassname = classnames(css.username, {
+ [css.selectedUsername]: userSelected,
+ });
+
+ const addUsersListItem = React.useMemo(
+ () => (
+ <div className={css.userListItemContainer} onClick={toggleUser}>
+ <Checkbox checked={userSelected} />
+ <div className={css.avatarContainer}>
+ <UserAvatar userID={userInfo.id} size="S" />
+ </div>
+ <div className={usernameClassname}>{userInfo.username}</div>
+ </div>
+ ),
+ [
+ toggleUser,
+ userSelected,
+ userInfo.id,
+ userInfo.username,
+ usernameClassname,
+ ],
);
+
+ return addUsersListItem;
}
export default AddUsersListItem;
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -16,23 +16,37 @@
display: flex;
flex-direction: column;
flex: 1;
- margin-bottom: 8px;
}
-.addUserButton {
- justify-content: space-between;
- padding: 16px;
+.userListItemContainer {
+ display: flex;
color: var(--relationship-modal-color);
font-size: var(--l-font-18);
line-height: var(--line-height-display);
+ padding: 8px;
+}
+
+.userListItemContainer:hover {
+ cursor: pointer;
+ background-color: var(--listItem-background-primary-hover);
+ border-radius: 8px;
}
-.addUserButtonUsername {
+.avatarContainer {
+ margin: 0 8px 0 16px;
+}
+
+.username {
+ color: var(--text-background-secondary-default);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+.selectedUsername {
+ color: var(--text-background-primary-default);
+}
+
.confirmButtonContainer {
display: flex;
flex-direction: column;
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
@@ -153,7 +153,8 @@
<AddUsersListItem
userInfo={userInfo}
key={userInfo.id}
- selectUser={selectUser}
+ onToggleUser={selectUser}
+ userSelected={true} // TODO: check if userID is in pending users set
/>
)),
[filteredUsersWithENSNames, selectUser],
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -352,6 +352,9 @@
--tab-label-secondary-default: var(--shades-black-50);
--tab-label-secondary-active: var(--shades-white-100);
--tab-label-secondary-hover: var(--shades-white-80);
+
+ /* List Item */
+ --listItem-background-primary-hover: var(--shades-black-90);
}
/* Light theme */
@@ -456,4 +459,8 @@
--tab-label-secondary-default: var(--shades-black-60);
--tab-label-secondary-active: var(--shades-black-95);
--tab-label-secondary-hover: var(--shades-black-85);
+
+ /* List Item */
+ /* @GINSU: TODO double check these values after redesign is finished */
+ --listItem-background-primary-hover: var(--shades-white-70);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 9:41 PM (21 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2535842
Default Alt Text
D10722.id36104.diff (4 KB)

Event Timeline