Page MenuHomePhabricator

D9407.id.diff
No OneTemporary

D9407.id.diff

diff --git a/web/avatars/avatar.css b/web/avatars/avatar.css
--- a/web/avatars/avatar.css
+++ b/web/avatars/avatar.css
@@ -15,7 +15,7 @@
justify-content: center;
}
-.emojiMicro {
+.emojiXSmall {
font-size: 9px;
height: 16px;
line-height: 16px;
@@ -27,19 +27,19 @@
line-height: 24px;
}
-.emojiLarge {
+.emojiMedium {
font-size: 28px;
height: 42px;
line-height: 42px;
}
-.emojiProfile {
+.emojiLarge {
font-size: 80px;
height: 112px;
line-height: 112px;
}
-.micro {
+.xSmall {
border-radius: 8px;
height: 16px;
width: 16px;
@@ -53,14 +53,14 @@
min-width: 24px;
}
-.large {
+.medium {
border-radius: 21px;
height: 42px;
width: 42px;
min-width: 42px;
}
-.profile {
+.large {
border-radius: 56px;
height: 112px;
width: 112px;
diff --git a/web/avatars/avatar.react.js b/web/avatars/avatar.react.js
--- a/web/avatars/avatar.react.js
+++ b/web/avatars/avatar.react.js
@@ -3,14 +3,17 @@
import classnames from 'classnames';
import * as React from 'react';
-import type { ResolvedClientAvatar } from 'lib/types/avatar-types.js';
+import type {
+ ResolvedClientAvatar,
+ AvatarSize,
+} from 'lib/types/avatar-types.js';
import css from './avatar.css';
import LoadingIndicator from '../loading-indicator.react.js';
type Props = {
+avatarInfo: ResolvedClientAvatar,
- +size: 'micro' | 'small' | 'large' | 'profile',
+ +size: AvatarSize,
+showSpinner?: boolean,
};
@@ -19,18 +22,18 @@
const containerSizeClassName = classnames({
[css.imgContainer]: avatarInfo.type === 'image',
- [css.micro]: size === 'micro',
- [css.small]: size === 'small',
- [css.large]: size === 'large',
- [css.profile]: size === 'profile',
+ [css.xSmall]: size === 'XS',
+ [css.small]: size === 'S',
+ [css.medium]: size === 'M',
+ [css.large]: size === 'L',
});
const emojiSizeClassName = classnames({
[css.emojiContainer]: true,
- [css.emojiMicro]: size === 'micro',
- [css.emojiSmall]: size === 'small',
- [css.emojiLarge]: size === 'large',
- [css.emojiProfile]: size === 'profile',
+ [css.emojiXSmall]: size === 'XS',
+ [css.emojiSmall]: size === 'S',
+ [css.emojiMedium]: size === 'M',
+ [css.emojiLarge]: size === 'L',
});
const emojiContainerColorStyle = React.useMemo(() => {
@@ -66,11 +69,11 @@
]);
let loadingIndicatorSize;
- if (size === 'micro') {
+ if (size === 'XS') {
loadingIndicatorSize = 'small';
- } else if (size === 'small') {
+ } else if (size === 'S') {
loadingIndicatorSize = 'small';
- } else if (size === 'large') {
+ } else if (size === 'M') {
loadingIndicatorSize = 'medium';
} else {
loadingIndicatorSize = 'large';
diff --git a/web/avatars/edit-thread-avatar.react.js b/web/avatars/edit-thread-avatar.react.js
--- a/web/avatars/edit-thread-avatar.react.js
+++ b/web/avatars/edit-thread-avatar.react.js
@@ -37,7 +37,7 @@
<div className={css.editThreadAvatarContainer}>
<ThreadAvatar
threadInfo={threadInfo}
- size="profile"
+ size="L"
showSpinner={threadAvatarSaveInProgress}
/>
{editThreadAvatarMenu}
diff --git a/web/avatars/edit-user-avatar.react.js b/web/avatars/edit-user-avatar.react.js
--- a/web/avatars/edit-user-avatar.react.js
+++ b/web/avatars/edit-user-avatar.react.js
@@ -25,7 +25,7 @@
<div className={css.editUserAvatarContainer}>
<UserAvatar
userID={userID}
- size="profile"
+ size="L"
showSpinner={userAvatarSaveInProgress}
/>
{!userAvatarSaveInProgress ? <EditUserAvatarMenu /> : null}
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -106,7 +106,7 @@
<div className={css.avatarContainer}>
<Avatar
avatarInfo={pendingEmojiAvatar}
- size="profile"
+ size="L"
showSpinner={avatarSaveInProgress}
/>
</div>
diff --git a/web/avatars/thread-avatar.react.js b/web/avatars/thread-avatar.react.js
--- a/web/avatars/thread-avatar.react.js
+++ b/web/avatars/thread-avatar.react.js
@@ -7,6 +7,7 @@
useENSResolvedAvatar,
} from 'lib/shared/avatar-utils.js';
import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
+import type { AvatarSize } from 'lib/types/avatar-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js';
import { type RawThreadInfo, type ThreadInfo } from 'lib/types/thread-types.js';
@@ -15,7 +16,7 @@
type Props = {
+threadInfo: RawThreadInfo | ThreadInfo,
- +size: 'micro' | 'small' | 'large' | 'profile',
+ +size: AvatarSize,
+showSpinner?: boolean,
};
diff --git a/web/avatars/user-avatar.react.js b/web/avatars/user-avatar.react.js
--- a/web/avatars/user-avatar.react.js
+++ b/web/avatars/user-avatar.react.js
@@ -6,13 +6,14 @@
getAvatarForUser,
useENSResolvedAvatar,
} from 'lib/shared/avatar-utils.js';
+import type { AvatarSize } from 'lib/types/avatar-types.js';
import Avatar from './avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';
type Props = {
+userID: ?string,
- +size: 'micro' | 'small' | 'large' | 'profile',
+ +size: AvatarSize,
+showSpinner?: boolean,
};
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
@@ -173,7 +173,7 @@
className={css.searchResultsButton}
>
<div className={css.userContainer}>
- <UserAvatar size="small" userID={userSearchResult.id} />
+ <UserAvatar size="S" userID={userSearchResult.id} />
<div className={css.userName}>{userSearchResult.username}</div>
</div>
<div className={css.userInfo}>{userSearchResult.notice}</div>
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -130,7 +130,7 @@
<div className={css.colorContainer}>
<div className={css.avatarContainer}>
<div className={css.dotContainer}>{unreadDot}</div>
- <ThreadAvatar size="large" threadInfo={threadInfo} />
+ <ThreadAvatar size="M" threadInfo={threadInfo} />
</div>
</div>
<div className={css.threadButton}>
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -156,7 +156,7 @@
if (!isViewer && item.endsCluster) {
avatar = (
<div className={css.avatarContainer}>
- <UserAvatar size="small" userID={creator.id} />
+ <UserAvatar size="S" userID={creator.id} />
</div>
);
} else if (!isViewer) {
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -82,7 +82,7 @@
<>
<div className={css.topBarContainer}>
<div className={css.topBarThreadInfo}>
- <ThreadAvatar size="small" threadInfo={threadInfo} />
+ <ThreadAvatar size="S" threadInfo={threadInfo} />
<div className={css.threadTitle}>{uiName}</div>
</div>
<div className={css.buttons}>
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -24,7 +24,7 @@
messageReactionsList.map(messageReactionUser => (
<div key={messageReactionUser.id} className={css.userRowContainer}>
<div className={css.userInfoContainer}>
- <UserAvatar size="small" userID={messageReactionUser.id} />
+ <UserAvatar size="S" userID={messageReactionUser.id} />
<div className={css.username}>{messageReactionUser.username}</div>
</div>
<div>{messageReactionUser.reaction}</div>
diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -44,7 +44,7 @@
disabled={!canBeAdded}
>
<div className={css.userInfoContainer}>
- <UserAvatar size="small" userID={userInfo.id} />
+ <UserAvatar size="S" userID={userInfo.id} />
<div className={css.username}>{userInfo.username}</div>
</div>
<div className={css.label}>{action}</div>
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -114,7 +114,7 @@
</div>
<div className={css.roleModalMember}>
<div className={css.roleModalMemberAvatar}>
- <UserAvatar userID={memberInfo.id} size="large" />
+ <UserAvatar userID={memberInfo.id} size="M" />
</div>
<div className={css.roleModalMemberName}>{memberInfo.username}</div>
</div>
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -124,7 +124,7 @@
return (
<div className={memberContainerClasses}>
<div className={css.memberInfo}>
- <UserAvatar size="small" userID={memberInfo.id} />
+ <UserAvatar size="S" userID={memberInfo.id} />
{userName}
{label}
</div>
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -91,7 +91,7 @@
/>
<div className={sidebarInfoClassName}>
<div className={css.avatarContainer}>
- <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <ThreadAvatar size="XS" threadInfo={threadInfo} />
<div className={css.longTextEllipsis}>{uiName}</div>
</div>
<div className={css.lastMessage}>{lastMessage}</div>
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -78,7 +78,7 @@
return (
<Button className={css.subchannelContainer} onClick={onClickThread}>
- <ThreadAvatar size="small" threadInfo={threadInfo} />
+ <ThreadAvatar size="S" threadInfo={threadInfo} />
<div className={subchannelTitleClassName}>
<div className={css.longTextEllipsis}>{uiName}</div>
<div className={css.lastMessage}>{lastMessage}</div>
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -38,7 +38,7 @@
className={css.threadPickerOptionButton}
onClick={onClickThreadOption}
>
- <ThreadAvatar size="large" threadInfo={threadInfo} />
+ <ThreadAvatar size="M" threadInfo={threadInfo} />
<div className={css.threadNameText}>{uiName}</div>
</Button>
</div>
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -18,7 +18,7 @@
return (
<>
<div className={css.avatarContainer}>
- <ThreadAvatar size="small" threadInfo={threadInfo} />
+ <ThreadAvatar size="S" threadInfo={threadInfo} />
</div>
<ThreadAncestors threadInfo={threadInfo} />
</>
diff --git a/web/settings/relationship/block-list-row.react.js b/web/settings/relationship/block-list-row.react.js
--- a/web/settings/relationship/block-list-row.react.js
+++ b/web/settings/relationship/block-list-row.react.js
@@ -19,7 +19,7 @@
return (
<div className={css.container}>
<div className={css.userInfoContainer}>
- <UserAvatar size="small" userID={userInfo.id} />
+ <UserAvatar size="S" userID={userInfo.id} />
<div className={css.usernameContainer}>{userInfo.username}</div>
</div>
<div className={css.buttons}>
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -82,7 +82,7 @@
return (
<div className={css.container}>
<div className={css.userInfoContainer}>
- <UserAvatar size="small" userID={userInfo.id} />
+ <UserAvatar size="S" userID={userInfo.id} />
<div className={css.usernameContainer}>{userInfo.username}</div>
</div>
<div className={css.buttons}>{buttons}</div>
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -127,7 +127,7 @@
if (avatarNodeEnabled) {
avatarNode = (
<div className={css.avatarContainer}>
- <UserAvatar userID="256" size="profile" />
+ <UserAvatar userID="256" size="L" />
</div>
);
}
diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -85,7 +85,7 @@
<a onClick={handler.onClick} className={css.threadEntry} style={style}>
{itemExpandButton}
<div className={css.titleWrapper}>
- <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <ThreadAvatar size="XS" threadInfo={threadInfo} />
<div className={titleLabel}>{uiName}</div>
</div>
<CommunityActionsMenu communityID={threadInfo.id} />
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -94,7 +94,7 @@
<div className={css.threadEntry} style={style}>
{itemExpandButton}
<a onClick={handler.onClick} className={css.titleWrapper}>
- <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <ThreadAvatar size="XS" threadInfo={threadInfo} />
<div className={titleLabel}>{uiName}</div>
</a>
</div>
diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js
--- a/web/utils/typeahead-utils.js
+++ b/web/utils/typeahead-utils.js
@@ -186,16 +186,13 @@
if (actionButtonContent.type === 'user') {
const suggestedUser = actionButtonContent.userInfo;
avatarComponent = (
- <UserAvatar size="small" userID={actionButtonContent.userInfo.id} />
+ <UserAvatar size="S" userID={actionButtonContent.userInfo.id} />
);
typeaheadButtonText = `@${stringForUserExplicit(suggestedUser)}`;
} else if (actionButtonContent.type === 'chat') {
const suggestedChat = actionButtonContent.threadInfo;
avatarComponent = (
- <ThreadAvatar
- size="small"
- threadInfo={actionButtonContent.threadInfo}
- />
+ <ThreadAvatar size="S" threadInfo={actionButtonContent.threadInfo} />
);
typeaheadButtonText = `@${suggestedChat.uiName}`;
}

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 10:43 PM (15 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2696938
Default Alt Text
D9407.id.diff (15 KB)

Event Timeline