Page MenuHomePhabricator
Files F3523048

D7206.id24608.diff
No OneTemporary
Actions

D7206.id24608.diff
View Options

diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -63,9 +63,16 @@
div.userName {
color: var(--fg);
+ margin-left: 8px;
}
div.userInfo {
font-style: italic;
color: var(--thread-creation-search-item-info-color);
}
+
+div.userContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -14,6 +14,7 @@
import Button from '../components/button.react.js';
import Label from '../components/label.react.js';
import Search from '../components/search.react.js';
+import UserAvatar from '../components/user-avatar.react.js';
import type { InputState } from '../input/input-state.js';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -92,22 +93,25 @@
return null;
}
- return (
- <ul className={css.searchResultsContainer}>
- {userListItemsWithENSNames.map((userSearchResult: UserListItem) => (
- <li key={userSearchResult.id} className={css.searchResultsItem}>
- <Button
- variant="text"
- onClick={() => onSelectUserFromSearch(userSearchResult.id)}
- className={css.searchResultsButton}
- >
+ const userItems = userListItemsWithENSNames.map(
+ (userSearchResult: UserListItem) => (
+ <li key={userSearchResult.id} className={css.searchResultsItem}>
+ <Button
+ variant="text"
+ onClick={() => onSelectUserFromSearch(userSearchResult.id)}
+ className={css.searchResultsButton}
+ >
+ <div className={css.userContainer}>
+ <UserAvatar size="small" userID={userSearchResult.id} />
<div className={css.userName}>{userSearchResult.username}</div>
- <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
- </Button>
- </li>
- ))}
- </ul>
+ </div>
+ <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+ </Button>
+ </li>
+ ),
);
+
+ return <ul className={css.searchResultsContainer}>{userItems}</ul>;
}, [
onSelectUserFromSearch,
userInfoInputArray.length,

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 8:09 AM (20 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698169
Default Alt Text
D7206.id24608.diff (2 KB)

Event Timeline