Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Status - Emoji in custom status holder is not centered. #42032

Merged
merged 7 commits into from
Jun 10, 2024
Merged

fix: Status - Emoji in custom status holder is not centered. #42032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f0585e
fix: Status - Emoji in custom status holder is not centered.
Krishna2323 May 11, 2024
f06518e
remove redundant code.
Krishna2323 May 13, 2024
8180bac
Merge branch 'Expensify:main' into krishna2323/issue/35389
Krishna2323 May 15, 2024
526fa5d
Merge branch 'Expensify:main' into krishna2323/issue/35389
Krishna2323 May 21, 2024
90ea13b
aligm status emoji to center.
Krishna2323 May 21, 2024
ec1af9b
Merge branch 'krishna2323/issue/35389' of https://github.com/Krishna2…
Krishna2323 May 21, 2024
6454fe2
hide overflowing emoji from emoji status container.
Krishna2323 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/pages/home/sidebar/AvatarWithOptionalStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ function AvatarWithOptionalStatus({emojiStatus = '', isSelected = false}: Avatar
<View style={styles.sidebarStatusAvatarContainer}>
<ProfileAvatarWithIndicator isSelected={isSelected} />
<View style={[styles.sidebarStatusAvatar]}>
<Text
style={styles.emojiStatusLHN}
numberOfLines={1}
>
{emojiStatus}
</Text>
<View>
<Text
style={styles.emojiStatusLHN}
numberOfLines={1}
>
{emojiStatus}
</Text>
</View>
</View>
</View>
);
Expand Down
10 changes: 10 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4344,6 +4344,15 @@ const styles = (theme: ThemeColors) =>

emojiStatusLHN: {
fontSize: 9,
...(Browser.getBrowser() && !Browser.isMobile() && {transform: 'scale(.5)', fontSize: 22, overflow: 'visible'}),
...(Browser.getBrowser() &&
Browser.isSafari() &&
!Browser.isMobile() && {
transform: 'scale(0.7)',
fontSize: 13,
lineHeight: 15,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if we use 16 instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will try that and let you know in a few hours. Can you please let me know what's your expectation is by doing that? Is there a problem with lineHeight: 15?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We just typically try to keep things at base4 for our sizes (12, 16, 20, etc)

overflow: 'visible',
}),
},

onboardingVideoPlayer: {
Expand Down Expand Up @@ -4371,6 +4380,7 @@ const styles = (theme: ThemeColors) =>
bottom: -4,
borderColor: theme.highlightBG,
borderWidth: 2,
overflow: 'hidden',
},
moneyRequestViewImage: {
...spacing.mh5,
Expand Down
Loading