D4266.id13615.diff
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

D4266.id13615.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
	new file mode 100644
	--- /dev/null
	+++ b/web/settings/relationship/add-users-list-item.react.js
	@@ -0,0 +1,28 @@
	+// @flow
	+
	+import * as React from 'react';
	+
	+import type { AccountUserInfo } from 'lib/types/user-types.js';
	+
	+import css from './add-users-list.css';
	+
	+type Props = {
	+ +userInfo: AccountUserInfo,
	+ +selectUser: (userID: string) => mixed,
	+};
	+
	+function AddUsersListItem(props: Props): React.Node {
	+ const { userInfo, selectUser } = props;
	+ const addUser = React.useCallback(() => selectUser(userInfo.id), [
	+ selectUser,
	+ userInfo.id,
	+ ]);
	+ return (
	+ <button className={css.addUserButton} onClick={addUser}>
	+ <div className={css.addUserButtonUsername}>{userInfo.username}</div>
	+ Add
	+ </button>
	+ );
	+}
	+
	+export default AddUsersListItem;
	diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
	new file mode 100644
	--- /dev/null
	+++ b/web/settings/relationship/add-users-list.css
	@@ -0,0 +1,17 @@
	+.addUserButton {
	+ display: flex;
	+ flex-direction: row;
	+ justify-content: space-between;
	+ padding: 16px;
	+ color: var(--relationship-modal-color);
	+ font-size: var(--l-font-18);
	+ line-height: var(--line-height-display);
	+ background: transparent;
	+ border: none;
	+}
	+
	+.addUserButtonUsername {
	+ white-space: nowrap;
	+ overflow: hidden;
	+ text-overflow: ellipsis;
	+}