-
Notifications
You must be signed in to change notification settings - Fork 321
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
fix: fix reply border style #2197
Conversation
borderRightWidth: 0, | ||
}, | ||
}), | ||
borderRightWidth: 0, |
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.
If its 0, if there a need to have this property in the styles anymore?
borderLeftWidth: 0, | ||
}, | ||
}), | ||
borderLeftWidth: 0, |
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.
If its 0, if there a need to have this property in the styles anymore?
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.
Yes, the current structure first passes styles.messageRepliesCurve
with a borderWidth: 1
. Then, we remove the opposite side border within each rightMessageRepliesCurve
or leftMessageRepliesCurve
. I've attached an image if we just remove that line.
![Screenshot 2023-09-03 at 14 38 34](https://private-user-images.githubusercontent.com/45667737/265267837-8b59c17b-2bbd-40e4-ab9e-7d2c903f7415.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDIzNTQsIm5iZiI6MTcyNjE0MjA1NCwicGF0aCI6Ii80NTY2NzczNy8yNjUyNjc4MzctOGI1OWMxN2ItMmJiZC00MGU0LWFiOWUtN2QyYzkwM2Y3NDE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDExNTQxNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQyNGE1MWEzYzc2YTE5MjgwNWViZTZkNTgzYmRhMTA1NDU5ZDY1ZWFhZTQ1MTMzYTM1ZGZmZmM3MTY4MTE0NDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.0Xg_nllPifXIW5_EDSLBEErkWELTHJXjJgI2YhaDrmE)
However, if this is not ideal, we could remove the borderWidth: 1
from the styles.messageRepliesCurve
and replace it with borderWithBottom: 1
and then have a left or right borderWidth with each replies curve. This should give the same impact.
Hey @aharwood9, thanks for fixing this and providing your valuable contributions. 🙌🏻 |
@khushal87 - sorry one additional comment. Should there be a horizontal margin or not between the curves and the avatars? See the below images. Without margin - ![]() Currently this PR has margin |
Hey @aharwood9, good point. According to the design, there should not be a margin. Can you add the fix? Thanks 😄 |
Done 👍 if you are happy with my reply to your comment about |
🎉 This PR is included in version 5.18.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎯 Goal
Fix #1982 and the curve wasn't showing on Android at all (hard to tell due to
MessageRepliesAvatars
sitting over it)🛠 Implementation details
flexDirection: row
to the message-replies container🎨 UI Changes
iOS
Before -
![Simulator Screenshot - iPhone 14 Plus - 2023-07-24 at 18 14 24](https://private-user-images.githubusercontent.com/45667737/255670720-f591f7eb-be25-4263-b9e0-17429150c0b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDIzNTQsIm5iZiI6MTcyNjE0MjA1NCwicGF0aCI6Ii80NTY2NzczNy8yNTU2NzA3MjAtZjU5MWY3ZWItYmUyNS00MjYzLWI5ZTAtMTc0MjkxNTBjMGIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDExNTQxNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFjM2YyYmYxMjcxMzg1MWUwYjU2YTYxY2ZkNGJkYmFiOTZkNDk3NTJiYmIxYmM2ZDY3Y2VjODk2NjQ4OWI0OTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bppITQpbJ1K_vma_AfSHVvQ8t6pL2Vkdi6PQlJ18fkI)
![Simulator Screenshot - iPhone 14 Plus - 2023-07-24 at 18 14 18](https://private-user-images.githubusercontent.com/45667737/255670736-0873539a-f1ac-494b-8c67-0d96fedee11a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDIzNTQsIm5iZiI6MTcyNjE0MjA1NCwicGF0aCI6Ii80NTY2NzczNy8yNTU2NzA3MzYtMDg3MzUzOWEtZjFhYy00OTRiLThjNjctMGQ5NmZlZGVlMTFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDExNTQxNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAzMDEyNjk5YWI2YjM1ODVhNzIyNDZiMDlmN2YyYzZlNTIyNjBjOGNkYmExOGQ3NDJmNmE0MWM4NTFjMzExMjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9HqvOPDXwX5uclDxU54NOkzER_gHicctyh-R82uNL3w)
After -
Android
Before -
After -
🧪 Testing
☑️ Checklist
develop
branch