Improvement: Adjust conversation overview alignments and styling
#227
Conversation
| import androidx.compose.ui.graphics.Color | ||
|
|
||
| object CommunicationColors { | ||
| private val ArtemisMainBlue = Color(0xFF3E8ACC) |
There was a problem hiding this comment.
I think you should use MaterialTheme.colorScheme.primary here to keep it consistent with the other blue elements.
There was a problem hiding this comment.
I also discussed this with Eylül on Tuesday, I will try to see whether we can get closer to the "original" artemis colors by updating the Material 3 theme with a different seed color and / or different settings. As soon as I know more (hopefully today, but latest tomorrow), I will reach out to @eylulnc and discuss how we can tackle this :)
There was a problem hiding this comment.
So I checked with the official Material theme builder and using the ArtemisMainBlue color as a seed color (for the current theme used in the app, we used a slightly different seed color). Depending on whether you use the "Color match" option, the results looks like this:
Without Color match
With Color match
With the color match option enabled, we get quite close to the seed color by using the PrimaryContainer color.
In my opinion, this might be a good compromise between bringing the mobile app appearance closer together, while still complying to the Android Material3 design guidelines and keeping an Android look and feel. What do you guys think about that @eylulnc, @julian-wls ?
There was a problem hiding this comment.
I think it look great, colors are more vibrant and it feels closer to the iOS as well. Also as you said we are still match to the Material3.
There was a problem hiding this comment.
I think this would be a great solution.
There was a problem hiding this comment.
Awesome, then lets use this solution and primaryContainer as the color for this PR, I will create a PR in the meantime to update the Theme accordingly :D
FelberMartin
changed the title
Improvement: Adjust conversation overview alignments and styling
There was a problem hiding this comment.
Just tested it and works like a charm, this is a big improvement for the app :D
I noticed that the little blue dot for a conversation with unread message is just displayed on the channel icons but not for group chats. This would also be a nice addition to the profile pictures of DMs (I try to merge my PR #214 for that hopefully before lunch today, but I think you will get some merge conflicts with that, sorry for that)
|
I just thought of this now, but could you also please verify that these changes work on Tablet and Foldable aswell? :D |
No problem at all 😂 I will check it out for group chat as well |
For the padding I tried a lot and could not manage the make it smaller interestingly but I will check it out again in the weekend |
…into bugfix/communication/change-channel-alignments # Conflicts: # feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/common/ChannelIcons.kt # feature/metis/manage-conversations/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/feature/metis/manageconversations/ui/conversation/overview/ConversationList.kt
…nel-alignments' into bugfix/communication/change-channel-alignments
@julian-wls @FelberMartin I have check it currently height of the row is 56dp which is define by ListItem itself by material I can force it to make it smaller but currently it is not depending to us. Do we want to stay align with material or make it smaller? |
Problem Description
The current channel structure in the Android app lacks visual clarity and readability. All channels and their titles are aligned in the same way, which makes it difficult for users to differentiate between section headers (e.g., "General," "Lectures," "Direct Messages") and the channels listed under them. This results in a poor user experience, especially when the list of channels grows longer.
Changes
Indentation for Channels: Implemented a visual indentation for channels under their respective section headers to indicate hierarchy clearly.
Header Styling: Section titles (e.g., "General," "Lectures") are now bold and stand out visually, acting as clear headers for the channel groups.
iOS Consistency: Aligned the Android design with the iOS app's visual structure to ensure consistency across platforms.
Steps for testing
Open the Communication tab in the Android app.
Verify the following:
-- Section titles like "General", "Lectures", and "Direct Messages" are bold and clearly distinguishable.
-- Channels listed under each section are indented, visually grouping them with their respective headers.
-- The spacing between channels and headers is visually compact and consistent.
Verify that unread message indicators still appear correctly.
Verify channels with unread messge are bold and have blue indicator
Check that dropdown menus for channel actions (e.g., "Favorite," "Hide," "Mute") are still functional.
Screenshots