Conversation
- FIX: increased the size of the MyCompassion text - FIX: the vignettes now scale properly between mobile and desktop - FIX: removed small hard-to-view icons from call to action buttons - FIX: changed new letter button from low-green to low-blue (to match vignette and main action button color) - FIX: changed give text and icon color to pure-white
- FIX: changed bg color to low-eggshell - FIX: increased size of pending indicator (was too small and difficult to read) - FIX: added max-size to cards with auto margin - FIX: added padding to parent container
- FIX: increased icon size - FIX: removed margin from gift price - FIX: changed date color and increased its size - FIX: changed birthday and start sponsorship icon colors
- FIX: added background to letters - FIX: added padding to parent for better display
- FIX: added uniform border radius and padding to donation item container - FIX: added uniform border radius and padding to gifts total container - FIX: child profile card is now clickable - FIX: donation item is now clickable (optional) while making sure that the secondary link is doesn't propagate the click event to the parent and executes separate action - REFACTOR: greatly simplified SponsorhipDonationItem - FIX: removed icon from write a letter to a child button - FIX: added top margin to donation detail icons - FIX: tweaked colors of gift package items - FIX: icons in the themed button are now centered vertically and horizontally
- FIX: removed align-items-lg-start from the address icon to make sure all icons are in line
Summary of ChangesHello @Danielgergely, I'm Gemini Code Assist1! 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 delivers a comprehensive set of visual and user experience improvements across various pages of the MyCompassion 2 interface. The changes aim to enhance readability, improve responsiveness, standardize design elements like borders and padding, and refine interactive components such as clickable cards and button aesthetics. The overall impact is a more polished, consistent, and user-friendly application. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe 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 by creating a comment using either
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 Limitations & Feedback Gemini Code Assist 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a wide range of visual improvements across the MyCompassion portal, enhancing the user interface and experience, particularly on mobile devices. The changes are well-implemented, focusing on better responsiveness, consistent styling, and improved component behaviors like making entire cards clickable.
I've identified a couple of critical issues: a typo in a CSS class name and the use of an undefined variable in a template, both of which will likely cause rendering errors. Additionally, I've provided several recommendations of 'medium' severity to improve code maintainability, such as replacing hardcoded CSS values with variables from your design system and avoiding the use of !important where possible. Addressing these points will help ensure the long-term quality and consistency of the codebase.
- REFACTOR: removed custom css styling and utilized new scss classes whenever possible - FIX: fixed incorrect default image for csp donation image - FEAT: added two new classes to _borders.scss
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a wide range of visual improvements across the application, enhancing user experience and modernizing the interface. The changes are well-described and align with the provided before/after screenshots. Key improvements include better responsiveness, updated color schemes, consistent styling with uniform padding and border-radius, and making larger areas clickable for better mobile usability. The refactoring of the SponsorshipDonationItem template is particularly noteworthy, as it significantly improves code readability and maintainability by reducing duplication. Overall, this is a solid set of enhancements. I have one minor suggestion for a button label to make it more concise.
There was a problem hiding this comment.
@Danielgergely Thanks a ton for all of these propositions!
There are some really solid UX improvements in here! Only a few doesn't respect Compassion's design guideline
Concerned propositions that should be rework, or removed: Dashboard Cards, Tweaked the colors of the birthday and start sponsorship icons). To ensure that it respect Compassion's design regarding the colors, you can refer to this document in our Figma (present on top left)
And I have to say, it's a bit hard to review so much changes in one PR, i would be very thankful if you can split those changes by grouping them in different PR's (e.g., 1. Global SCSS/Buttons, 2. Dashboard, 3. Donations/Gifts, 4. Timeline/Children, 5. Letters), and you can refer all of them to the ticket T3011.
Also, make sure that all changes follows a mobile first approach, a hard to distinguish icon on desktop may be beautiful on mobile ;)
- FIX: timeline icons now use the original colors (high-pink, high-green + low-black) - FIX: donation card text and icon use the original high-brown color
|
I will close this PR because the changes have been moved to 5 different smaller ones for better reviewability:
|
2 participants
A lots of small changes, so bear with me :)
Home Page
### Title
Before:
After:
Dashboard Cards
Before:
After:
My Sponsorships page
Before:
After:
Child page
Before:
After:
Before:
After:
Before:
After:
Letters page
Before:
After:
Before:
After:
Gift Details page
Before:
After:
Gift basket page
Before:
After:
Before:
After:
My donations page
Before:
After:
(Alternate option):
Footer
Before:
After: