-
Notifications
You must be signed in to change notification settings - Fork 984
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.
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
[161108] Optimize message styling when there's multiple mentions on top of each other #16505
Conversation
Jenkins BuildsClick to see older builds (34)
|
@@ -21,7 +21,8 @@ | |||
{:background-color colors/primary-50-opa-10 | |||
:padding-horizontal 3 | |||
:border-radius 6 | |||
:margin-bottom -3}) | |||
:margin-bottom -3 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I posted screenshots from emulator, Will test on my Pixel 7A
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks good to me. Please just test once in device!!
This is in Google pixel 7A |
looks good to me but I don't know anything about the chat designs/ implementation :) - @OmarBasem can you take a look? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm!
Blocked by #16520 |
91% of end-end tests have passed
Not executed tests (2)Failed tests (3)Click to expandClass TestOneToOneChatMultipleSharedDevicesNewUi:
Class TestGroupChatMultipleDeviceMergedNewUI:
Passed tests (31)Click to expandClass TestActivityCenterContactRequestMultipleDevicePR:
Class TestActivityMultipleDevicePR:
Class TestOneToOneChatMultipleSharedDevicesNewUi:
Class TestGroupChatMultipleDeviceMergedNewUI:
Class TestCommunityMultipleDeviceMerged:
Class TestCommunityOneDeviceMerged:
|
Hi @ibrkhalil thank you for PR. The issue still reproduced for some devices ISSUE 1: Partial overlapping of mentions in messages with multiple lines if the display name is in uppercaseSteps to reproduce:
Actual result:
Expected result:Mentions should be displayed properly and clearly without overlapping each other Devices:
|
Merging this as it's an improvement according to QA review, But this will be investiaged more later .. Maybe when this GitHub issue on RN is fixed. @VolodLytvynenko Had a chat with Chu on it and she approved the minor improvement involoved. |
Add locked input component, tests, styles Add translations Add duration icons Remove extra code Use theme from context Add missing code Update styles Update gas icon (previous was not reacting to size change) Use text from components instead of rn/text Fix styling for transaction sheet preview, locked input & account selector components Fix purple 50 color since it doesn't match design Work on PR suggestions Fix style to be pixel-perfect Comment-in tests Fix style Add docs for locked-input component Remove extra code Fixed design discrepancies Fix font-weight Fix purple color in account selector Remove unused icons Fix linter Fix tests fix for airplane mode [161108] Optimize message styling when there's multiple mentions on top of each other (#16505) Fix failing mute till test (#16453) fix navigation to community from discover communities screen (#16702) Update version to 0.162.3 [#16703] The display name is not resolved in chats for user sender after relogin (#16704) Mute community * mute and unmute community status-im/status-go@dfdaa72...e6187ae * mute and unmute community and all community chats status-im/status-go@dfdaa72...3abc86e * updated statu-go status-im/status-go@dfdaa72...919123e * refactored mute chat drawer status-im/status-go@d3e650d...3af0b17 * refactored mute chat drawer status-im/status-go@dfdaa72...3af0b17 * fixing mute channels * fixed mute community channels * update community chats mute status status-im/status-go@dfdaa72...dc50ac2 * added mute and unmute community toast status-im/status-go@dfdaa72...c06f7a6 * unmute community when atleast one community channel is unmuted status-im/status-go@dfdaa72...e691c47 * updated status-go status-im/status-go@b2e56f5...c52718c * updated status-go version v0.162.5 [Fix] Scroll to bottom on editing message (#16630) This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it. Signed-off-by: Mohamed Javid <[email protected]> Refactor `Bottom Sheet` to use Theme Context (#16710) This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme. Changes done: In Bottom Sheet: - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma) - Fix the Icon colour for danger in light mode - Updated Quo2 Preview to provide an option for the bottom sheet theme In Action Drawer: - Refactor the Action Drawer component to consume theme context Signed-off-by: Mohamed Javid <[email protected]> Revert extra commits Revert extra commits Revert extra changes
Add locked input component, tests, styles Add translations Add duration icons Remove extra code Use theme from context Add missing code Update styles Update gas icon (previous was not reacting to size change) Use text from components instead of rn/text Fix styling for transaction sheet preview, locked input & account selector components Fix purple 50 color since it doesn't match design Work on PR suggestions Fix style to be pixel-perfect Comment-in tests Fix style Add docs for locked-input component Remove extra code Fixed design discrepancies Fix font-weight Fix purple color in account selector Remove unused icons Fix linter Fix tests fix for airplane mode [161108] Optimize message styling when there's multiple mentions on top of each other (#16505) Fix failing mute till test (#16453) fix navigation to community from discover communities screen (#16702) Update version to 0.162.3 [#16703] The display name is not resolved in chats for user sender after relogin (#16704) Mute community * mute and unmute community status-im/status-go@dfdaa72...e6187ae * mute and unmute community and all community chats status-im/status-go@dfdaa72...3abc86e * updated statu-go status-im/status-go@dfdaa72...919123e * refactored mute chat drawer status-im/status-go@d3e650d...3af0b17 * refactored mute chat drawer status-im/status-go@dfdaa72...3af0b17 * fixing mute channels * fixed mute community channels * update community chats mute status status-im/status-go@dfdaa72...dc50ac2 * added mute and unmute community toast status-im/status-go@dfdaa72...c06f7a6 * unmute community when atleast one community channel is unmuted status-im/status-go@dfdaa72...e691c47 * updated status-go status-im/status-go@b2e56f5...c52718c * updated status-go version v0.162.5 [Fix] Scroll to bottom on editing message (#16630) This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it. Signed-off-by: Mohamed Javid <[email protected]> Refactor `Bottom Sheet` to use Theme Context (#16710) This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme. Changes done: In Bottom Sheet: - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma) - Fix the Icon colour for danger in light mode - Updated Quo2 Preview to provide an option for the bottom sheet theme In Action Drawer: - Refactor the Action Drawer component to consume theme context Signed-off-by: Mohamed Javid <[email protected]> Revert extra commits Revert extra commits Revert extra changes
fixes #16108
Summary
Side to side comparison
![]()
![image](https://private-user-images.githubusercontent.com/33176106/251408594-84e8db13-e320-484b-836e-8b8725689a4e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MDI0NTIsIm5iZiI6MTcyNTYwMjE1MiwicGF0aCI6Ii8zMzE3NjEwNi8yNTE0MDg1OTQtODRlOGRiMTMtZTMyMC00ODRiLTgzNmUtOGI4NzI1Njg5YTRlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDA1NTU1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc0M2ZmNjIwMGVkNDAyODc2ZGRmZTdlMjhjMTliY2RmMmJmN2M5ZGE1ZGVlODA5NDdjMTc5MDMyY2Q4YTM0NjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.cTKBG0v47HzgKcByobtsb5ke_FXyzoZOsQD74k3bISM)
![]()
![image](https://private-user-images.githubusercontent.com/33176106/251408507-e940077b-d746-4b79-bdc9-0819298cd897.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MDI0NTIsIm5iZiI6MTcyNTYwMjE1MiwicGF0aCI6Ii8zMzE3NjEwNi8yNTE0MDg1MDctZTk0MDA3N2ItZDc0Ni00Yjc5LWJkYzktMDgxOTI5OGNkODk3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDA1NTU1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUwMzFlN2Q0ZTNkZmU0ODdiNjY0YmUxZDUxZTI5NjA1MzAwN2I5OTM4OWFiM2VmNjY3NDgyM2Q1NTAwMTk0NDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.HuXSh_LduUZpJLtZulj-hkUhUSBzEpxkoJv51wgxTHE)
QA notes:
Need testing on multiple devices
status: ready