fix: Dark Mode TextInput text color #12037
Conversation
olerichter00
requested review from
Copilot,
MounirDhahri and
gkartalis
and removed request for
Copilot
There was a problem hiding this comment.
Pull Request Overview
This PR updates TextInput components to use a dark mode text color by utilizing the useColor hook. The changes ensure that text placed within TextInputs across various components displays correctly in dark mode.
- Updated ExperimentFlagItem.tsx to apply dark mode text color in CustomInput.
- Updated Composer.tsx to set TextInput text color for dark mode.
- Updated AuctionResult.tsx to apply dark mode text color for improved readability.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/app/system/devTools/DevMenu/Components/ExperimentFlagItem.tsx | Added useColor hook and applied dark mode text color in CustomInput. |
| src/app/Scenes/Inbox/Components/Conversations/Composer.tsx | Applied dark mode text color in the inline TextInput styles. |
| src/app/Scenes/AuctionResult/AuctionResult.tsx | Updated TextInput styles by including the dark mode text color. |
| return ( | ||
| <TextInput | ||
| value={value} | ||
| onChangeText={onChangeText} | ||
| autoCapitalize="none" | ||
| style={{ | ||
| color: color("mono100"), |
There was a problem hiding this comment.
[nitpick] Consider extracting the shared TextInput style properties (including dark mode color) into a common style or component to improve maintainability and reduce duplication.
Copilot uses AI. Check for mistakes.
| @@ -86,6 +86,7 @@ export default class Composer extends React.Component<Props, State> { | |||
| {({ color }) => { | |||
| // The TextInput loses its isFocused() callback as a styled component | |||
| const inputStyles = { | |||
| color: color("mono100"), | |||
There was a problem hiding this comment.
[nitpick] Consider centralizing the TextInput styles (such as the dark mode color) into a shared style utility to enhance consistency and facilitate future modifications.
Copilot uses AI. Check for mistakes.
| @@ -85,6 +88,7 @@ export const AuctionResult: React.FC<Props> = (props) => { | |||
| multiline | |||
| scrollEnabled={false} | |||
| style={{ | |||
| color: color("mono100"), | |||
There was a problem hiding this comment.
[nitpick] To reduce duplicated code, consider defining a common style for TextInput elements that incorporates the dark mode text color, which can then be reused across components.
Copilot uses AI. Check for mistakes.
olerichter00
deleted the
olerichter00/PBRW-713/dark-mode-textinput-text-color
branch
This PR resolves PBRW-713
Description
Dark Mode TextInput text color.
PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
Need help with something? Have a look at our docs, or get in touch with us.