From 3cc5d6b655c5dc4389f51a588d374dcc3b2bb691 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Sun, 22 Sep 2024 17:38:16 +0200
Subject: [PATCH] [FIX] theme_*: fix `s_big_number` wrong implementation

*: anelusia, artists, avantgarde, aviato, beauty, bewise, bistro,
bookstore, buzzy, clean, cobalt, enark, graphene, kea, kiddo, loftspace,
monglia, nano, notes, odoo_experts, orchid, paptic, real_estate,
treehouse, vehicle, yes, zap

This commit aims to fix a wrong implementation of gradients on the
`s_big_number` snippet within the context of the web editor.

Prior to this commit, the `s_big_number` snippet was using a gradient
composed of the right color, but being declared as `RGB` values.

While this is working as expected and looking like it uses the right
`--o-color-*`, it's indeed working with the specific color applied in
first place. If a user changes the color palette of the website, the
snippet will look terrible as it doesn't adapt to the new palette.

This commit fixes the issue by using the right implementation with CSS
variables.

It also reviews a wrong structure using `<div>` while it should use the
right html tag.

task-4202371

closes odoo/design-themes#930

Related: odoo/odoo#180983
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
---
 theme_anelusia/views/snippets/s_big_number.xml     | 6 +++---
 theme_artists/views/snippets/s_big_number.xml      | 8 ++++----
 theme_avantgarde/views/customizations.xml          | 6 +++---
 theme_aviato/views/snippets/s_big_number.xml       | 8 ++++----
 theme_beauty/views/snippets/s_big_number.xml       | 8 ++++----
 theme_bewise/views/customizations.xml              | 6 +++---
 theme_bistro/views/snippets/s_big_number.xml       | 6 +++---
 theme_bookstore/views/snippets/s_big_number.xml    | 2 +-
 theme_buzzy/views/snippets/s_big_number.xml        | 5 +----
 theme_clean/views/snippets/s_big_number.xml        | 5 +----
 theme_cobalt/views/customizations.xml              | 2 +-
 theme_enark/views/snippets/s_big_number.xml        | 8 ++++----
 theme_graphene/views/customizations.xml            | 5 +----
 theme_kea/views/snippets/s_big_number.xml          | 4 ++--
 theme_kiddo/views/snippets/s_big_number.xml        | 4 ++--
 theme_loftspace/views/snippets/s_big_number.xml    | 6 +++---
 theme_monglia/views/customizations.xml             | 8 ++++----
 theme_nano/views/snippets/s_big_number.xml         | 6 +++---
 theme_notes/views/snippets/s_big_number.xml        | 6 +++---
 theme_odoo_experts/views/snippets/s_big_number.xml | 4 ++--
 theme_orchid/views/snippets/s_big_number.xml       | 4 ++--
 theme_paptic/views/customizations.xml              | 6 +++---
 theme_real_estate/views/snippets/s_big_number.xml  | 6 +++---
 theme_treehouse/views/snippets/s_big_number.xml    | 6 +++---
 theme_vehicle/views/customizations.xml             | 6 +++---
 theme_yes/views/snippets/s_big_number.xml          | 6 +++---
 theme_zap/views/snippets/s_big_number.xml          | 4 ++--
 27 files changed, 71 insertions(+), 80 deletions(-)

diff --git a/theme_anelusia/views/snippets/s_big_number.xml b/theme_anelusia/views/snippets/s_big_number.xml
index 4fd3a4f50..97d4f0b54 100644
--- a/theme_anelusia/views/snippets/s_big_number.xml
+++ b/theme_anelusia/views/snippets/s_big_number.xml
@@ -13,12 +13,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 25%, rgb(222, 222, 222) 80%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(15deg, var(--o-color-1) 25%, var(--o-color-5) 100%);">
             100+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy customers
     </xpath>
 </template>
diff --git a/theme_artists/views/snippets/s_big_number.xml b/theme_artists/views/snippets/s_big_number.xml
index c473da6f0..b43940d64 100644
--- a/theme_artists/views/snippets/s_big_number.xml
+++ b/theme_artists/views/snippets/s_big_number.xml
@@ -13,15 +13,15 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(165, 78, 223) 8%, rgb(222, 222, 222) 80%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 25%, var(--o-color-4) 90%);">
             250+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         songs released
     </xpath>
 </template>
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index b4968e4c7..2c27a081f 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -603,12 +603,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(56, 60, 214) 0%, rgb(255, 255, 255) 65%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">
             50+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         projects shipped
     </xpath>
 </template>
diff --git a/theme_aviato/views/snippets/s_big_number.xml b/theme_aviato/views/snippets/s_big_number.xml
index b01ba540a..99d24ef84 100644
--- a/theme_aviato/views/snippets/s_big_number.xml
+++ b/theme_aviato/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(244, 168, 26) 0%, rgb(222, 222, 222) 58%);">100+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">100+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         destinations available
     </xpath>
 </template>
diff --git a/theme_beauty/views/snippets/s_big_number.xml b/theme_beauty/views/snippets/s_big_number.xml
index 4b1246c77..7efefd07c 100644
--- a/theme_beauty/views/snippets/s_big_number.xml
+++ b/theme_beauty/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font style="color: rgb(165, 35, 91);">200+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font style="color: var(--o-color-1)">200+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy customers
     </xpath>
 </template>
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index 3e40c87d9..a5624efb4 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -907,10 +907,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 0%, rgb(222, 222, 222) 56%);">60+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">60+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         academic programs available
     </xpath>
 </template>
diff --git a/theme_bistro/views/snippets/s_big_number.xml b/theme_bistro/views/snippets/s_big_number.xml
index 4d505df4d..93f872545 100644
--- a/theme_bistro/views/snippets/s_big_number.xml
+++ b/theme_bistro/views/snippets/s_big_number.xml
@@ -13,14 +13,14 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         350+
     </xpath>
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" remove="font-size: 10.75rem;" add="font-size: 7.75rem;" separator=";"/>
         350+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy guests served
     </xpath>
 </template>
diff --git a/theme_bookstore/views/snippets/s_big_number.xml b/theme_bookstore/views/snippets/s_big_number.xml
index ff93e20ee..460361c5e 100644
--- a/theme_bookstore/views/snippets/s_big_number.xml
+++ b/theme_bookstore/views/snippets/s_big_number.xml
@@ -13,7 +13,7 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_buzzy/views/snippets/s_big_number.xml b/theme_buzzy/views/snippets/s_big_number.xml
index 57ad28177..70861c30b 100644
--- a/theme_buzzy/views/snippets/s_big_number.xml
+++ b/theme_buzzy/views/snippets/s_big_number.xml
@@ -14,12 +14,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 </odoo>
diff --git a/theme_clean/views/snippets/s_big_number.xml b/theme_clean/views/snippets/s_big_number.xml
index 57ad28177..70861c30b 100644
--- a/theme_clean/views/snippets/s_big_number.xml
+++ b/theme_clean/views/snippets/s_big_number.xml
@@ -14,12 +14,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 </odoo>
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index f55f2c58b..b2e89c76b 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -575,7 +575,7 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_enark/views/snippets/s_big_number.xml b/theme_enark/views/snippets/s_big_number.xml
index f0ae2d9e5..9b2cd036c 100644
--- a/theme_enark/views/snippets/s_big_number.xml
+++ b/theme_enark/views/snippets/s_big_number.xml
@@ -4,20 +4,20 @@
 <template id="s_big_number" inherit_id="website.s_big_number">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/03"}</attribute>
+        <attribute name="data-oe-shape-data">"shape":"web_editor/Rainy/09_001"</attribute>
         <attribute name="class" add="o_cc1" remove="o_cc5" separator=" "/>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
-        <div class="o_we_shape o_web_editor_Bold_03" style="background-image: url('/web_editor/shape/web_editor/Bold/03.svg?c1=o-color-3&amp;c3=o-color-3&amp;c5=o-color-3&amp;');"/>
+        <div class="o_we_shape o_web_editor_Rainy_09_001"/>
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         projects shipped
     </xpath>
 </template>
diff --git a/theme_graphene/views/customizations.xml b/theme_graphene/views/customizations.xml
index b3cbb7afb..d44ec14f7 100644
--- a/theme_graphene/views/customizations.xml
+++ b/theme_graphene/views/customizations.xml
@@ -587,12 +587,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 <!-- ===== WAVY GRID ======== -->
diff --git a/theme_kea/views/snippets/s_big_number.xml b/theme_kea/views/snippets/s_big_number.xml
index be97bb0af..24f5c3b39 100644
--- a/theme_kea/views/snippets/s_big_number.xml
+++ b/theme_kea/views/snippets/s_big_number.xml
@@ -14,10 +14,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_kiddo/views/snippets/s_big_number.xml b/theme_kiddo/views/snippets/s_big_number.xml
index 253816c78..dffa5a4b8 100644
--- a/theme_kiddo/views/snippets/s_big_number.xml
+++ b/theme_kiddo/views/snippets/s_big_number.xml
@@ -14,10 +14,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         families trusted us
     </xpath>
 </template>
diff --git a/theme_loftspace/views/snippets/s_big_number.xml b/theme_loftspace/views/snippets/s_big_number.xml
index 5145e9006..b5afbbaf3 100644
--- a/theme_loftspace/views/snippets/s_big_number.xml
+++ b/theme_loftspace/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         250+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index ddb1e1447..94bc3d6db 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -729,15 +729,15 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(237, 7, 104) 0%, rgb(222, 222, 222) 59%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 75%);">
             250+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         events organized
     </xpath>
 </template>
diff --git a/theme_nano/views/snippets/s_big_number.xml b/theme_nano/views/snippets/s_big_number.xml
index 8e708a329..041827ffd 100644
--- a/theme_nano/views/snippets/s_big_number.xml
+++ b/theme_nano/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         250+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_notes/views/snippets/s_big_number.xml b/theme_notes/views/snippets/s_big_number.xml
index 95ce9c048..981e4b67b 100644
--- a/theme_notes/views/snippets/s_big_number.xml
+++ b/theme_notes/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         20M
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         Monthly listeners on streaming platforms
     </xpath>
 </template>
diff --git a/theme_odoo_experts/views/snippets/s_big_number.xml b/theme_odoo_experts/views/snippets/s_big_number.xml
index b91afeddf..c1af6c440 100644
--- a/theme_odoo_experts/views/snippets/s_big_number.xml
+++ b/theme_odoo_experts/views/snippets/s_big_number.xml
@@ -12,10 +12,10 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_orchid/views/snippets/s_big_number.xml b/theme_orchid/views/snippets/s_big_number.xml
index 95ffdb757..30f028ffe 100644
--- a/theme_orchid/views/snippets/s_big_number.xml
+++ b/theme_orchid/views/snippets/s_big_number.xml
@@ -13,10 +13,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         50+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         varieties of flowers to choose from
     </xpath>
 </template>
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index f6296c5cb..12b520239 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -675,13 +675,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         85%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customers satisfaction
     </xpath>
 </template>
diff --git a/theme_real_estate/views/snippets/s_big_number.xml b/theme_real_estate/views/snippets/s_big_number.xml
index 289899298..0730e40ba 100644
--- a/theme_real_estate/views/snippets/s_big_number.xml
+++ b/theme_real_estate/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         85%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customers satisfaction
     </xpath>
 </template>
diff --git a/theme_treehouse/views/snippets/s_big_number.xml b/theme_treehouse/views/snippets/s_big_number.xml
index cc6141807..0b7353830 100644
--- a/theme_treehouse/views/snippets/s_big_number.xml
+++ b/theme_treehouse/views/snippets/s_big_number.xml
@@ -13,13 +13,13 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         1,250
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         trees planted since last year
     </xpath>
 </template>
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index a4d8f4f7c..c907c7929 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -717,12 +717,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 0%, rgb(222, 222, 222) 49%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-5) 0%, var(--o-color-4) 90%);">
             87%
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customer satisfaction
     </xpath>
 </template>
diff --git a/theme_yes/views/snippets/s_big_number.xml b/theme_yes/views/snippets/s_big_number.xml
index ca58a83da..003ee6bc4 100644
--- a/theme_yes/views/snippets/s_big_number.xml
+++ b/theme_yes/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 6.25rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         1,500+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         personalized invitations created
     </xpath>
 </template>
diff --git a/theme_zap/views/snippets/s_big_number.xml b/theme_zap/views/snippets/s_big_number.xml
index 74af91f26..8701e4ae7 100644
--- a/theme_zap/views/snippets/s_big_number.xml
+++ b/theme_zap/views/snippets/s_big_number.xml
@@ -13,10 +13,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>