Skip to content

Change text color on red buttons#333

Merged
grunch merged 1 commit into
mainfrom
fix-text-color-in-red-buttons
Oct 17, 2025
Merged

Change text color on red buttons#333
grunch merged 1 commit into
mainfrom
fix-text-color-in-red-buttons

Conversation

@grunch

@grunch grunch commented Oct 17, 2025

Copy link
Copy Markdown
Member

Summary by CodeRabbit

Release Notes

  • Bug Fixes
    • Improved visibility of action button text on red-themed buttons in the trade detail view.
    • Simplified cancel action button behavior in trade details for consistent user experience.

@coderabbitai

coderabbitai Bot commented Oct 17, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

Updated the cancel button in the trade detail screen to consistently use the acceptCancelButton label and ensured white text visibility on red-themed buttons by adding explicit foregroundColor styling to the cancel and dispute button components.

Changes

Cohort / File(s) Summary
Trade Detail Screen UI Updates
lib/features/trades/screens/trade_detail_screen.dart
Simplified cancel button logic to always use acceptCancelButton for label text; added foregroundColor: Colors.white to ElevatedButton styles for cancel and dispute buttons to ensure text contrast on red backgrounds

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A button's text once danced with state,
Now steady stands—no more to waits!
With white on red, so crisp and clear,
The trade screen glows without a fear!
~CodeRabbit

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title "Change text color on red buttons" accurately describes a real and significant part of the changeset—specifically, the addition of foregroundColor: Colors.white to ElevatedButton styles for red-themed buttons to ensure white text on red background. The title is clear, specific, and directly related to the visible styling change in the diff. While the changeset also includes a structural change (removing conditional button text logic for the cancel button), the styling modification is a substantial part of the changes and the title appropriately highlights this. The title successfully communicates the primary visual/styling modification to a teammate reviewing the history.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix-text-color-in-red-buttons

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 528f0c3 and 5a9ca9b.

📒 Files selected for processing (1)
  • lib/features/trades/screens/trade_detail_screen.dart (3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
lib/**/*.dart

📄 CodeRabbit inference engine (CLAUDE.md)

lib/**/*.dart: Use post-frame callbacks for UI side effects (e.g., SnackBars/dialogs)
Use S.of(context).keyName for all user-facing strings (no hardcoded text)
Always use localized strings instead of hardcoded text
Pass BuildContext to methods that need localization (use S.of(context))
Check mounted before using BuildContext after async gaps
Use const constructors where possible

Name Riverpod providers as Provider or Notifier

Files:

  • lib/features/trades/screens/trade_detail_screen.dart
**/*.dart

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.dart: All code comments must be in English
Use clear, concise English for variable and function names
Maintain zero flutter analyze issues
Use latest Flutter/Dart APIs (e.g., prefer withValues() over withOpacity())
Remove unused imports and dependencies

**/*.dart: Use Dart formatter defaults (two-space indentation, trailing commas) and run flutter format before committing
Resolve all Flutter analyzer warnings (flutter analyze must be clean)

Files:

  • lib/features/trades/screens/trade_detail_screen.dart
lib/features/**

📄 CodeRabbit inference engine (AGENTS.md)

Place application feature code under lib/features//, grouped by domain

Files:

  • lib/features/trades/screens/trade_detail_screen.dart
🔇 Additional comments (2)
lib/features/trades/screens/trade_detail_screen.dart (2)

642-645: LGTM! White text improves visibility on red buttons.

The explicit foregroundColor: Colors.white ensures proper contrast against the red background (AppTheme.red1), improving readability and accessibility.


747-750: LGTM! Consistent styling ensures visibility.

The explicit foregroundColor: Colors.white on the dispute button matches the cancel button styling and ensures proper text contrast on the red background.

Comment on lines 292 to 298
widgets.add(_buildCancelButton(
context,
ref,
buttonText,
S.of(context)!.acceptCancelButton,
cancelMessage,
action,
));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Verify button text semantics for different cancel scenarios.

The button now always displays acceptCancelButton regardless of whether the user is initiating a cancel or accepting a peer's cooperative cancel request. This may create semantic confusion:

  • When the user initiates a cancel (lines 286, 289), the button text "Accept Cancel" suggests accepting rather than initiating
  • Only when accepting a peer's cancel (line 284) does "Accept Cancel" match the action

Consider using conditional button text that accurately reflects the action:

  • cancelButton or confirmCancelButton when initiating
  • acceptCancelButton when accepting a peer's cancel request

Apply this diff to restore context-appropriate button text:

+        String buttonText;
+        if (tradeState.action ==
+            actions.Action.cooperativeCancelInitiatedByPeer) {
+          buttonText = S.of(context)!.acceptCancelButton;
+        } else {
+          buttonText = S.of(context)!.cancelButton;
+        }
+
         widgets.add(_buildCancelButton(
           context,
           ref,
-          S.of(context)!.acceptCancelButton,
+          buttonText,
           cancelMessage,
           action,
         ));

Note: Ensure cancelButton exists in your localization files. If it doesn't, you may need to add it or use an appropriate alternative like confirmButton.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
In lib/features/trades/screens/trade_detail_screen.dart around lines 292 to 298,
the cancel button text is always using S.of(context)!.acceptCancelButton which
is semantically wrong for the case where the user is initiating a cancel; change
the call to choose the label conditionally: use
S.of(context)!.acceptCancelButton when handling an incoming peer cancel
acceptance, and use S.of(context)!.cancelButton (or
S.of(context)!.confirmCancelButton / S.of(context)!.confirmButton if
cancelButton is not available) when the user is initiating a cancel; update the
_buildCancelButton invocation to pass the appropriate localized string based on
the same condition used to determine the action, and add the missing
localization key if necessary.

@grunch grunch merged commit 11b90bc into main Oct 17, 2025
2 checks passed
@grunch grunch deleted the fix-text-color-in-red-buttons branch October 17, 2025 21:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant