Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3295238
D9364.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
13 KB
Referenced Files
None
Subscribers
None
D9364.diff
View Options
diff --git a/native/avatars/avatar.react.js b/native/avatars/avatar.react.js
--- a/native/avatars/avatar.react.js
+++ b/native/avatars/avatar.react.js
@@ -7,12 +7,7 @@
import Multimedia from '../media/multimedia.react.js';
-export type AvatarSize =
- | 'micro'
- | 'small'
- | 'large'
- | 'profile'
- | 'profileLarge';
+export type AvatarSize = 'XS' | 'S' | 'M' | 'L' | 'XL';
type Props = {
+avatarInfo: ResolvedClientAvatar,
@@ -23,16 +18,16 @@
const { avatarInfo, size } = props;
const containerSizeStyle = React.useMemo(() => {
- if (size === 'micro') {
- return styles.micro;
- } else if (size === 'small') {
+ if (size === 'XS') {
+ return styles.xSmall;
+ } else if (size === 'S') {
return styles.small;
- } else if (size === 'large') {
+ } else if (size === 'M') {
+ return styles.medium;
+ } else if (size === 'L') {
return styles.large;
- } else if (size === 'profile') {
- return styles.profile;
}
- return styles.profileLarge;
+ return styles.xLarge;
}, [size]);
const emojiContainerStyle = React.useMemo(() => {
@@ -46,16 +41,16 @@
}, [avatarInfo, containerSizeStyle]);
const emojiSizeStyle = React.useMemo(() => {
- if (size === 'micro') {
- return styles.emojiMicro;
- } else if (size === 'small') {
+ if (size === 'XS') {
+ return styles.emojiXSmall;
+ } else if (size === 'S') {
return styles.emojiSmall;
- } else if (size === 'large') {
+ } else if (size === 'M') {
+ return styles.emojiMedium;
+ } else if (size === 'L') {
return styles.emojiLarge;
- } else if (size === 'profile') {
- return styles.emojiProfile;
}
- return styles.emojiProfileLarge;
+ return styles.emojiXLarge;
}, [size]);
const avatar = React.useMemo(() => {
@@ -95,53 +90,53 @@
justifyContent: 'center',
},
emojiLarge: {
- fontSize: 28,
+ fontSize: 64,
textAlign: 'center',
},
- emojiMicro: {
- fontSize: 9,
+ emojiMedium: {
+ fontSize: 28,
textAlign: 'center',
},
- emojiProfile: {
- fontSize: 64,
+ emojiSmall: {
+ fontSize: 14,
textAlign: 'center',
},
- emojiProfileLarge: {
+ emojiXLarge: {
fontSize: 80,
textAlign: 'center',
},
- emojiSmall: {
- fontSize: 14,
+ emojiXSmall: {
+ fontSize: 9,
textAlign: 'center',
},
imageContainer: {
overflow: 'hidden',
},
large: {
- borderRadius: 20,
- height: 40,
- width: 40,
- },
- micro: {
- borderRadius: 8,
- height: 16,
- width: 16,
- },
- profile: {
borderRadius: 45,
height: 90,
width: 90,
},
- profileLarge: {
- borderRadius: 56,
- height: 112,
- width: 112,
+ medium: {
+ borderRadius: 20,
+ height: 40,
+ width: 40,
},
small: {
borderRadius: 12,
height: 24,
width: 24,
},
+ xLarge: {
+ borderRadius: 56,
+ height: 112,
+ width: 112,
+ },
+ xSmall: {
+ borderRadius: 8,
+ height: 16,
+ width: 16,
+ },
});
export default Avatar;
diff --git a/native/avatars/edit-thread-avatar.react.js b/native/avatars/edit-thread-avatar.react.js
--- a/native/avatars/edit-thread-avatar.react.js
+++ b/native/avatars/edit-thread-avatar.react.js
@@ -99,7 +99,7 @@
return (
<TouchableOpacity onPress={showAvatarActionSheet} disabled={disabled}>
- <ThreadAvatar threadInfo={threadInfo} size="profileLarge" />
+ <ThreadAvatar threadInfo={threadInfo} size="XL" />
{spinner}
{!disabled ? <EditAvatarBadge /> : null}
</TouchableOpacity>
diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js
--- a/native/avatars/edit-user-avatar.react.js
+++ b/native/avatars/edit-user-avatar.react.js
@@ -127,9 +127,9 @@
const { userID } = props;
const userAvatar = userID ? (
- <UserAvatar userID={userID} size="profileLarge" />
+ <UserAvatar userID={userID} size="XL" />
) : (
- <UserAvatar userInfo={userInfo} size="profileLarge" />
+ <UserAvatar userInfo={userInfo} size="XL" />
);
const { disabled } = props;
diff --git a/native/avatars/emoji-avatar-creation.react.js b/native/avatars/emoji-avatar-creation.react.js
--- a/native/avatars/emoji-avatar-creation.react.js
+++ b/native/avatars/emoji-avatar-creation.react.js
@@ -102,7 +102,7 @@
<TouchableWithoutFeedback onPress={onPressEditEmoji}>
<View>
<View>
- <Avatar size="profileLarge" avatarInfo={stagedAvatarInfo} />
+ <Avatar size="XL" avatarInfo={stagedAvatarInfo} />
{loadingContainer}
</View>
<Text style={styles.editEmojiText}>Edit Emoji</Text>
diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -142,7 +142,7 @@
const threadAvatar = React.useMemo(
() => (
<View style={styles.avatarContainer}>
- <ThreadAvatar size="large" threadInfo={data.threadInfo} />
+ <ThreadAvatar size="M" threadInfo={data.threadInfo} />
</View>
),
[data.threadInfo, styles.avatarContainer],
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -170,7 +170,7 @@
if (!isViewer && item.endsCluster) {
return (
<View style={styles.avatarContainer}>
- <UserAvatar size="small" userID={item.messageInfo.creator.id} />
+ <UserAvatar size="S" userID={item.messageInfo.creator.id} />
</View>
);
} else if (!isViewer) {
diff --git a/native/chat/mention-typeahead-tooltip-button.react.js b/native/chat/mention-typeahead-tooltip-button.react.js
--- a/native/chat/mention-typeahead-tooltip-button.react.js
+++ b/native/chat/mention-typeahead-tooltip-button.react.js
@@ -24,16 +24,13 @@
let typeaheadTooltipButtonText = null;
if (item.actionButtonContent.type === 'user') {
avatarComponent = (
- <UserAvatar size="small" userID={item.actionButtonContent.userInfo.id} />
+ <UserAvatar size="S" userID={item.actionButtonContent.userInfo.id} />
);
typeaheadTooltipButtonText = item.actionButtonContent.userInfo.username;
} else if (item.actionButtonContent.type === 'chat') {
typeaheadTooltipButtonText = item.actionButtonContent.threadInfo.uiName;
avatarComponent = (
- <ThreadAvatar
- size="small"
- threadInfo={item.actionButtonContent.threadInfo}
- />
+ <ThreadAvatar size="S" threadInfo={item.actionButtonContent.threadInfo} />
);
}
diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js
--- a/native/chat/message-list-header-title.react.js
+++ b/native/chat/message-list-header-title.react.js
@@ -45,7 +45,7 @@
if (!isSearchEmpty) {
avatar = (
<View style={styles.avatarContainer}>
- <ThreadAvatar size="small" threadInfo={threadInfo} />
+ <ThreadAvatar size="S" threadInfo={threadInfo} />
</View>
);
}
diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js
--- a/native/chat/message-reactions-modal.react.js
+++ b/native/chat/message-reactions-modal.react.js
@@ -41,7 +41,7 @@
({ item }) => (
<View key={item.id} style={styles.reactionsListRowContainer}>
<View style={styles.reactionsListUserInfoContainer}>
- <UserAvatar size="small" userID={item.id} />
+ <UserAvatar size="S" userID={item.id} />
<Text style={styles.reactionsListUsernameText}>{item.username}</Text>
</View>
<Text style={styles.reactionsListReactionText}>{item.reaction}</Text>
diff --git a/native/chat/message-tooltip-button-avatar.react.js b/native/chat/message-tooltip-button-avatar.react.js
--- a/native/chat/message-tooltip-button-avatar.react.js
+++ b/native/chat/message-tooltip-button-avatar.react.js
@@ -19,7 +19,7 @@
}
return (
<View style={styles.avatarContainer}>
- <UserAvatar size="small" userID={item.messageInfo.creator.id} />
+ <UserAvatar size="S" userID={item.messageInfo.creator.id} />
</View>
);
}
diff --git a/native/chat/settings/thread-settings-child-thread.react.js b/native/chat/settings/thread-settings-child-thread.react.js
--- a/native/chat/settings/thread-settings-child-thread.react.js
+++ b/native/chat/settings/thread-settings-child-thread.react.js
@@ -35,7 +35,7 @@
<Button onPress={onPress} style={[styles.button, firstItem, lastItem]}>
<View style={styles.leftSide}>
<View style={styles.avatarContainer}>
- <ThreadAvatar size="small" threadInfo={threadInfo} />
+ <ThreadAvatar size="S" threadInfo={threadInfo} />
</View>
<ThreadPill threadInfo={threadInfo} />
</View>
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -137,7 +137,7 @@
<View style={[this.props.styles.innerContainer, firstItem, lastItem]}>
<View style={this.props.styles.row}>
<View style={this.props.styles.userInfoContainer}>
- <UserAvatar size="small" userID={this.props.memberInfo.id} />
+ <UserAvatar size="S" userID={this.props.memberInfo.id} />
{usernameInfo}
</View>
{editButton}
diff --git a/native/chat/settings/thread-settings-parent.react.js b/native/chat/settings/thread-settings-parent.react.js
--- a/native/chat/settings/thread-settings-parent.react.js
+++ b/native/chat/settings/thread-settings-parent.react.js
@@ -26,7 +26,7 @@
return (
<Button onPress={onPressParentThread} style={styles.parentContainer}>
<View style={styles.avatarContainer}>
- <ThreadAvatar size="small" threadInfo={props.parentThreadInfo} />
+ <ThreadAvatar size="S" threadInfo={props.parentThreadInfo} />
</View>
<ThreadPill threadInfo={props.parentThreadInfo} />
</Button>
diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js
--- a/native/components/thread-list-thread.react.js
+++ b/native/components/thread-list-thread.react.js
@@ -38,7 +38,7 @@
iosActiveOpacity={0.85}
style={[this.props.styles.button, this.props.style]}
>
- <ThreadAvatar size="small" threadInfo={this.props.threadInfo} />
+ <ThreadAvatar size="S" threadInfo={this.props.threadInfo} />
<SingleLine style={[this.props.styles.text, this.props.textStyle]}>
{this.props.threadInfo.uiName}
</SingleLine>
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -47,7 +47,7 @@
iosActiveOpacity={0.85}
style={this.props.styles.button}
>
- <UserAvatar size="small" userID={this.props.userInfo.id} />
+ <UserAvatar size="S" userID={this.props.userInfo.id} />
<SingleLine style={[this.props.styles.text, this.props.textStyle]}>
{this.props.userInfo.username}
</SingleLine>
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -86,7 +86,7 @@
onLongPress={onExpandToggled}
>
<View style={styles.avatarContainer}>
- <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <ThreadAvatar size="XS" threadInfo={threadInfo} />
</View>
<SingleLine style={labelStyle}>{uiName}</SingleLine>
</TouchableOpacity>
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -168,7 +168,7 @@
return (
<View style={this.props.styles.container}>
<View style={[this.props.styles.innerContainer, borderBottom]}>
- <UserAvatar size="small" userID={this.props.userInfo.id} />
+ <UserAvatar size="S" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}>
{this.props.userInfo.username}
</SingleLine>
diff --git a/native/roles/change-roles-screen.react.js b/native/roles/change-roles-screen.react.js
--- a/native/roles/change-roles-screen.react.js
+++ b/native/roles/change-roles-screen.react.js
@@ -212,7 +212,7 @@
</Text>
</View>
<View style={styles.memberInfo}>
- <UserAvatar userID={memberInfo.id} size="profileLarge" />
+ <UserAvatar userID={memberInfo.id} size="XL" />
<Text style={styles.memberInfoUsername}>{memberInfo.username}</Text>
</View>
{roleSelector}
diff --git a/native/user-profile/user-profile.react.js b/native/user-profile/user-profile.react.js
--- a/native/user-profile/user-profile.react.js
+++ b/native/user-profile/user-profile.react.js
@@ -160,7 +160,7 @@
<View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
<View style={styles.userInfoContainer}>
- <UserAvatar size="profile" userID={userInfo?.id} />
+ <UserAvatar size="L" userID={userInfo?.id} />
<View style={styles.usernameContainer}>
<SingleLine style={styles.usernameText}>{usernameText}</SingleLine>
{copyUsernameButton}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sun, Nov 17, 9:22 PM (21 h, 32 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2531868
Default Alt Text
D9364.diff (13 KB)
Attached To
Mode
D9364: [native] update avatar size variants to use t-shirt sizes
Attached
Detach File
Event Timeline
Log In to Comment