From adf252cf46c7752ddb9b731eb0b0e49d3f5b6df0 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 20 Feb 2026 15:41:13 +0100
Subject: [PATCH 01/11] [T3011] FIX: Home page UI improvements

- 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
---
 my_compassion/static/src/css/my2_dashboard.css | 11 +++++++++++
 .../templates/pages/my2_dashboard.xml          | 18 ++++--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/my_compassion/static/src/css/my2_dashboard.css b/my_compassion/static/src/css/my2_dashboard.css
index b314bc067..7a0cdd4a9 100644
--- a/my_compassion/static/src/css/my2_dashboard.css
+++ b/my_compassion/static/src/css/my2_dashboard.css
@@ -18,6 +18,7 @@
 
 .dashboard-banner h1 {
     font-family: "NeighbourSans Medium";
+    font-size: 2rem;
 }
 
 .dashboard-grid button,
@@ -25,3 +26,13 @@
     margin-top: 1.5rem;
     width: 100%;
 }
+
+@media screen and (max-width: 639px) {
+    .grid-item-container {
+        min-width: min(100%, 300px);
+    }
+
+    .grid-item-container div.pl-3 {
+        padding-left: 0!important
+    }
+}
diff --git a/my_compassion/templates/pages/my2_dashboard.xml b/my_compassion/templates/pages/my2_dashboard.xml
index 7405e1aea..772a5adaa 100644
--- a/my_compassion/templates/pages/my2_dashboard.xml
+++ b/my_compassion/templates/pages/my2_dashboard.xml
@@ -16,7 +16,7 @@ Page: My Compassion 2 Dashboard Page
 <odoo>
     <!-- DASHBOARD GRID ITEM -->
     <template id="DashboardGridItem" name="Dashboard grid item">
-        <div class="col-sm my-3 flex-grow-0">
+        <div class="col-sm my-3 flex-grow-0 grid-item-container">
             <t t-raw="0" />
         </div>
     </template>
@@ -86,10 +86,8 @@ Page: My Compassion 2 Dashboard Page
                         <t t-set="variant" t-value="'default'" />
                         <t t-set="variation" t-value="'hollow'" />
                         <t t-set="label">A new letter has arrived!</t>
-                        <t t-set="icon" t-value="'pictogram-child-focused'" />
-                        <t t-set="color" t-value="'low-green'" />
-                        <t t-set="icon_color" t-value="'low-green'" />
-                        <t t-set="text_color" t-value="'low-green'" />
+                        <t t-set="color" t-value="'low-blue'" />
+                        <t t-set="text_color" t-value="'low-blue'" />
                         <t
                             t-set="href"
                             t-value="'/my2/children/letters?year_to=2025&amp;month_from=1&amp;month_to=12&amp;sort=newest&amp;unread=true&amp;page=1'"
@@ -101,9 +99,7 @@ Page: My Compassion 2 Dashboard Page
                         <t t-set="variant" t-value="'default'" />
                         <t t-set="variation" t-value="'filled'" />
                         <t t-set="label">Write to Your sponsored child</t>
-                        <t t-set="icon" t-value="'pictogram-letter-writing'" />
                         <t t-set="color" t-value="'core-blue'" />
-                        <t t-set="icon_color" t-value="'low-yellow'" />
                         <t t-set="text_color" t-value="'pure-white'" />
                         <t t-set="href" t-value="'/my2/children/letters/new'" />
                     </t>
@@ -115,9 +111,7 @@ Page: My Compassion 2 Dashboard Page
                     <t t-set="variant" t-value="'default'" />
                     <t t-set="variation" t-value="'filled'" />
                     <t t-set="label">See my terminated sponsorships</t>
-                    <t t-set="icon" t-value="'pictogram-child-focused'" />
                     <t t-set="color" t-value="'core-blue'" />
-                    <t t-set="icon_color" t-value="'low-yellow'" />
                     <t t-set="text_color" t-value="'pure-white'" />
                     <t t-set="href" t-value="'/my2/children'" />
                 </t>
@@ -131,7 +125,7 @@ Page: My Compassion 2 Dashboard Page
                 <t t-set="image" t-value="'/theme_compassion_2025/static/src/img/snippets/s_image_text.jpg'" />
                 <t t-set="title">Give</t>
                 <t t-set="icon" t-value="'pictogram-gift-donation-general'" />
-                <t t-set="color" t-value="'high-brown'" />
+                <t t-set="color" t-value="'pure-white'" />
                 <t t-set="bg_color" t-value="'low-brown'" />
                 <t t-set="href" t-value="'/my2/gifts'" />
             </t>
@@ -140,9 +134,7 @@ Page: My Compassion 2 Dashboard Page
                     <t t-set="variant" t-value="'default'" />
                     <t t-set="variation" t-value="'filled'" />
                     <t t-set="label">My donations</t>
-                    <t t-set="icon" t-value="'pictogram-letter-writing'" />
                     <t t-set="color" t-value="'mid-brown'" />
-                    <t t-set="icon_color" t-value="'pure-white'" />
                     <t t-set="text_color" t-value="'pure-white'" />
                     <t t-set="href" t-value="'/my2/donations'" />
                 </t>
@@ -166,9 +158,7 @@ Page: My Compassion 2 Dashboard Page
                     <t t-set="variant" t-value="'default'" />
                     <t t-set="variation" t-value="'filled'" />
                     <t t-set="label">Translate a letter</t>
-                    <t t-set="icon" t-value="'pictogram-letter-writing'" />
                     <t t-set="color" t-value="'mid-green'" />
-                    <t t-set="icon_color" t-value="'low-green'" />
                     <t t-set="text_color" t-value="'pure-white'" />
                     <t t-set="href" t-value="'https://translate.compassion.ch'" />
                 </t>

From 957417a3b844789fcb5d97128a96ced2e4e6dcfb Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 20 Feb 2026 16:05:50 +0100
Subject: [PATCH 02/11] [T3011] FIX: my children page

- 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
---
 my_compassion/static/src/css/my2_children_card.css  | 13 +++++++++++++
 .../templates/components/my2_children_card.xml      |  4 ++--
 my_compassion/templates/pages/my2_children.xml      |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/my_compassion/static/src/css/my2_children_card.css b/my_compassion/static/src/css/my2_children_card.css
index 03c45a8a4..d011b4e35 100644
--- a/my_compassion/static/src/css/my2_children_card.css
+++ b/my_compassion/static/src/css/my2_children_card.css
@@ -9,3 +9,16 @@
     object-fit: cover;
     object-position: 50% 0;
 }
+
+.children-card {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.children-card > div {
+    border-radius: 25px;
+}
+
+.children-card .pending {
+    font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/my_compassion/templates/components/my2_children_card.xml b/my_compassion/templates/components/my2_children_card.xml
index a2f9dbe45..4225d8147 100644
--- a/my_compassion/templates/components/my2_children_card.xml
+++ b/my_compassion/templates/components/my2_children_card.xml
@@ -20,7 +20,7 @@
         <t t-set="sponsorship_type" t-value="sponsorship_type or 'standard'" />
         <t t-set="show_status" t-value="not show_status == False" />
         <div class="children-card text-center mb-3 mt-3">
-            <div class="p-4 d-flex flex-column align-items-center bg-high-eggshell">
+            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell">
                 <!-- Child Image -->
                 <img
                     class="rounded-circle img-fluid mb-2"
@@ -31,7 +31,7 @@
                 <div class="h2 mb-0">
                     <t t-esc="child.preferred_name" />
                 </div>
-                <div class="small" t-if="sponsorship and sponsorship.state in ('draft', 'waiting', 'mandate')">
+                <div class="pending" t-if="sponsorship and sponsorship.state in ('draft', 'waiting', 'mandate')">
                     <span
                         class="badge bg-low-yellow"
                         title="Your sponsorship is being confirmed and will become active soon"
diff --git a/my_compassion/templates/pages/my2_children.xml b/my_compassion/templates/pages/my2_children.xml
index 6efa201ef..8e8c43a62 100644
--- a/my_compassion/templates/pages/my2_children.xml
+++ b/my_compassion/templates/pages/my2_children.xml
@@ -29,7 +29,7 @@ Page: My Compassion 2 Children Page
                 <!-- ACTIVE SPONSORSHIPS CHILDREN-->
                 <div class="container-content d-flex flex-column align-items-center mt-4 mb-5">
                     <div class="w-100 d-flex flex-column">
-                        <div class="row justify-content-center align-items-stretch">
+                        <div class="row justify-content-center align-items-stretch p-0 p-sm-3">
                             <t t-foreach="active_sponsorships" t-as="sponsorship">
                                 <div class="col-12 col-md-6 col-lg-4 mb-3">
                                     <t t-call="my_compassion.my2_children_card_component">

From 755670e15b5e4415ef688e5d29a490d419f61c6c Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 20 Feb 2026 17:24:39 +0100
Subject: [PATCH 03/11] [T3011] FIX: timeline improvements

- 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
---
 .../static/src/css/child_profile_timeline.css | 20 +++++++++++++++----
 .../my2_sponsor_child_timeline_batch.xml      |  6 +++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/my_compassion/static/src/css/child_profile_timeline.css b/my_compassion/static/src/css/child_profile_timeline.css
index 7a122085a..ed6635701 100644
--- a/my_compassion/static/src/css/child_profile_timeline.css
+++ b/my_compassion/static/src/css/child_profile_timeline.css
@@ -90,14 +90,15 @@
     align-items: center;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    width: 40px;
-    height: 40px;
+    width: 50px;
+    height: 50px;
+    margin-left: -5px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 }
 .cd-timeline__img .pictogram {
-    width: 45px;
-    height: 45px;
+    width: 55px;
+    height: 55px;
 }
 @media (min-width: 64rem) {
     .cd-timeline__img {
@@ -126,6 +127,11 @@
     padding: 1.25em;
     box-shadow: 0 3px 0 hsl(205, 38%, 89%);
 }
+
+.cd-timeline__content > p.text-muted {
+    margin-bottom: 0;
+}
+
 .cd-timeline__content::before {
     content: "";
     position: absolute;
@@ -164,6 +170,12 @@
         border-left-color: hsl(0, 0%, 100%);
     }
 }
+
+.cd-timeline__date {
+    color: #11265e;
+    font-size: 16px;
+}
+
 @media (min-width: 64rem) {
     .cd-timeline__date {
         position: absolute;
diff --git a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
index d106498e3..1e04db69a 100644
--- a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
+++ b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
@@ -26,7 +26,7 @@
             <t t-if="item['model'] == 'sponsorship_gift'">
                 <div class="cd-timeline__block">
                     <t t-if="'Birthday' in item['metadata']">
-                        <div class="cd-timeline__img bg-high-pink">
+                        <div class="cd-timeline__img bg-mid-yellow">
                             <i class="pictogram pictogram-birthday-gift bg-low-black" />
                         </div>
                     </t>
@@ -120,8 +120,8 @@
             </t>
             <t t-elif="item['model'] == 'start_sponsorship'">
                 <div class="cd-timeline__block">
-                    <div class="cd-timeline__img bg-high-green">
-                        <i class="pictogram pictogram-child-sponsorship bg-low-black" />
+                    <div class="cd-timeline__img bg-mid-green">
+                        <i class="pictogram pictogram-child-sponsorship bg-pure-white" />
                     </div>
                     <div class="cd-timeline__content text-component">
                         <p class="modal-title text-core-blue">

From 67cb6e2a35fd0bb59180c05fdd7fd7464a985520 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 12:06:23 +0100
Subject: [PATCH 04/11] [T3011] FIX: letter page visibility and display
 improvements

- FIX: added background to letters
- FIX: added padding to parent for better display
---
 my_compassion/static/src/css/letter_card.css           | 8 ++++++++
 my_compassion/templates/components/my2_letter_card.xml | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/my_compassion/static/src/css/letter_card.css b/my_compassion/static/src/css/letter_card.css
index 66445c715..631da4d4f 100644
--- a/my_compassion/static/src/css/letter_card.css
+++ b/my_compassion/static/src/css/letter_card.css
@@ -107,3 +107,11 @@
     transition: transform 0.6s ease 0s;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
+
+.dropdown > button.blue {
+    color: #1d42a5
+}
+
+.dropdown > button.green {
+    color: #235339
+}
diff --git a/my_compassion/templates/components/my2_letter_card.xml b/my_compassion/templates/components/my2_letter_card.xml
index 13d8bb593..293844a8e 100644
--- a/my_compassion/templates/components/my2_letter_card.xml
+++ b/my_compassion/templates/components/my2_letter_card.xml
@@ -13,7 +13,7 @@
     <template id="my2_letter_card_component" name="Letter Card Component">
         <t t-set="child" t-value="letter.child_id" />
         <link rel="stylesheet" href="/my_compassion/static/src/css/letter_card.css" />
-        <div class="position-relative d-flex shadow-sm rounded-4 h-100">
+        <div t-attf-class="position-relative d-flex shadow rounded-4 h-100 {{'bg-high-green' if letter.direction == 'Supporter To Beneficiary' else 'bg-high-blue'}}">
             <!-- Icon at the left -->
             <div>
                 <div
@@ -53,7 +53,7 @@
                 <!-- Top row: Title (left) and Dropdown (right) -->
                 <div class="d-flex justify-content-between align-items-start mb-4">
                     <div
-                        t-attf-class="h5 #{'text-core-blue' if letter.direction != 'Supporter To Beneficiary' else ''}"
+                        t-attf-class="h5 #{'text-off-black'}"
                     >
                         <t t-if="letter.direction != 'Supporter To Beneficiary'">
                             <span>From</span>
@@ -67,7 +67,7 @@
                     <!-- Dots button & dropdown menu -->
                     <div class="dropdown">
                         <button
-                            class="btn btn-link p-0 border-0"
+                            t-attf-class="btn btn-link p-0 border-0 {{'blue' if letter.direction != 'Supporter To Beneficiary' else 'green'}}"
                             type="button"
                             t-att-id="'dropdownMenuButton' + str(letter.id)"
                             data-toggle="dropdown"
@@ -121,7 +121,7 @@
                     </div>
                 </div>
                 <!-- Letter date -->
-                <div class="mt-auto align-self-end tiny-text text-mid-grey">
+                <div class="mt-auto align-self-end tiny-text text-low-grey">
                     <span t-field="letter.create_date" t-options='{"widget": "date","format": "dd MMM. yyyy"}' />
                 </div>
             </div>

From ebb1cf7107262903d4fe9303dcdb12b05e5f6420 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 12:15:03 +0100
Subject: [PATCH 05/11] [T3011] FIX: child, donation, gifts page UI + UX
 improvements

- 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
---
 .../static/src/css/my2_donation_item.css      |   3 +-
 .../static/src/css/my2_gift_package.css       |  10 +
 .../components/my2_children_card.xml          |   5 +-
 .../components/my2_donation_item.xml          | 227 +++++++++++-------
 .../templates/pages/my2_child_letters.xml     |   4 +-
 .../templates/pages/my2_donation_details.xml  |   4 +-
 .../templates/pages/my2_gift_package.xml      |  19 +-
 .../components/buttons/ThemedButton.xml       |   2 +-
 8 files changed, 171 insertions(+), 103 deletions(-)

diff --git a/my_compassion/static/src/css/my2_donation_item.css b/my_compassion/static/src/css/my2_donation_item.css
index 64ee9a5c8..7fb227f63 100644
--- a/my_compassion/static/src/css/my2_donation_item.css
+++ b/my_compassion/static/src/css/my2_donation_item.css
@@ -1,8 +1,9 @@
 .donation-item-container {
-    border-left: 5px solid;
     container-type: inline-size;
     container-name: donation-item-container;
     font-size: 18px;
+    border-radius: 25px;
+    padding: 10px 15px;
 }
 
 .donation-item-container .thumbnail {
diff --git a/my_compassion/static/src/css/my2_gift_package.css b/my_compassion/static/src/css/my2_gift_package.css
index cce239613..2cef70401 100644
--- a/my_compassion/static/src/css/my2_gift_package.css
+++ b/my_compassion/static/src/css/my2_gift_package.css
@@ -20,3 +20,13 @@
     top: 0;
     right: 0;
 }
+
+.donation-item-container .action-button {
+    position: relative;
+    z-index: 3;
+}
+
+#gifts-total-container {
+    border-radius: 25px;
+    padding: 10px 15px
+}
diff --git a/my_compassion/templates/components/my2_children_card.xml b/my_compassion/templates/components/my2_children_card.xml
index 4225d8147..6d74f1ecb 100644
--- a/my_compassion/templates/components/my2_children_card.xml
+++ b/my_compassion/templates/components/my2_children_card.xml
@@ -19,8 +19,9 @@
         <t t-set="show_sponsor_me" t-value="show_sponsor_me or False" />
         <t t-set="sponsorship_type" t-value="sponsorship_type or 'standard'" />
         <t t-set="show_status" t-value="not show_status == False" />
-        <div class="children-card text-center mb-3 mt-3">
-            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell">
+        <div class="children-card text-center mb-3 mt-3" >
+            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell position-relative">
+                <a t-attf-href="/my2/children/{{child.id}}" class="stretched-link" aria-label="Child profile"></a>
                 <!-- Child Image -->
                 <img
                     class="rounded-circle img-fluid mb-2"
diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index c53cd7f49..e05863250 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -37,16 +37,17 @@
     <!-- DONATION ITEM BUTTON -->
     <template id="DonationItemButton" name="Donation Item Button">
         <t t-set="color" t-value="button.get('color') or 'dark-blue'" />
-        <t t-if="button.get('action') == 'link'" t-set="onclick" t-valuef="location.href='#{button.get('href')}'" />
-        <t
-            t-elif="button.get('action') == 'event'"
-            t-set="onclick"
-            t-valuef="this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
+        <t t-if="button.get('action') == 'link'"
+           t-set="onclick"
+           t-valuef="event.stopPropagation(); location.href='#{button.get('href')}'" />
+        <t t-elif="button.get('action') == 'event'"
+           t-set="onclick"
+           t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
         />
-        <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick">
-            <i t-if="button.get('icon')" t-attf-class="tiny-text icon-#{button.get('icon')} text-#{color}" />
+        <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick" style="z-index: 2;">
+            <i t-if="button.get('icon')" t-attf-class="{{'' if large_icon else 'tiny-tex'}} icon-#{button.get('icon')} text-#{color}" />
             <i t-if="button.get('pictogram')" t-attf-class="tiny-text #{button.get('pictogram')} text-#{color}" />
-            <span t-if="button.get('label')" t-attf-class="tiny-text bold text-#{color}">
+            <span t-if="button.get('label')" t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}">
                 <t t-esc="button.get('label')" />
             </span>
         </div>
@@ -72,22 +73,31 @@
                 t-attf-style="--image_url: url('#{image}');"
             />
         </t>
+        <t t-set="redirect_link" t-value="redirect_link or ''" />
+        <t t-set="redirect_label" t-value="redirect_label or ''" />
+        <!-- Donation item container -->
         <div
-            t-attf-class="donation-item-container p-2 d-flex rounded-lg bg-#{bg_color} border-#{accent_color} #{top_class}"
+            t-attf-class="donation-item-container d-flex bg-#{bg_color} border-#{accent_color} #{top_class} position-relative"
             t-attf-style="min-width: #{min_width}"
         >
+            <t t-if="redirect_link">
+                <a t-attf-href="{{redirect_link}}" class="stretched-link" t-attf-aria-label="{{redirect_label}}"></a>
+            </t>
             <div
                 t-attf-class="thumbnail responsive-lg mr-3 flex-shrink-0 rounded-lg #{not image and image_fallback_pictogram or ''}"
                 t-attf-style="--image_url: url('#{image}');"
             />
+            <!-- Donation details -->
             <t t-if="not primary_button" t-raw="small_thumbnail_content" />
             <div class="w-100 d-flex flex-column justify-content-between">
+                <!-- Donation Title -->
                 <div class="d-flex align-items-start">
                     <t t-if="primary_button" t-raw="small_thumbnail_content" />
                     <div class="flex-grow-1 d-flex flex-column">
                         <div t-attf-class="text-#{title_color} body-large bold">
                             <t t-esc="name" />
                         </div>
+                        <!-- Donation recipient -->
                         <div t-if="recipient" t-attf-class="text-#{recipient_color} body-small bold">
                             To
                             <t t-esc="recipient" />
@@ -102,11 +112,13 @@
                         </t>
                     </t>
                 </div>
+                <!-- Donation edit -->
                 <div t-attf-class="mt-2 d-flex justify-content-#{'between' if primary_button else 'end'}">
                     <t t-if="primary_button" t-call="my_compassion.DonationItemButton">
                         <t t-set="button" t-value="primary_button" />
                     </t>
-                    <div t-attf-class="text-#{price_color} ">
+                    <!-- Donation price -->
+                    <div t-attf-class="text-#{price_color} lead">
                         <t t-esc="currency_name" />
                         <t t-if="price % 1 == 0" t-set="price" t-value="'{0}.-'.format(int(price))" />
                         <t t-else="" t-set="price" t-value="'{0:.2f}'.format(price)" />
@@ -122,84 +134,129 @@
         </div>
     </template>
     <template id="SponsorshipDonationItem" name="Sponsorship Donation Item">
-        <t t-set="label_see_profile">See profile</t>
-        <t t-set="label_see_more">See more</t>
-        <t t-if="sponsorship.type == 'CSP'">
-            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
-            <t t-if="product_template">
-                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />
-                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />
-                <t t-set="csp_default_name">Compassion survival program</t>
-                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />
-                <t
-                    t-set="image_fallback_pictogram"
-                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"
-                />
-                <t t-if="product_template.is_published">
-                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />
-                    <t
-                        t-set="primary_button_data"
-                        t-value="{
-                'label': label_see_more,
-                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',
-                'action': 'link',
-                'href': '/my2/gifts/' + str(product_template.id),
-                'color': 'low-blue'
-            }"
-                    />
-                </t>
-                <t
-                    t-set="secondary_buttons_data"
-                    t-value="[
-                {
-                    'icon': 'download01',
-                    'color': 'low-blue',
-                    'action': 'link',
-                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),
-                }
-            ]"
-                />
-            </t>
-        </t>
-        <t t-else="">
-            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />
-            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />
-            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />
-            <t
-                t-set="primary_button_data"
-                t-value="{
-            'label': label_see_profile,
-            'pictogram': 'pictogram-child-sponsorship',
-            'action': 'link',
-            'href': '/my2/children/' + str(sponsorship.child_id.id),
-            'color': 'low-blue'
-        }"
-            />
-            <t
-                t-set="secondary_buttons_data"
-                t-value="[
-            {
-                'icon': 'download01',
-                'color': 'low-blue',
-                'action': 'link',
-                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),
-            }
-        ]"
-            />
-        </t>
+        <t t-set="is_csp" t-value="sponsorship.type == 'CSP'"/> <!-- is Compassion Survival Program ? -->
+        <t t-set="pt" t-value="is_csp and sponsorship.contract_line_ids[:1].product_id.product_tmpl_id"/> <!-- product template -->
+        <t t-set="name" t-value="pt.my_compassion_name or pt.thanks_name or 'Compassion survival program' if is_csp else sponsorship.child_id.preferred_name"/>
+        <t t-set="image" t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"/>
+<!--        <t t-set="pictogram" t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"/>-->
+        <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id"/> <!-- donations page or child profile page -->
+
         <t t-call="my_compassion.DonationItemComponent">
-            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />
-            <t t-set="name" t-value="displayed_title" />
-            <t t-set="image" t-value="displayed_image" />
+            <t t-set="image_fallback_pictogram" t-value="pictogram"/>
+            <t t-set="name" t-value="name" />
+            <t t-set="image" t-value="image" />
             <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
             <t t-set="price" t-value="sponsorship.total_amount" />
-            <t t-set="primary_button" t-value="primary_button_data" />
-            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />
-            <t t-set="monthly_noabbr" t-value="True" />
-            <t t-set="bg_color" t-value="'light-blue'" />
-            <t t-set="accent_color" t-value="'low-blue'" />
-            <t t-set="title_color" t-value="'low-blue'" />
-            <t t-set="price_color" t-value="'low-blue'" />
+
+            <t t-set="secondary_buttons" t-value="[{
+                'icon': 'download01',
+                'color': 'low-blue',
+                'action': 'link',
+                'href': ('/my/download/csp_bvr?csp_id=%s' % sponsorship.id) if is_csp else ('/my/download/gift_bvr?child_id=%s' % sponsorship.child_id.id),
+            }]"/>
+
+            <t t-set="monthly_noabbr" t-value="True"/>
+            <t t-set="bg_color" t-value="'light-blue'"/>
+            <t t-set="accent_color" t-value="'low-blue'"/>
+            <t t-set="title_color" t-value="'low-blue'"/>
+            <t t-set="price_color" t-value="'low-blue'"/>
+            <t t-set="large_icon" t-value="True" />
+
+            <t t-if="not is_csp">
+                <t t-set="primary_button" t-value="{
+                'label': 'Click to see profile',
+                'pictogram': pictogram,
+                'action': 'link',
+                'href': href,
+                'color': 'low-blue'
+                }" />
+                <t t-set="redirect_link" t-value="href"/>
+                <t t-set="redirect_label" t-value="'See child profile'"/>
+            </t>
         </t>
+
+<!--        <t t-set="label_see_profile">See profile</t>-->
+<!--        <t t-set="label_see_more">See more</t>-->
+<!--        <t t-set="redirect_link" t-value="''" />-->
+<!--        <t t-if="sponsorship.type == 'CSP'">-->
+<!--            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />-->
+<!--            <t t-if="product_template">-->
+<!--                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />-->
+<!--                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />-->
+<!--                <t t-set="csp_default_name">Compassion survival program</t>-->
+<!--                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />-->
+<!--                <t-->
+<!--                    t-set="image_fallback_pictogram"-->
+<!--                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"-->
+<!--                />-->
+<!--                <t t-if="product_template.is_published">-->
+<!--                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />-->
+<!--                    <t t-set="redirect_link" t-value="'/my2/gifts/' + str(product_template.id)" />-->
+<!--                    <t-->
+<!--                        t-set="primary_button_data"-->
+<!--                        t-value="{-->
+<!--                'label': label_see_more,-->
+<!--                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',-->
+<!--                'action': 'link',-->
+<!--                'href': redirect_link,-->
+<!--                'color': 'low-blue'-->
+<!--            }"-->
+<!--                    />-->
+<!--                </t>-->
+<!--                <t-->
+<!--                    t-set="secondary_buttons_data"-->
+<!--                    t-value="[-->
+<!--                {-->
+<!--                    'icon': 'download01',-->
+<!--                    'color': 'low-blue',-->
+<!--                    'action': 'link',-->
+<!--                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),-->
+<!--                }-->
+<!--            ]"-->
+<!--                />-->
+<!--            </t>-->
+<!--        </t>-->
+<!--        <t t-else="">-->
+<!--            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />-->
+<!--            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />-->
+<!--            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />-->
+<!--            <t-->
+<!--                t-set="primary_button_data"-->
+<!--                t-value="{-->
+<!--            'label': label_see_profile,-->
+<!--            'pictogram': 'pictogram-child-sponsorship',-->
+<!--            'action': 'link',-->
+<!--            'href': '/my2/children/' + str(sponsorship.child_id.id),-->
+<!--            'color': 'low-blue'-->
+<!--        }"-->
+<!--            />-->
+<!--            <t-->
+<!--                t-set="secondary_buttons_data"-->
+<!--                t-value="[-->
+<!--            {-->
+<!--                'icon': 'download01',-->
+<!--                'color': 'low-blue',-->
+<!--                'action': 'link',-->
+<!--                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),-->
+<!--            }-->
+<!--        ]"-->
+<!--            />-->
+<!--        </t>-->
+<!--        <t t-call="my_compassion.DonationItemComponent">-->
+<!--            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />-->
+<!--            <t t-set="name" t-value="displayed_title" />-->
+<!--            <t t-set="image" t-value="displayed_image" />-->
+<!--            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />-->
+<!--            <t t-set="price" t-value="sponsorship.total_amount" />-->
+<!--            <t t-set="primary_button" t-value="primary_button_data" />-->
+<!--            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />-->
+<!--            <t t-set="monthly_noabbr" t-value="True" />-->
+<!--            <t t-set="bg_color" t-value="'light-blue'" />-->
+<!--            <t t-set="accent_color" t-value="'low-blue'" />-->
+<!--            <t t-set="title_color" t-value="'low-blue'" />-->
+<!--            <t t-set="price_color" t-value="'low-blue'" />-->
+<!--            <t t-set="redirect_link" t-value="'/my2/children/' + str(sponsorship.child_id.id)"/>-->
+<!--            <t t-set="redirect_label" t-value="'See child profile'" />-->
+<!--        </t>-->
     </template>
 </odoo>
diff --git a/my_compassion/templates/pages/my2_child_letters.xml b/my_compassion/templates/pages/my2_child_letters.xml
index bc3d6143b..4a7c81c44 100644
--- a/my_compassion/templates/pages/my2_child_letters.xml
+++ b/my_compassion/templates/pages/my2_child_letters.xml
@@ -267,7 +267,7 @@
                 <!-- Letters -->
                 <t t-if="letters">
                     <div class="container-content d-flex flex-column align-items-center mt-4">
-                        <div class="w-100 d-flex flex-column">
+                        <div class="w-100 d-flex flex-column p-4">
                             <div class="row justify-content-center">
                                 <t t-foreach="letters" t-as="letter" t-foreach-index="i">
                                     <div
@@ -331,9 +331,7 @@
                             <t t-set="variant" t-value="'default'" />
                             <t t-set="variation" t-value="'filled'" />
                             <t t-set="label">Write a letter to a child</t>
-                            <t t-set="icon" t-value="'pictogram-letter-writing'" />
                             <t t-set="color" t-value="'core-blue'" />
-                            <t t-set="icon_color" t-value="'low-yellow'" />
                             <t t-set="text_color" t-value="'pure-white'" />
                             <t t-set="href" t-value="'/my2/children/letters/new'" />
                         </t>
diff --git a/my_compassion/templates/pages/my2_donation_details.xml b/my_compassion/templates/pages/my2_donation_details.xml
index b7bff7a43..1b905961c 100644
--- a/my_compassion/templates/pages/my2_donation_details.xml
+++ b/my_compassion/templates/pages/my2_donation_details.xml
@@ -48,7 +48,7 @@
                                 <div class="mt-3 ml-4 body-standard text-mid-brown">The reality...</div>
                                 <t t-foreach="product.my_compassion_impact_before_ids" t-as="line">
                                     <div class="mt-2 d-flex">
-                                        <i class="mr-2 icon-alert-circle text-mid-brown flex-shrink-0" />
+                                        <i class="mr-2 icon-alert-circle text-mid-brown flex-shrink-0 mt-1" />
                                         <t t-esc="line.description" />
                                     </div>
                                 </t>
@@ -58,7 +58,7 @@
                                 <div class="mt-3 ml-4 body-standard text-mid-green">With your help we can...</div>
                                 <t t-foreach="product.my_compassion_impact_after_ids" t-as="line">
                                     <div class="mt-2 d-flex">
-                                        <i class="mr-2 icon-check-heart text-mid-green flex-shrink-0" />
+                                        <i class="mr-2 icon-check-heart text-mid-green flex-shrink-0 mt-1" />
                                         <t t-esc="line.description" />
                                     </div>
                                 </t>
diff --git a/my_compassion/templates/pages/my2_gift_package.xml b/my_compassion/templates/pages/my2_gift_package.xml
index bdcdc3427..f8a250b1d 100644
--- a/my_compassion/templates/pages/my2_gift_package.xml
+++ b/my_compassion/templates/pages/my2_gift_package.xml
@@ -29,9 +29,9 @@
                 <t t-if="line.is_gift" t-set="recipient" t-value="line.gift_recipient_id.preferred_name" />
                 <t t-set="title_color" t-value="'low-black'" />
                 <t t-set="accent_color" t-value="'mid-green'" />
-                <t t-set="price_color" t-value="'low-green'" />
-                <t t-set="recipient_color" t-value="'low-green'" />
-                <t t-set="bg_color" t-value="'mid-eggshell'" />
+                <t t-set="price_color" t-value="'mid-green'" />
+                <t t-set="recipient_color" t-value="'mid-green'" />
+                <t t-set="bg_color" t-value="'low-eggshell'" />
                 <t t-set="price" t-value="line.price_total" />
                 <t t-set="currency_name" t-value="line.currency_id.name" />
                 <t
@@ -41,7 +41,7 @@
                 <t t-set="_txt_Edit_Details_1">Edit Details</t>
                 <t
                     t-set="primary_button"
-                    t-value="{'icon': 'edit05', 'label': _txt_Edit_Details_1, 'color': 'low-green', 'action': 'event', 'custom_event': 'donation-item:edit', 'detail': {'order_line_id': line.id}}"
+                    t-value="{'icon': 'edit05', 'label': _txt_Edit_Details_1, 'color': 'mid-green', 'action': 'event', 'custom_event': 'donation-item:edit', 'detail': {'order_line_id': line.id}}"
                 />
                 <t
                     t-set="secondary_buttons"
@@ -106,11 +106,12 @@
         </div>
         <!-- TOTAL AMOUNT -->
         <div
-            t-if="len(order.order_line) &gt;= 1"
-            class="mt-5 px-3 pt-3 pb-2 w-100 rounded-lg bg-light-green d-flex justify-content-between"
-        >
-            <div class="text-mid-green body-large bold">Total amount</div>
-            <div class="text-dark-blue body-large bold">
+                id="gifts-total-container"
+                t-if="len(order.order_line) &gt;= 1"
+                class="mt-5 w-100 bg-light-green d-flex justify-content-between"
+            >
+            <div class="text-low-green body-large bold">Total amount</div>
+            <div class="text-low-green body-large bold d-flex align-items-center m-0">
                 <t t-set="amount" t-value="order.amount_total" />
                 <t t-esc="order.currency_id.name" />
                 <t t-if="amount % 1 == 0" t-esc="int(amount)" />
diff --git a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
index fbe7a4a59..489d7b260 100644
--- a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
+++ b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
@@ -36,7 +36,7 @@
 <odoo>
     <template id="ThemedButtonComponent_Content" name="Button Content">
         <t t-if="icon">
-            <span t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color}">
+            <span t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color} d-flex align-items-center justify-content-center">
                 <i t-att-class="icon" />
             </span>
         </t>

From c922a0a37a4fdf2a73872bec07befeedeaec8ffe Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 12:19:49 +0100
Subject: [PATCH 06/11] [T3011] FIX: fixed address icon placement

- FIX: removed align-items-lg-start from the address icon to make sure all icons are in line
---
 theme_compassion_2025/views/footer.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme_compassion_2025/views/footer.xml b/theme_compassion_2025/views/footer.xml
index 122418f89..e21641e7d 100644
--- a/theme_compassion_2025/views/footer.xml
+++ b/theme_compassion_2025/views/footer.xml
@@ -19,7 +19,7 @@
                                 class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center"
                             >
                                 <div
-                                    class="py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center align-items-lg-start justify-content-center"
+                                    class="py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center justify-content-center"
                                 >
                                     <div class="mb-1 mb-lg-0 mr-lg-2" style="font-size: 1.2rem;">
                                         <i class="icon-marker-pin01 bg-low-yellow text-primary" />

From 06039aa2d25255324b4333a46694c7c0c6fa1161 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 12:21:09 +0100
Subject: [PATCH 07/11] [T3011] STYLE: pre-commit

---
 my_compassion/static/src/css/letter_card.css  |   4 +-
 .../static/src/css/my2_children_card.css      |   2 +-
 .../static/src/css/my2_dashboard.css          |   2 +-
 .../static/src/css/my2_gift_package.css       |   2 +-
 .../components/my2_children_card.xml          |   4 +-
 .../components/my2_donation_item.xml          | 249 ++++++++++--------
 .../templates/components/my2_letter_card.xml  |   8 +-
 .../templates/pages/my2_gift_package.xml      |   8 +-
 .../components/buttons/ThemedButton.xml       |   4 +-
 9 files changed, 152 insertions(+), 131 deletions(-)

diff --git a/my_compassion/static/src/css/letter_card.css b/my_compassion/static/src/css/letter_card.css
index 631da4d4f..bf7a71ae0 100644
--- a/my_compassion/static/src/css/letter_card.css
+++ b/my_compassion/static/src/css/letter_card.css
@@ -109,9 +109,9 @@
 }
 
 .dropdown > button.blue {
-    color: #1d42a5
+    color: #1d42a5;
 }
 
 .dropdown > button.green {
-    color: #235339
+    color: #235339;
 }
diff --git a/my_compassion/static/src/css/my2_children_card.css b/my_compassion/static/src/css/my2_children_card.css
index d011b4e35..161cdd3b7 100644
--- a/my_compassion/static/src/css/my2_children_card.css
+++ b/my_compassion/static/src/css/my2_children_card.css
@@ -21,4 +21,4 @@
 
 .children-card .pending {
     font-size: 1.2rem;
-}
\ No newline at end of file
+}
diff --git a/my_compassion/static/src/css/my2_dashboard.css b/my_compassion/static/src/css/my2_dashboard.css
index 7a0cdd4a9..be2aee4b9 100644
--- a/my_compassion/static/src/css/my2_dashboard.css
+++ b/my_compassion/static/src/css/my2_dashboard.css
@@ -33,6 +33,6 @@
     }
 
     .grid-item-container div.pl-3 {
-        padding-left: 0!important
+        padding-left: 0 !important;
     }
 }
diff --git a/my_compassion/static/src/css/my2_gift_package.css b/my_compassion/static/src/css/my2_gift_package.css
index 2cef70401..431763774 100644
--- a/my_compassion/static/src/css/my2_gift_package.css
+++ b/my_compassion/static/src/css/my2_gift_package.css
@@ -28,5 +28,5 @@
 
 #gifts-total-container {
     border-radius: 25px;
-    padding: 10px 15px
+    padding: 10px 15px;
 }
diff --git a/my_compassion/templates/components/my2_children_card.xml b/my_compassion/templates/components/my2_children_card.xml
index 6d74f1ecb..9a97af667 100644
--- a/my_compassion/templates/components/my2_children_card.xml
+++ b/my_compassion/templates/components/my2_children_card.xml
@@ -19,9 +19,9 @@
         <t t-set="show_sponsor_me" t-value="show_sponsor_me or False" />
         <t t-set="sponsorship_type" t-value="sponsorship_type or 'standard'" />
         <t t-set="show_status" t-value="not show_status == False" />
-        <div class="children-card text-center mb-3 mt-3" >
+        <div class="children-card text-center mb-3 mt-3">
             <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell position-relative">
-                <a t-attf-href="/my2/children/{{child.id}}" class="stretched-link" aria-label="Child profile"></a>
+                <a t-attf-href="/my2/children/{{child.id}}" class="stretched-link" aria-label="Child profile" />
                 <!-- Child Image -->
                 <img
                     class="rounded-circle img-fluid mb-2"
diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index e05863250..b56e3a2fb 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -37,17 +37,26 @@
     <!-- DONATION ITEM BUTTON -->
     <template id="DonationItemButton" name="Donation Item Button">
         <t t-set="color" t-value="button.get('color') or 'dark-blue'" />
-        <t t-if="button.get('action') == 'link'"
-           t-set="onclick"
-           t-valuef="event.stopPropagation(); location.href='#{button.get('href')}'" />
-        <t t-elif="button.get('action') == 'event'"
-           t-set="onclick"
-           t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
+        <t
+            t-if="button.get('action') == 'link'"
+            t-set="onclick"
+            t-valuef="event.stopPropagation(); location.href='#{button.get('href')}'"
+        />
+        <t
+            t-elif="button.get('action') == 'event'"
+            t-set="onclick"
+            t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
         />
         <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick" style="z-index: 2;">
-            <i t-if="button.get('icon')" t-attf-class="{{'' if large_icon else 'tiny-tex'}} icon-#{button.get('icon')} text-#{color}" />
+            <i
+                t-if="button.get('icon')"
+                t-attf-class="{{'' if large_icon else 'tiny-tex'}} icon-#{button.get('icon')} text-#{color}"
+            />
             <i t-if="button.get('pictogram')" t-attf-class="tiny-text #{button.get('pictogram')} text-#{color}" />
-            <span t-if="button.get('label')" t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}">
+            <span
+                t-if="button.get('label')"
+                t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}"
+            >
                 <t t-esc="button.get('label')" />
             </span>
         </div>
@@ -81,7 +90,7 @@
             t-attf-style="min-width: #{min_width}"
         >
             <t t-if="redirect_link">
-                <a t-attf-href="{{redirect_link}}" class="stretched-link" t-attf-aria-label="{{redirect_label}}"></a>
+                <a t-attf-href="{{redirect_link}}" class="stretched-link" t-attf-aria-label="{{redirect_label}}" />
             </t>
             <div
                 t-attf-class="thumbnail responsive-lg mr-3 flex-shrink-0 rounded-lg #{not image and image_fallback_pictogram or ''}"
@@ -134,129 +143,139 @@
         </div>
     </template>
     <template id="SponsorshipDonationItem" name="Sponsorship Donation Item">
-        <t t-set="is_csp" t-value="sponsorship.type == 'CSP'"/> <!-- is Compassion Survival Program ? -->
-        <t t-set="pt" t-value="is_csp and sponsorship.contract_line_ids[:1].product_id.product_tmpl_id"/> <!-- product template -->
-        <t t-set="name" t-value="pt.my_compassion_name or pt.thanks_name or 'Compassion survival program' if is_csp else sponsorship.child_id.preferred_name"/>
-        <t t-set="image" t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"/>
-<!--        <t t-set="pictogram" t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"/>-->
-        <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id"/> <!-- donations page or child profile page -->
-
+        <t t-set="is_csp" t-value="sponsorship.type == 'CSP'" />
+        <!-- is Compassion Survival Program ? -->
+        <t t-set="pt" t-value="is_csp and sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
+        <!-- product template -->
+        <t
+            t-set="name"
+            t-value="pt.my_compassion_name or pt.thanks_name or 'Compassion survival program' if is_csp else sponsorship.child_id.preferred_name"
+        />
+        <t
+            t-set="image"
+            t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"
+        />
+        <!--        <t t-set="pictogram" t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"/>-->
+        <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id" />
+        <!-- donations page or child profile page -->
         <t t-call="my_compassion.DonationItemComponent">
-            <t t-set="image_fallback_pictogram" t-value="pictogram"/>
+            <t t-set="image_fallback_pictogram" t-value="pictogram" />
             <t t-set="name" t-value="name" />
             <t t-set="image" t-value="image" />
             <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
             <t t-set="price" t-value="sponsorship.total_amount" />
-
-            <t t-set="secondary_buttons" t-value="[{
+            <t
+                t-set="secondary_buttons"
+                t-value="[{
                 'icon': 'download01',
                 'color': 'low-blue',
                 'action': 'link',
                 'href': ('/my/download/csp_bvr?csp_id=%s' % sponsorship.id) if is_csp else ('/my/download/gift_bvr?child_id=%s' % sponsorship.child_id.id),
-            }]"/>
-
-            <t t-set="monthly_noabbr" t-value="True"/>
-            <t t-set="bg_color" t-value="'light-blue'"/>
-            <t t-set="accent_color" t-value="'low-blue'"/>
-            <t t-set="title_color" t-value="'low-blue'"/>
-            <t t-set="price_color" t-value="'low-blue'"/>
+            }]"
+            />
+            <t t-set="monthly_noabbr" t-value="True" />
+            <t t-set="bg_color" t-value="'light-blue'" />
+            <t t-set="accent_color" t-value="'low-blue'" />
+            <t t-set="title_color" t-value="'low-blue'" />
+            <t t-set="price_color" t-value="'low-blue'" />
             <t t-set="large_icon" t-value="True" />
-
             <t t-if="not is_csp">
-                <t t-set="primary_button" t-value="{
+                <t
+                    t-set="primary_button"
+                    t-value="{
                 'label': 'Click to see profile',
                 'pictogram': pictogram,
                 'action': 'link',
                 'href': href,
                 'color': 'low-blue'
-                }" />
-                <t t-set="redirect_link" t-value="href"/>
-                <t t-set="redirect_label" t-value="'See child profile'"/>
+                }"
+                />
+                <t t-set="redirect_link" t-value="href" />
+                <t t-set="redirect_label" t-value="'See child profile'" />
             </t>
         </t>
-
-<!--        <t t-set="label_see_profile">See profile</t>-->
-<!--        <t t-set="label_see_more">See more</t>-->
-<!--        <t t-set="redirect_link" t-value="''" />-->
-<!--        <t t-if="sponsorship.type == 'CSP'">-->
-<!--            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />-->
-<!--            <t t-if="product_template">-->
-<!--                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />-->
-<!--                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />-->
-<!--                <t t-set="csp_default_name">Compassion survival program</t>-->
-<!--                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />-->
-<!--                <t-->
-<!--                    t-set="image_fallback_pictogram"-->
-<!--                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"-->
-<!--                />-->
-<!--                <t t-if="product_template.is_published">-->
-<!--                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />-->
-<!--                    <t t-set="redirect_link" t-value="'/my2/gifts/' + str(product_template.id)" />-->
-<!--                    <t-->
-<!--                        t-set="primary_button_data"-->
-<!--                        t-value="{-->
-<!--                'label': label_see_more,-->
-<!--                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',-->
-<!--                'action': 'link',-->
-<!--                'href': redirect_link,-->
-<!--                'color': 'low-blue'-->
-<!--            }"-->
-<!--                    />-->
-<!--                </t>-->
-<!--                <t-->
-<!--                    t-set="secondary_buttons_data"-->
-<!--                    t-value="[-->
-<!--                {-->
-<!--                    'icon': 'download01',-->
-<!--                    'color': 'low-blue',-->
-<!--                    'action': 'link',-->
-<!--                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),-->
-<!--                }-->
-<!--            ]"-->
-<!--                />-->
-<!--            </t>-->
-<!--        </t>-->
-<!--        <t t-else="">-->
-<!--            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />-->
-<!--            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />-->
-<!--            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />-->
-<!--            <t-->
-<!--                t-set="primary_button_data"-->
-<!--                t-value="{-->
-<!--            'label': label_see_profile,-->
-<!--            'pictogram': 'pictogram-child-sponsorship',-->
-<!--            'action': 'link',-->
-<!--            'href': '/my2/children/' + str(sponsorship.child_id.id),-->
-<!--            'color': 'low-blue'-->
-<!--        }"-->
-<!--            />-->
-<!--            <t-->
-<!--                t-set="secondary_buttons_data"-->
-<!--                t-value="[-->
-<!--            {-->
-<!--                'icon': 'download01',-->
-<!--                'color': 'low-blue',-->
-<!--                'action': 'link',-->
-<!--                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),-->
-<!--            }-->
-<!--        ]"-->
-<!--            />-->
-<!--        </t>-->
-<!--        <t t-call="my_compassion.DonationItemComponent">-->
-<!--            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />-->
-<!--            <t t-set="name" t-value="displayed_title" />-->
-<!--            <t t-set="image" t-value="displayed_image" />-->
-<!--            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />-->
-<!--            <t t-set="price" t-value="sponsorship.total_amount" />-->
-<!--            <t t-set="primary_button" t-value="primary_button_data" />-->
-<!--            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />-->
-<!--            <t t-set="monthly_noabbr" t-value="True" />-->
-<!--            <t t-set="bg_color" t-value="'light-blue'" />-->
-<!--            <t t-set="accent_color" t-value="'low-blue'" />-->
-<!--            <t t-set="title_color" t-value="'low-blue'" />-->
-<!--            <t t-set="price_color" t-value="'low-blue'" />-->
-<!--            <t t-set="redirect_link" t-value="'/my2/children/' + str(sponsorship.child_id.id)"/>-->
-<!--            <t t-set="redirect_label" t-value="'See child profile'" />-->
-<!--        </t>-->
+        <!--        <t t-set="label_see_profile">See profile</t>-->
+        <!--        <t t-set="label_see_more">See more</t>-->
+        <!--        <t t-set="redirect_link" t-value="''" />-->
+        <!--        <t t-if="sponsorship.type == 'CSP'">-->
+        <!--            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />-->
+        <!--            <t t-if="product_template">-->
+        <!--                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />-->
+        <!--                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />-->
+        <!--                <t t-set="csp_default_name">Compassion survival program</t>-->
+        <!--                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />-->
+        <!--                <t-->
+        <!--                    t-set="image_fallback_pictogram"-->
+        <!--                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"-->
+        <!--                />-->
+        <!--                <t t-if="product_template.is_published">-->
+        <!--                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />-->
+        <!--                    <t t-set="redirect_link" t-value="'/my2/gifts/' + str(product_template.id)" />-->
+        <!--                    <t-->
+        <!--                        t-set="primary_button_data"-->
+        <!--                        t-value="{-->
+        <!--                'label': label_see_more,-->
+        <!--                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',-->
+        <!--                'action': 'link',-->
+        <!--                'href': redirect_link,-->
+        <!--                'color': 'low-blue'-->
+        <!--            }"-->
+        <!--                    />-->
+        <!--                </t>-->
+        <!--                <t-->
+        <!--                    t-set="secondary_buttons_data"-->
+        <!--                    t-value="[-->
+        <!--                {-->
+        <!--                    'icon': 'download01',-->
+        <!--                    'color': 'low-blue',-->
+        <!--                    'action': 'link',-->
+        <!--                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),-->
+        <!--                }-->
+        <!--            ]"-->
+        <!--                />-->
+        <!--            </t>-->
+        <!--        </t>-->
+        <!--        <t t-else="">-->
+        <!--            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />-->
+        <!--            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />-->
+        <!--            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />-->
+        <!--            <t-->
+        <!--                t-set="primary_button_data"-->
+        <!--                t-value="{-->
+        <!--            'label': label_see_profile,-->
+        <!--            'pictogram': 'pictogram-child-sponsorship',-->
+        <!--            'action': 'link',-->
+        <!--            'href': '/my2/children/' + str(sponsorship.child_id.id),-->
+        <!--            'color': 'low-blue'-->
+        <!--        }"-->
+        <!--            />-->
+        <!--            <t-->
+        <!--                t-set="secondary_buttons_data"-->
+        <!--                t-value="[-->
+        <!--            {-->
+        <!--                'icon': 'download01',-->
+        <!--                'color': 'low-blue',-->
+        <!--                'action': 'link',-->
+        <!--                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),-->
+        <!--            }-->
+        <!--        ]"-->
+        <!--            />-->
+        <!--        </t>-->
+        <!--        <t t-call="my_compassion.DonationItemComponent">-->
+        <!--            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />-->
+        <!--            <t t-set="name" t-value="displayed_title" />-->
+        <!--            <t t-set="image" t-value="displayed_image" />-->
+        <!--            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />-->
+        <!--            <t t-set="price" t-value="sponsorship.total_amount" />-->
+        <!--            <t t-set="primary_button" t-value="primary_button_data" />-->
+        <!--            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />-->
+        <!--            <t t-set="monthly_noabbr" t-value="True" />-->
+        <!--            <t t-set="bg_color" t-value="'light-blue'" />-->
+        <!--            <t t-set="accent_color" t-value="'low-blue'" />-->
+        <!--            <t t-set="title_color" t-value="'low-blue'" />-->
+        <!--            <t t-set="price_color" t-value="'low-blue'" />-->
+        <!--            <t t-set="redirect_link" t-value="'/my2/children/' + str(sponsorship.child_id.id)"/>-->
+        <!--            <t t-set="redirect_label" t-value="'See child profile'" />-->
+        <!--        </t>-->
     </template>
 </odoo>
diff --git a/my_compassion/templates/components/my2_letter_card.xml b/my_compassion/templates/components/my2_letter_card.xml
index 293844a8e..46f4f3b62 100644
--- a/my_compassion/templates/components/my2_letter_card.xml
+++ b/my_compassion/templates/components/my2_letter_card.xml
@@ -13,7 +13,9 @@
     <template id="my2_letter_card_component" name="Letter Card Component">
         <t t-set="child" t-value="letter.child_id" />
         <link rel="stylesheet" href="/my_compassion/static/src/css/letter_card.css" />
-        <div t-attf-class="position-relative d-flex shadow rounded-4 h-100 {{'bg-high-green' if letter.direction == 'Supporter To Beneficiary' else 'bg-high-blue'}}">
+        <div
+            t-attf-class="position-relative d-flex shadow rounded-4 h-100 {{'bg-high-green' if letter.direction == 'Supporter To Beneficiary' else 'bg-high-blue'}}"
+        >
             <!-- Icon at the left -->
             <div>
                 <div
@@ -52,9 +54,7 @@
             <div class="flex-grow-1 d-flex flex-column ml-2 mr-2 mb-2 mt-4">
                 <!-- Top row: Title (left) and Dropdown (right) -->
                 <div class="d-flex justify-content-between align-items-start mb-4">
-                    <div
-                        t-attf-class="h5 #{'text-off-black'}"
-                    >
+                    <div t-attf-class="h5 #{'text-off-black'}">
                         <t t-if="letter.direction != 'Supporter To Beneficiary'">
                             <span>From</span>
                             <t t-esc="child.preferred_name" />
diff --git a/my_compassion/templates/pages/my2_gift_package.xml b/my_compassion/templates/pages/my2_gift_package.xml
index f8a250b1d..a3561fd91 100644
--- a/my_compassion/templates/pages/my2_gift_package.xml
+++ b/my_compassion/templates/pages/my2_gift_package.xml
@@ -106,10 +106,10 @@
         </div>
         <!-- TOTAL AMOUNT -->
         <div
-                id="gifts-total-container"
-                t-if="len(order.order_line) &gt;= 1"
-                class="mt-5 w-100 bg-light-green d-flex justify-content-between"
-            >
+            id="gifts-total-container"
+            t-if="len(order.order_line) &gt;= 1"
+            class="mt-5 w-100 bg-light-green d-flex justify-content-between"
+        >
             <div class="text-low-green body-large bold">Total amount</div>
             <div class="text-low-green body-large bold d-flex align-items-center m-0">
                 <t t-set="amount" t-value="order.amount_total" />
diff --git a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
index 489d7b260..707e10d55 100644
--- a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
+++ b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
@@ -36,7 +36,9 @@
 <odoo>
     <template id="ThemedButtonComponent_Content" name="Button Content">
         <t t-if="icon">
-            <span t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color} d-flex align-items-center justify-content-center">
+            <span
+                t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color} d-flex align-items-center justify-content-center"
+            >
                 <i t-att-class="icon" />
             </span>
         </t>

From a0b5f3a5ca2b68acecce7992c8df390004403d62 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 13:15:14 +0100
Subject: [PATCH 08/11] [T3011] STYLE: removed commented out code

---
 .../components/my2_donation_item.xml          | 83 -------------------
 .../templates/pages/my2_gift_package.xml      |  4 +-
 2 files changed, 2 insertions(+), 85 deletions(-)

diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index b56e3a2fb..cbaa57211 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -194,88 +194,5 @@
                 <t t-set="redirect_label" t-value="'See child profile'" />
             </t>
         </t>
-        <!--        <t t-set="label_see_profile">See profile</t>-->
-        <!--        <t t-set="label_see_more">See more</t>-->
-        <!--        <t t-set="redirect_link" t-value="''" />-->
-        <!--        <t t-if="sponsorship.type == 'CSP'">-->
-        <!--            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />-->
-        <!--            <t t-if="product_template">-->
-        <!--                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />-->
-        <!--                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />-->
-        <!--                <t t-set="csp_default_name">Compassion survival program</t>-->
-        <!--                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />-->
-        <!--                <t-->
-        <!--                    t-set="image_fallback_pictogram"-->
-        <!--                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"-->
-        <!--                />-->
-        <!--                <t t-if="product_template.is_published">-->
-        <!--                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />-->
-        <!--                    <t t-set="redirect_link" t-value="'/my2/gifts/' + str(product_template.id)" />-->
-        <!--                    <t-->
-        <!--                        t-set="primary_button_data"-->
-        <!--                        t-value="{-->
-        <!--                'label': label_see_more,-->
-        <!--                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',-->
-        <!--                'action': 'link',-->
-        <!--                'href': redirect_link,-->
-        <!--                'color': 'low-blue'-->
-        <!--            }"-->
-        <!--                    />-->
-        <!--                </t>-->
-        <!--                <t-->
-        <!--                    t-set="secondary_buttons_data"-->
-        <!--                    t-value="[-->
-        <!--                {-->
-        <!--                    'icon': 'download01',-->
-        <!--                    'color': 'low-blue',-->
-        <!--                    'action': 'link',-->
-        <!--                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),-->
-        <!--                }-->
-        <!--            ]"-->
-        <!--                />-->
-        <!--            </t>-->
-        <!--        </t>-->
-        <!--        <t t-else="">-->
-        <!--            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />-->
-        <!--            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />-->
-        <!--            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />-->
-        <!--            <t-->
-        <!--                t-set="primary_button_data"-->
-        <!--                t-value="{-->
-        <!--            'label': label_see_profile,-->
-        <!--            'pictogram': 'pictogram-child-sponsorship',-->
-        <!--            'action': 'link',-->
-        <!--            'href': '/my2/children/' + str(sponsorship.child_id.id),-->
-        <!--            'color': 'low-blue'-->
-        <!--        }"-->
-        <!--            />-->
-        <!--            <t-->
-        <!--                t-set="secondary_buttons_data"-->
-        <!--                t-value="[-->
-        <!--            {-->
-        <!--                'icon': 'download01',-->
-        <!--                'color': 'low-blue',-->
-        <!--                'action': 'link',-->
-        <!--                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),-->
-        <!--            }-->
-        <!--        ]"-->
-        <!--            />-->
-        <!--        </t>-->
-        <!--        <t t-call="my_compassion.DonationItemComponent">-->
-        <!--            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />-->
-        <!--            <t t-set="name" t-value="displayed_title" />-->
-        <!--            <t t-set="image" t-value="displayed_image" />-->
-        <!--            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />-->
-        <!--            <t t-set="price" t-value="sponsorship.total_amount" />-->
-        <!--            <t t-set="primary_button" t-value="primary_button_data" />-->
-        <!--            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />-->
-        <!--            <t t-set="monthly_noabbr" t-value="True" />-->
-        <!--            <t t-set="bg_color" t-value="'light-blue'" />-->
-        <!--            <t t-set="accent_color" t-value="'low-blue'" />-->
-        <!--            <t t-set="title_color" t-value="'low-blue'" />-->
-        <!--            <t t-set="price_color" t-value="'low-blue'" />-->
-        <!--            <t t-set="redirect_link" t-value="'/my2/children/' + str(sponsorship.child_id.id)"/>-->
-        <!--            <t t-set="redirect_label" t-value="'See child profile'" />-->
-        <!--        </t>-->
     </template>
 </odoo>
diff --git a/my_compassion/templates/pages/my2_gift_package.xml b/my_compassion/templates/pages/my2_gift_package.xml
index a3561fd91..fb3a4a72d 100644
--- a/my_compassion/templates/pages/my2_gift_package.xml
+++ b/my_compassion/templates/pages/my2_gift_package.xml
@@ -110,8 +110,8 @@
             t-if="len(order.order_line) &gt;= 1"
             class="mt-5 w-100 bg-light-green d-flex justify-content-between"
         >
-            <div class="text-low-green body-large bold">Total amount</div>
-            <div class="text-low-green body-large bold d-flex align-items-center m-0">
+            <div class="text-off-black body-large bold">Total amount</div>
+            <div class="text-off-black body-large bold d-flex align-items-center m-0">
                 <t t-set="amount" t-value="order.amount_total" />
                 <t t-esc="order.currency_id.name" />
                 <t t-if="amount % 1 == 0" t-esc="int(amount)" />

From adfc12f9ba9ff7913f7f87e32d30c8dfdc2254ae Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 15:13:34 +0100
Subject: [PATCH 09/11] [T3011] REFACTOR: simplified css and used scss
 variables

- 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
---
 .../static/src/css/child_profile_timeline.css      |  1 -
 my_compassion/static/src/css/letter_card.css       |  8 --------
 my_compassion/static/src/css/my2_children_card.css |  4 ----
 my_compassion/static/src/css/my2_dashboard.css     |  4 ----
 my_compassion/static/src/css/my2_donation_item.css |  4 ++--
 my_compassion/static/src/css/my2_gift_package.css  | 10 ----------
 .../templates/components/my2_children_card.xml     |  2 +-
 .../templates/components/my2_donation_item.xml     | 14 ++++++++------
 .../templates/components/my2_letter_card.xml       |  2 +-
 .../my2_sponsor_child_timeline_batch.xml           | 10 +++++-----
 my_compassion/templates/pages/my2_gift_package.xml |  3 +--
 .../static/src/scss/base/_borders.scss             |  8 ++++++++
 12 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/my_compassion/static/src/css/child_profile_timeline.css b/my_compassion/static/src/css/child_profile_timeline.css
index ed6635701..44f9732fe 100644
--- a/my_compassion/static/src/css/child_profile_timeline.css
+++ b/my_compassion/static/src/css/child_profile_timeline.css
@@ -172,7 +172,6 @@
 }
 
 .cd-timeline__date {
-    color: #11265e;
     font-size: 16px;
 }
 
diff --git a/my_compassion/static/src/css/letter_card.css b/my_compassion/static/src/css/letter_card.css
index bf7a71ae0..66445c715 100644
--- a/my_compassion/static/src/css/letter_card.css
+++ b/my_compassion/static/src/css/letter_card.css
@@ -107,11 +107,3 @@
     transition: transform 0.6s ease 0s;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
-
-.dropdown > button.blue {
-    color: #1d42a5;
-}
-
-.dropdown > button.green {
-    color: #235339;
-}
diff --git a/my_compassion/static/src/css/my2_children_card.css b/my_compassion/static/src/css/my2_children_card.css
index 161cdd3b7..01f800449 100644
--- a/my_compassion/static/src/css/my2_children_card.css
+++ b/my_compassion/static/src/css/my2_children_card.css
@@ -15,10 +15,6 @@
     margin: 0 auto;
 }
 
-.children-card > div {
-    border-radius: 25px;
-}
-
 .children-card .pending {
     font-size: 1.2rem;
 }
diff --git a/my_compassion/static/src/css/my2_dashboard.css b/my_compassion/static/src/css/my2_dashboard.css
index be2aee4b9..8f753ebfd 100644
--- a/my_compassion/static/src/css/my2_dashboard.css
+++ b/my_compassion/static/src/css/my2_dashboard.css
@@ -31,8 +31,4 @@
     .grid-item-container {
         min-width: min(100%, 300px);
     }
-
-    .grid-item-container div.pl-3 {
-        padding-left: 0 !important;
-    }
 }
diff --git a/my_compassion/static/src/css/my2_donation_item.css b/my_compassion/static/src/css/my2_donation_item.css
index 7fb227f63..cc53d1a14 100644
--- a/my_compassion/static/src/css/my2_donation_item.css
+++ b/my_compassion/static/src/css/my2_donation_item.css
@@ -2,8 +2,6 @@
     container-type: inline-size;
     container-name: donation-item-container;
     font-size: 18px;
-    border-radius: 25px;
-    padding: 10px 15px;
 }
 
 .donation-item-container .thumbnail {
@@ -17,6 +15,8 @@
 
 .donation-item-container .action-button {
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 .donation-item-container .action-button:hover span {
diff --git a/my_compassion/static/src/css/my2_gift_package.css b/my_compassion/static/src/css/my2_gift_package.css
index 431763774..cce239613 100644
--- a/my_compassion/static/src/css/my2_gift_package.css
+++ b/my_compassion/static/src/css/my2_gift_package.css
@@ -20,13 +20,3 @@
     top: 0;
     right: 0;
 }
-
-.donation-item-container .action-button {
-    position: relative;
-    z-index: 3;
-}
-
-#gifts-total-container {
-    border-radius: 25px;
-    padding: 10px 15px;
-}
diff --git a/my_compassion/templates/components/my2_children_card.xml b/my_compassion/templates/components/my2_children_card.xml
index 9a97af667..1b39d8fb4 100644
--- a/my_compassion/templates/components/my2_children_card.xml
+++ b/my_compassion/templates/components/my2_children_card.xml
@@ -20,7 +20,7 @@
         <t t-set="sponsorship_type" t-value="sponsorship_type or 'standard'" />
         <t t-set="show_status" t-value="not show_status == False" />
         <div class="children-card text-center mb-3 mt-3">
-            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell position-relative">
+            <div class="p-4 d-flex flex-column align-items-center bg-low-eggshell position-relative rounded-pill">
                 <a t-attf-href="/my2/children/{{child.id}}" class="stretched-link" aria-label="Child profile" />
                 <!-- Child Image -->
                 <img
diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index cbaa57211..274371c28 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -47,12 +47,11 @@
             t-set="onclick"
             t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
         />
-        <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick" style="z-index: 2;">
+        <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick">
             <i
                 t-if="button.get('icon')"
-                t-attf-class="{{'' if large_icon else 'tiny-tex'}} icon-#{button.get('icon')} text-#{color}"
+                t-attf-class="{{'' if large_icon else 'tiny-text'}} icon-#{button.get('icon')} text-#{color}"
             />
-            <i t-if="button.get('pictogram')" t-attf-class="tiny-text #{button.get('pictogram')} text-#{color}" />
             <span
                 t-if="button.get('label')"
                 t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}"
@@ -86,7 +85,7 @@
         <t t-set="redirect_label" t-value="redirect_label or ''" />
         <!-- Donation item container -->
         <div
-            t-attf-class="donation-item-container d-flex bg-#{bg_color} border-#{accent_color} #{top_class} position-relative"
+            t-attf-class="donation-item-container d-flex bg-#{bg_color} border-#{accent_color} #{top_class} position-relative rounded-pill padding-pill"
             t-attf-style="min-width: #{min_width}"
         >
             <t t-if="redirect_link">
@@ -155,13 +154,16 @@
             t-set="image"
             t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"
         />
-        <!--        <t t-set="pictogram" t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"/>-->
+        <t
+            t-set="pictogram"
+            t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"
+        />
         <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id" />
         <!-- donations page or child profile page -->
         <t t-call="my_compassion.DonationItemComponent">
             <t t-set="image_fallback_pictogram" t-value="pictogram" />
             <t t-set="name" t-value="name" />
-            <t t-set="image" t-value="image" />
+            <t t-set="image" t-value="image if not is_csp else ''" />
             <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
             <t t-set="price" t-value="sponsorship.total_amount" />
             <t
diff --git a/my_compassion/templates/components/my2_letter_card.xml b/my_compassion/templates/components/my2_letter_card.xml
index 46f4f3b62..2efd88d15 100644
--- a/my_compassion/templates/components/my2_letter_card.xml
+++ b/my_compassion/templates/components/my2_letter_card.xml
@@ -67,7 +67,7 @@
                     <!-- Dots button & dropdown menu -->
                     <div class="dropdown">
                         <button
-                            t-attf-class="btn btn-link p-0 border-0 {{'blue' if letter.direction != 'Supporter To Beneficiary' else 'green'}}"
+                            t-attf-class="btn btn-link p-0 border-0 {{'text-low-blue' if letter.direction != 'Supporter To Beneficiary' else 'text-low-green'}}"
                             type="button"
                             t-att-id="'dropdownMenuButton' + str(letter.id)"
                             data-toggle="dropdown"
diff --git a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
index 1e04db69a..9428365ca 100644
--- a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
+++ b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
@@ -51,7 +51,7 @@
                             </p>
                         </t>
                         <div class="flex justify-between items-center">
-                            <span class="cd-timeline__date">
+                            <span class="cd-timeline__date text-dark-blue">
                                 <t t-esc="item['event_date']" t-options='{"widget": "date"}' />
                             </span>
                         </div>
@@ -86,7 +86,7 @@
                             </p>
                         </t>
                         <div class="flex justify-between items-center">
-                            <span class="cd-timeline__date">
+                            <span class="cd-timeline__date text-dark-blue">
                                 <t t-esc="item['event_date']" t-options='{"widget": "date"}' />
                             </span>
                         </div>
@@ -111,7 +111,7 @@
                             <t t-esc="item['title']" />
                         </p>
                         <div class="flex justify-between items-center">
-                            <span class="cd-timeline__date">
+                            <span class="cd-timeline__date text-dark-blue">
                                 <t t-esc="item['event_date']" t-options='{"widget": "date"}' />
                             </span>
                         </div>
@@ -128,7 +128,7 @@
                             <t t-esc="item['title']" />
                         </p>
                         <div class="flex justify-between items-center">
-                            <span class="cd-timeline__date">
+                            <span class="cd-timeline__date text-dark-blue">
                                 <t t-esc="item['event_date']" t-options='{"widget": "date"}' />
                             </span>
                         </div>
@@ -145,7 +145,7 @@
                             <t t-esc="item['title']" />
                         </p>
                         <div class="flex justify-between items-center">
-                            <span class="cd-timeline__date">
+                            <span class="cd-timeline__date text-dark-blue">
                                 <t t-esc="item['event_date']" t-options='{"widget": "date"}' />
                             </span>
                         </div>
diff --git a/my_compassion/templates/pages/my2_gift_package.xml b/my_compassion/templates/pages/my2_gift_package.xml
index fb3a4a72d..67dbbd458 100644
--- a/my_compassion/templates/pages/my2_gift_package.xml
+++ b/my_compassion/templates/pages/my2_gift_package.xml
@@ -106,9 +106,8 @@
         </div>
         <!-- TOTAL AMOUNT -->
         <div
-            id="gifts-total-container"
             t-if="len(order.order_line) &gt;= 1"
-            class="mt-5 w-100 bg-light-green d-flex justify-content-between"
+            class="mt-5 w-100 bg-light-green d-flex justify-content-between rounded-pill padding-pill"
         >
             <div class="text-off-black body-large bold">Total amount</div>
             <div class="text-off-black body-large bold d-flex align-items-center m-0">
diff --git a/theme_compassion_2025/static/src/scss/base/_borders.scss b/theme_compassion_2025/static/src/scss/base/_borders.scss
index 222bab2ca..12751ac9e 100644
--- a/theme_compassion_2025/static/src/scss/base/_borders.scss
+++ b/theme_compassion_2025/static/src/scss/base/_borders.scss
@@ -31,3 +31,11 @@
 .rounded-5 {
   border-radius: 1rem !important;
 }
+
+.rounded-pill {
+  border-radius: 25px !important;
+}
+
+.padding-pill {
+  padding: 10px 15px !important;
+}

From af029e156ff5031dd85d2e24152dc4146e8760b0 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Mon, 23 Feb 2026 15:40:49 +0100
Subject: [PATCH 10/11] [T3011] FIX: missed file commit

---
 theme_compassion_2025/templates/components/Vignette.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme_compassion_2025/templates/components/Vignette.xml b/theme_compassion_2025/templates/components/Vignette.xml
index 7dc63abcc..423f70752 100644
--- a/theme_compassion_2025/templates/components/Vignette.xml
+++ b/theme_compassion_2025/templates/components/Vignette.xml
@@ -32,7 +32,7 @@
                         t-attf-class="card-body h-25 py-2 flex-grow-0 d-flex bg-#{bg_color} #{learn_more_text and 'rounded-0' or ''}"
                     >
                         <div t-attf-class="d-flex flex-column justify-content-center flex-grow-1">
-                            <div class="pl-3">
+                            <div class="pl-0 pl-sm-3">
                                 <h3 t-attf-class="card-title m-0 text-#{color}">
                                     <t t-raw="title" />
                                 </h3>

From 999d4b31ea36ab8db49e15ca6d457bc9b8b012fa Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Thu, 26 Feb 2026 16:21:36 +0100
Subject: [PATCH 11/11] [T3011] FIX: dashboard and icon color changes reverted

- 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
---
 .../components/my2_sponsor_child_timeline_batch.xml         | 6 +++---
 my_compassion/templates/pages/my2_dashboard.xml             | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
index 9428365ca..dd55aafa9 100644
--- a/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
+++ b/my_compassion/templates/components/my2_sponsor_child_timeline_batch.xml
@@ -26,7 +26,7 @@
             <t t-if="item['model'] == 'sponsorship_gift'">
                 <div class="cd-timeline__block">
                     <t t-if="'Birthday' in item['metadata']">
-                        <div class="cd-timeline__img bg-mid-yellow">
+                        <div class="cd-timeline__img bg-high-pink">
                             <i class="pictogram pictogram-birthday-gift bg-low-black" />
                         </div>
                     </t>
@@ -120,8 +120,8 @@
             </t>
             <t t-elif="item['model'] == 'start_sponsorship'">
                 <div class="cd-timeline__block">
-                    <div class="cd-timeline__img bg-mid-green">
-                        <i class="pictogram pictogram-child-sponsorship bg-pure-white" />
+                    <div class="cd-timeline__img bg-high-green">
+                        <i class="pictogram pictogram-child-sponsorship bg-low-black" />
                     </div>
                     <div class="cd-timeline__content text-component">
                         <p class="modal-title text-core-blue">
diff --git a/my_compassion/templates/pages/my2_dashboard.xml b/my_compassion/templates/pages/my2_dashboard.xml
index 772a5adaa..a7c377999 100644
--- a/my_compassion/templates/pages/my2_dashboard.xml
+++ b/my_compassion/templates/pages/my2_dashboard.xml
@@ -125,7 +125,7 @@ Page: My Compassion 2 Dashboard Page
                 <t t-set="image" t-value="'/theme_compassion_2025/static/src/img/snippets/s_image_text.jpg'" />
                 <t t-set="title">Give</t>
                 <t t-set="icon" t-value="'pictogram-gift-donation-general'" />
-                <t t-set="color" t-value="'pure-white'" />
+                <t t-set="color" t-value="'high-brown'" />
                 <t t-set="bg_color" t-value="'low-brown'" />
                 <t t-set="href" t-value="'/my2/gifts'" />
             </t>