[T3011] FIX: gifts & donations page + minor footer change

[Danielgergely]

• FIX: made donation item on donation page clickable, while keeping the download payment option separate
• FIX: added padding and uniform border radius to donation item
• FIX: added minimal padding to donation details icons
• FIX: tweaked colors (in the aim of adding more contrast) to gift packages in the gift basket
• FIX: icons in the themed button are now centered both vertically and horizontally
• FIX: aligned the icons in the footer

Gift Details page

• Added a slight margin to the icons on the details page

Before:

After:

Gift basket page

• Added uniform border radius and padding
• Tweaked background color
• Tweaked colors
• Removed left border
• Tweaked color of total

Before:

After:

• Fixed the icon alignment in the 2025 themed button (centered it vertically and horizontally)

Before:

After:

My donations page

• Added uniform border radius and padding to the donation items
• Made the child sponsorship card clickable
• Removed hard to distinguish icon and slightly adapted the text
• Removed left border (the image below shows an alternative with a '25px border left' option)

Before:

After:

(Alternate option):

Footer

• Centered the address icon vertically

Before:

After:

[gemini-code-assist]

Summary of Changes

Hello, 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 focuses on enhancing the user interface and experience across various donation-related pages and the site footer. It addresses several visual inconsistencies and improves interactivity, particularly for donation items, by refining styling, ensuring proper alignment of elements, and making donation cards clickable. The changes aim to provide a more polished and intuitive interface for users managing gifts and donations.

Highlights

• Donation Item Interactivity and Styling: Enabled clickability for donation items on the donation page, while ensuring the download payment option remains distinct. Applied consistent padding and border-radius to donation items and adjusted icon spacing for improved visual appeal.
• Gift Basket Visual Enhancements: Enhanced contrast and visual consistency for gift packages in the gift basket by tweaking colors and removing a left border, improving overall presentation.
• Icon Alignment Improvements: Centered icons within themed buttons and aligned footer icons for better visual presentation and consistency across the site.
• Sponsorship Item Template Refactoring: Refactored the 'SponsorshipDonationItem' template for improved clarity and maintainability, consolidating logic for both Compassion Survival Program (CSP) and child sponsorship items.

🧠 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

• my_compassion/static/src/css/my2_donation_item.css
  • Removed the 'border-left' property from '.donation-item-container'.
  • Added 'position: relative;' and 'z-index: 1;' to '.donation-item-container .action-button'.
• my_compassion/templates/components/my2_donation_item.xml
  • Modified 'onclick' attributes for link and event actions to include 'event.stopPropagation()'.
  • Adjusted 't-attf-class' for icons and spans to support 'large_icon' and 'font-italic' classes.
  • Updated '.donation-item-container' class to include 'position-relative', 'rounded-pill', and 'padding-pill'.
  • Introduced 'redirect_link' and 'redirect_label' variables and added a 'stretched-link' anchor tag for clickability.
  • Added comments for various sections like 'Donation item container', 'Donation details', 'Donation Title', 'Donation recipient', 'Donation edit', and 'Donation price'.
  • Added 'lead' class to the donation price div.
  • Refactored 'SponsorshipDonationItem' template to consolidate logic for CSP and non-CSP items, using new 'is_csp', 'pt', 'name', 'image', 'pictogram', and 'href' variables.
  • Added 'large_icon' and 'redirect_link'/'redirect_label' for non-CSP sponsorship items.
• my_compassion/templates/pages/my2_donation_details.xml
  • Added 'mt-1' class to 'icon-alert-circle' and 'icon-check-heart' elements for vertical alignment.
• my_compassion/templates/pages/my2_gift_package.xml
  • Updated 'price_color', 'recipient_color', and 'bg_color' variables for gift packages to 'mid-green' and 'low-eggshell' respectively.
  • Changed 'primary_button' color from 'low-green' to 'mid-green'.
  • Modified total amount container classes to 'rounded-pill' and 'padding-pill', and updated text colors to 'text-off-black'.
  • Added 'd-flex align-items-center m-0' to the total amount value div.
• theme_compassion_2025/templates/components/buttons/ThemedButton.xml
  • Added 'd-flex align-items-center justify-content-center' classes to the 'btn__icon' span for centering.
• theme_compassion_2025/views/footer.xml
  • Removed 'align-items-lg-start' from a div in the footer to align items centrally.

Activity

• No human activity has been recorded on this pull request yet.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini 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 introduces several UI improvements and fixes across the gifts and donations pages, such as making donation items clickable, adjusting padding, colors, and icon alignments. The changes are mostly in CSS and Odoo XML templates. My review identified a functional regression where button pictograms are no longer rendered, and a maintainability issue in how a URL is constructed in one of the templates. The rest of the changes look good and align with the goals described in the pull request.

[Danielgergely]

IMPORTANT: for the correct display of the donation items, the sponsorship page PR needs to be merged. the rounded-pill and border-pill css classes are defined there. This PR in isolation makes the containers look bad.