diff --git a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
index 1d0763825..4af1fe7bf 100644
--- a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
+++ b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
@@ -20,7 +20,11 @@ exports[`components/properties/user not readonly 1`] = `
- username-1
+
+ username-1
+
diff --git a/webapp/src/components/properties/user/user.scss b/webapp/src/components/properties/user/user.scss
index 0cba290ab..7e7b2557a 100644
--- a/webapp/src/components/properties/user/user.scss
+++ b/webapp/src/components/properties/user/user.scss
@@ -9,4 +9,62 @@
text-overflow: ellipsis;
min-width: unset;
}
+
+ .UserProperty-item {
+ display: flex;
+ align-items: center;
+
+ img {
+ border-radius: 50px;
+ width: 24px;
+ height: 24px;
+ margin-right: 6px;
+ }
+ }
+
+ .react-select__menu {
+ background: rgba(var(--center-channel-bg-rgb), 1);
+ box-shadow: var(--elevation-4);
+ border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+ border-radius: 4px;
+ }
+
+ .react-select__single-value {
+ margin: 0;
+ position: relative;
+ top: 12px;
+ max-width: 100%;
+ }
+
+ .react-select__option {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ padding: 0 40px 0 20px;
+
+ &:hover {
+ background: rgba(var(--center-channel-color-rgb), 0.08);
+ }
+
+ &:active {
+ background: rgba(var(--button-bg-rgb), 0.08);
+ }
+
+ &.react-select__option--is-selected {
+ background: rgba(var(--button-bg-rgb), 0.08);
+ color: rgba(var(--center-channel-color-rgb), 1);
+ }
+
+ .UserProperty-item {
+ img {
+ margin-right: 12px;
+ }
+ }
+ }
+
+ .react-select__menu-list {
+ border: 0;
+ }
}
+
+
diff --git a/webapp/src/components/properties/user/user.tsx b/webapp/src/components/properties/user/user.tsx
index 76c2f86de..31264058e 100644
--- a/webapp/src/components/properties/user/user.tsx
+++ b/webapp/src/components/properties/user/user.tsx
@@ -12,6 +12,8 @@ import {useAppSelector} from '../../../store/hooks'
import './user.scss'
import {getSelectBaseStyle} from '../../../theme'
+const imageURLForUser = (window as any).Components?.imageURLForUser
+
type Props = {
value: string,
readonly: boolean,
@@ -26,6 +28,25 @@ const selectStyles = {
}),
}
+const formatOptionLabel = (user: any) => {
+ let profileImg
+ if (imageURLForUser) {
+ profileImg = imageURLForUser(user.id)
+ }
+
+ return (
+
+ {profileImg && (
+
+ )}
+ {user.username}
+
+ )
+}
+
const UserProperty = (props: Props): JSX.Element => {
const workspaceUsers = useAppSelector(getWorkspaceUsersList)
const workspaceUsersById = useAppSelector<{[key:string]: IUser}>(getWorkspaceUsers)
@@ -42,6 +63,7 @@ const UserProperty = (props: Props): JSX.Element => {
backspaceRemovesValue={true}
className={'UserProperty octo-propertyvalue'}
classNamePrefix={'react-select'}
+ formatOptionLabel={formatOptionLabel}
styles={selectStyles}
placeholder={'Empty'}
getOptionLabel={(o: IUser) => o.username}