Fix star icon position in message list (#616) #625
Conversation
|
Thanks, @Syrineladeb02! The maintainers will have a thorough look at this PR but before that, some work needs to be done from your side.
|
| appBar: AppBar(title: MessageListAppBarTitle(narrow: widget.narrow), | ||
| backgroundColor: backgroundColor, | ||
| shape: removeAppBarBottomBorder | ||
| ? const Border() | ||
| : null, // i.e., inherit | ||
| ), | ||
| // TODO question for Vlad: for a stream view, should we set | ||
| // [backgroundColor] based on stream color, as in this frame: | ||
| // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132%3A9684&mode=dev | ||
| // That's not obviously preferred over the default background that | ||
| // we matched to the Figma in 21dbae120. See another frame, which uses that: | ||
| // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=147%3A9088&mode=dev | ||
| body: Builder( | ||
| builder: (BuildContext context) => Center( |
There was a problem hiding this comment.
nit: Use two-space indentation on each level in here and other places. I think this happened because your IDE auto-formatted the code. This project does not use dart auto-format as mentioned in here.
There was a problem hiding this comment.
Thank you for the feedback, @sm-sayedi! I appreciate your guidance and will address your points accordingly.
|
In addition to @sm-sayedi's feedback above, a quick update from the chat thread:
We don't actually want to make this change — the current horizontal alignment, where the star touches the right edge of the screen, is the intended design. |
|
Got it, @gnprice. I'll revert the changes related to the distance between the star icon and the right edge of the message to align with the intended design. However, I found that the update provided a more structured appearance, which was my intention. |
This pull request addresses issue #616, where the star icon appeared too high relative to the message text in the message list. The issue was resolved by adjusting the position of the star icon so that its "shoulders" align with the x-height of the first line of text, ensuring better visual alignment with the message content. Additionally, the distance between the right edge of the message and the star icon has been adjusted for consistency with the adjacent time text.
I added padding to adjust the position of the star icon so that its "shoulders" are aligned with the x-height of the first line of text. This ensures better visual alignment with the message content, while also maintaining consistent spacing between the star icon and the right edge of the message.
Before :
After:
Fixes: #616