Fix Mistake Popup visibility on dark mode #82

[SamuelWakoli]

This commit aims to fix and improve accessibility when the app is in Dark mode;

Light Mode:

Dark Mode:

[gemini-code-assist]

Summary of Changes

Hello @SamuelWakoli, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical accessibility issue in dark mode by making the mistake popup's colors theme-aware. By switching from hardcoded colors to using the theme's color scheme, the popup's background, shadow, and text will now render correctly and be readable in both light and dark themes, as demonstrated by the provided screenshots.

Highlights

• Dark Mode Visibility: The primary goal is to fix the visibility issues of the mistake popup when the application is running in dark mode. The current implementation uses fixed colors that are not suitable for dark themes, making the popup content difficult to read.
• Theme-Aware Colors: Updated the popup's background, shadow, and text colors to utilize the application's Theme.of(context).colorScheme. This ensures that the colors automatically adapt based on the current theme (light or dark), improving accessibility and visual consistency.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configureGemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request updates the mistake popup to support dark mode by using theme-based colors instead of hardcoded ones. The recommendation is to consider using Flutter's standard withOpacity() method for color opacity adjustments to improve code clarity and adherence to framework conventions.

[SamuelWakoli]

Since Flutter version 3.27.0, withOpacity is deprecated;

Reference: https://stackoverflow.com/questions/79284946/why-is-withopacity-deprecated-in-flutter-3-27-0-and-what-is-its-recommended-rep

[illia-romanenko]

@andrew-bekhiet-solid - is it ok to merge now?

[andrew-bekhiet-solid]

Yes LGTM

[illia-romanenko]

Thanks @SamuelWakoli and @andrew-bekhiet-solid!

[SamuelWakoli]

Thank you all for the review 🙏🏾