Page MenuHomePhorge
Files F33324040

D7206.1768856671.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D7206.1768856671.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
@@ -6,11 +6,13 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import { userSearchIndexForPotentialMembers } from 'lib/selectors/user-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
import { threadIsPending } from 'lib/shared/thread-utils.js';
import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';
import css from './chat-thread-composer.css';
+import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';
import Label from '../components/label.react.js';
import Search from '../components/search.react.js';
@@ -94,18 +96,29 @@
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}
- >
- <div className={css.userName}>{userSearchResult.username}</div>
- <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
- </Button>
- </li>
- ))}
+ {userListItemsWithENSNames.map((userSearchResult: UserListItem) => {
+ const avatarInfo = getAvatarForUser(userSearchResult);
+
+ return (
+ <li key={userSearchResult.id} className={css.searchResultsItem}>
+ <Button
+ variant="text"
+ onClick={() => onSelectUserFromSearch(userSearchResult.id)}
+ className={css.searchResultsButton}
+ >
+ <div className={css.userContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ <div className={css.userName}>
+ {userSearchResult.username}
+ </div>
+ </div>
+ <div className={css.userInfo}>
+ {userSearchResult.alertTitle}
+ </div>
+ </Button>
+ </li>
+ );
+ })}
</ul>
);
}, [

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 19, 9:04 PM (7 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5958105
Default Alt Text
D7206.1768856671.diff (2 KB)

Event Timeline