Conversation
## 🎯 Goal fixes #3755 Allow using light-on-dark for outgoing messages; and dark-on-light for outgoing messages. To achieve this, it's not enough to customize theme tokens; we have to use `myMessageTheme` to provide a completely separate theme for outgoing messages only. This is a preexsting mechanism in the SDK; but had a few small issues preventing working correctly. To verify a new cookbook is added: GetStream/docs-content#1490 ## 🛠 Implementation details There were a few different theming issues here; all fixed in a separate commit in this PR: - The theme merging wiped preexisting custom semantics, causing problems when doing theme overrides on different levels (which is what is used with `myMessageTheme`) - Message list components didn't provide the current scheme (light/dark) when merging the `myMessageTheme` - A various number of components used incmoing semantic tokens instead of reading `isMyMessages` and selecting incoming/outgoing token based on that - Quoted message was styled based on if qouted message was sent by current user; instead of parent message was sent by current user -> this didn't cause a UI issue with the default theme; but visible when using different text colors for incoming/outgoing texts - The default UI visibly changed on three places; all of them are verified by figma (see screenshots later): 1. The SDK unnecessarily changed failed/moderated outgoing messages background to incoming 2. When editing a message the original in the composer was always styled as incoming not outgoing 3. Opening our own poll in the poll modal used an inaccurate color for the vote circle ## 🎨 UI Changes Before - failed outgoing message background changed to incoming: <img height="500" alt="IMG_1870" src="https://github.com/user-attachments/assets/8d9d6cc4-c53d-4908-8595-ccc9f33527e0" /> After - in line with Figma: <img height="500" alt="IMG_1900" src="https://github.com/user-attachments/assets/70d657e2-f259-49ef-ad62-e69210dc16ab" /> Before - editing our own message styled as incmoing in composer: <img height="500" alt="IMG_1867 2" src="https://github.com/user-attachments/assets/ca9635fb-147c-4426-829d-91221491c03a" /> After - in line with Figma: <img height="500" alt="IMG_1868" src="https://github.com/user-attachments/assets/505c6f44-d8ab-4b40-bf93-94391f61f12e" /> Before - poll modal vote circle inaccurate color: <img height="500" alt="IMG_1866 3" src="https://github.com/user-attachments/assets/41f60da0-e27a-471a-b8a1-8eed00c5c489" /> After - in line with Figma: <img height="500" alt="IMG_1869" src="https://github.com/user-attachments/assets/2e13265a-c1a6-4b17-bc6a-3a0c815160d0" /> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
Contributor
SDK Size
|
Contributor
|
🎉 This PR is included in version 9.7.4 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Goal
fixes #3755
Allow using light-on-dark for outgoing messages; and dark-on-light for outgoing messages. To achieve this, it's not enough to customize theme tokens; we have to use
myMessageThemeto provide a completely separate theme for outgoing messages only. This is a preexsting mechanism in the SDK; but had a few small issues preventing working correctly. To verify a new cookbook is added:https://github.com/GetStream/docs-content/pull/1490
🛠 Implementation details
There were a few different theming issues here; all fixed in a separate commit in this PR:
myMessageTheme)myMessageThemeisMyMessagesand selecting incoming/outgoing token based on that🎨 UI Changes
Before - failed outgoing message background changed to incoming:
After - in line with Figma:
Before - editing our own message styled as incmoing in composer:
After - in line with Figma:
Before - poll modal vote circle inaccurate color:
After - in line with Figma:
🧪 Testing
☑️ Checklist
developbranch🎯 Goal
🛠 Implementation details
🎨 UI Changes
iOS
Android
🧪 Testing
☑️ Checklist
developbranch