From ab8f6a8fcef639ffad25c843cdf168b102ec6912 Mon Sep 17 00:00:00 2001
From: "Mehdi Outagant (MOU)" <mou@odoo.com>
Date: Fri, 27 Sep 2024 17:02:35 +0200
Subject: [PATCH] [IMP] theme_*: use minimal format for highlighted text
 content

*: buzzy, clean, notes

A highlighted text has the following structure:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    <span class="o_text_highlight_item">
        text content (line 1) ...
        <svg.../>
    </span>
    [<br/>]
    <span class="o_text_highlight_item">
        text content (line 2) ...
        <svg.../>
    </span>
    ...
</span>
```

Which is saved in a minimal format that allows the JS code to rebuild
the SVGs when it's needed:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    text content ...
</span>
```

The goal of this commit is to use the simplified format for theme
customizations and adapt the code from the "Snippets Preview" and the
"New Page Templates Preview" to be able to build the highlights using
this format when provided in XML.

task-4215788

closes odoo/design-themes#956

Related: odoo/odoo#181884
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 theme_buzzy/views/snippets/s_accordion_image.xml     | 2 +-
 theme_buzzy/views/snippets/s_banner.xml              | 2 +-
 theme_buzzy/views/snippets/s_key_benefits.xml        | 2 +-
 theme_buzzy/views/snippets/s_showcase.xml            | 2 +-
 theme_clean/views/snippets/s_banner.xml              | 2 +-
 theme_notes/views/snippets/s_company_team_shapes.xml | 2 +-
 theme_notes/views/snippets/s_framed_intro.xml        | 2 +-
 theme_notes/views/snippets/s_image_gallery.xml       | 2 +-
 theme_notes/views/snippets/s_image_text.xml          | 2 +-
 theme_notes/views/snippets/s_text_image.xml          | 2 +-
 theme_notes/views/snippets/s_three_columns.xml       | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/theme_buzzy/views/snippets/s_accordion_image.xml b/theme_buzzy/views/snippets/s_accordion_image.xml
index 2b0444c45..c3795ba61 100644
--- a/theme_buzzy/views/snippets/s_accordion_image.xml
+++ b/theme_buzzy/views/snippets/s_accordion_image.xml
@@ -6,7 +6,7 @@
         <attribute name="class" remove="o_cc o_cc2" separator=" "/>
     </xpath>
     <xpath expr="//h2" position="replace" mode="inner">
-        Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">questions<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(0.6384375, 0.5737704918032787)" d="M96.414 17.157c1.34-2.173 2.462-4.075 3.649-5.944 2.117-3.335 5.528-4.302 9.372-2.694 3.962 1.651 4.89 3.575 3.908 8.073-.205.967-.388 1.934-.022 3.118 1.513-3.075 3.013-6.15 4.557-9.203 1.306-2.586 4.297-3.433 7.859-2.195 2.765.968 4.395 2.706 3.564 5.922-.529 2.054-1.005 4.118-.918 6.487.463-.859 1.015-1.685 1.371-2.586 1.447-3.673 3.002-7.324 4.2-11.083.896-2.792 2.192-3.955 5.323-3.564 4.772.598 7.049 3.412 5.84 7.986-.626 2.38-1.22 4.77-1.144 7.486.745-1.358 1.544-2.683 2.213-4.074a138.72 138.72 0 0 0 2.926-6.487c2.376-5.66 3.12-4.704 8.724-3.618 3.552.685 5.063 4.031 4.34 7.997-.616 3.423-1.166 6.856-1.749 10.29l.95.358c.993-2.151 2.062-4.27 2.958-6.454.594-1.456.886-3.042 1.403-4.53 2.43-6.911 2.43-6.813 9.566-5.542.928.163 2.656-.967 3.078-1.923.992-2.26 2.332-2.716 4.523-2.097 4.297 1.206 8.659 2.184 12.945 3.444 2.796.826 4.319 2.988 4.135 5.889-.173 2.684-.961 5.324-1.274 8.008-.734 6.4-1.361 12.799-2.019 19.21-.065.673.043 1.38-.097 2.031-.551 2.477-.41 5.465-3.476 6.421-2.311.717-6.489-2.194-7.644-5.03-.206-.5-.357-1.01-.918-2.63-1.22 3.27-2.073 5.629-2.991 7.965-2.095 5.345-3.66 5.954-8.874 3.705-.853-.37-2.354-.783-2.786-.359-3.163 3.075-5.971 1.217-8.853-.358-.378-.207-.81-.316-1.188-.457-5.851 7.65-12.502 4.596-15.061-3.944-1.543 3.042-2.883 5.726-4.265 8.399-3.357 6.53-7.783 6.975-12.47 1.25-.485-.587-.992-1.152-1.511-1.75-5.647 6.715-12.848 2.293-15.19-6.063-1.253 2.25-2.257 3.88-3.099 5.596-1.285 2.64-2.883 4.65-6.23 3.868-3.498-.826-6.532-4.085-6.65-7.225-.054-1.424 0-2.847-.475-4.433-1.393 2.879-2.71 5.802-4.19 8.637-3.228 6.204-6.067 6.824-11.67 2.912-.962-.673-2.57-.988-3.704-.728-3.681.837-6.272-.619-8.626-3.248-.691-.783-2.084-1.771-2.807-1.543-4.243 1.347-6.91-.641-9.166-3.836-.378-.543-.8-1.053-1.555-2.031-1.08 2.194-2.008 4.041-2.915 5.9-2.397 4.943-5.528 5.932-10.02 2.835-2.008-1.38-3.713-2.118-6.37-1.738-5.117.728-8.54-3.444-7.762-8.649.227-1.521.378-3.064-.086-4.9-.853 1.369-1.793 2.684-2.548 4.107-2.775 5.259-5.301 5.856-10.074 2.206-.971-.75-1.803-1.674-2.86-2.673-.67.271-1.598 1.043-2.257.858-2.71-.771-5.625-1.423-7.838-3.01-.842-.608-.378-3.683.108-5.465 2.008-7.41 4.232-14.755 6.413-22.11.572-1.945 1.166-3.901 1.943-5.77 1.89-4.52 5.02-5.454 9.145-2.89 1.144.706 2.408 1.217 3.552 1.923 2.364 1.456 4.696 2.988 7.439 4.737C32.423 7.14 37.444 6.64 42.82 10.41c2.602-2.107 1.803-7.17 6.748-6.323 3.369.587 6.478 1.217 7.439 4.878 2.289-2.281 4.221-5.693 6.877-6.42 2.624-.718 5.992 1.26 9.599 2.216-.044.054.636-.565.96-1.348 1.048-2.499 2.883-3.4 5.42-2.825 2.775.62 5.474 1.304 6.284 4.76.216.89 1.285 2.042 2.159 2.248 7.58 1.793 7.6 1.739 8.108 9.55v.012Z" class="o_text_highlight_path_scribble_4"></path></svg></span></span> answered
+        Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill">questions</span> answered
     </xpath>
     <xpath expr="//img" position="attributes">
         <attribute name="src">/web_editor/shape/theme_buzzy/s_accordion_image.svg?c1=o-color-2</attribute>
diff --git a/theme_buzzy/views/snippets/s_banner.xml b/theme_buzzy/views/snippets/s_banner.xml
index a3a57c155..2e339ea31 100644
--- a/theme_buzzy/views/snippets/s_banner.xml
+++ b/theme_buzzy/views/snippets/s_banner.xml
@@ -18,7 +18,7 @@
       <attribute name="style"/>
    </xpath>
    <xpath expr="//h1" position="replace" mode="inner">
-      Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 64) scale(1.304140625, 0.75)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>.</strong>
+      Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">potential</span>.</strong>
    </xpath>
    <xpath expr="//div[hasclass('row')]//div[2]//img" position="attributes">
       <attribute name="src">/web_editor/shape/theme_buzzy/s_banner_2.svg?c1=o-color-2</attribute>
diff --git a/theme_buzzy/views/snippets/s_key_benefits.xml b/theme_buzzy/views/snippets/s_key_benefits.xml
index 66a52aa60..540648367 100644
--- a/theme_buzzy/views/snippets/s_key_benefits.xml
+++ b/theme_buzzy/views/snippets/s_key_benefits.xml
@@ -11,7 +11,7 @@
         <attribute name="class">display-4-fs</attribute>
     </xpath>
     <xpath expr="//h2" position="replace" mode="inner">
-        <span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">three benefits<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(2.043671875, 1.8604651162790697)" d="M193.221 20.193c.555 1.245.863 2.005 1.22 2.734 1.399 2.84 2.758 5.757 1.607 9.509-1.21 3.95-3.651 4.208-6.072 4.314-5.059.212-10.129.152-15.178.592-15.873 1.367-31.737 3.585-47.619 4.238-19.921.82-39.862.638-59.802.486-13.938-.106-27.887-.88-41.825-1.428-4.018-.151-8.046-.47-12.064-.896-2.758-.304-4.772-2.46-6.21-6.182-.645-1.656-1.756-2.993-2.798-4.177-2.768-3.13-5.06-6.38-3.899-12.502C.9 15.226.393 13.16.165 11.307c-.715-5.818.903-9.524 4.722-9.646 10.218-.35 20.437-.38 30.655-.577C51.236.78 66.94-.04 82.635.264c14.652.273 29.296 1.655 43.948 2.643 19.822 1.336 39.643 2.02 59.455-.426.923-.121 1.835-.5 2.758-.622 1.329-.183 2.688-.456 4.008-.274 3.829.501 7.073 5.666 7.192 11.21.09 4.466-1.418 6.213-6.775 7.428v-.03Z" class="o_text_highlight_path_bold_2"></path></svg></span></span></span>
+        <span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill">three benefits</span></span>
     </xpath>
     <xpath expr="(//span[hasclass('display-3-fs')])[2]" position="attributes">
         <attribute name="class" add="text-o-color-2" remove="text-o-color-1" separator=" "/>
diff --git a/theme_buzzy/views/snippets/s_showcase.xml b/theme_buzzy/views/snippets/s_showcase.xml
index 214606aaf..7ea29d7c0 100644
--- a/theme_buzzy/views/snippets/s_showcase.xml
+++ b/theme_buzzy/views/snippets/s_showcase.xml
@@ -6,7 +6,7 @@
         <attribute name="src">/web_editor/shape/theme_buzzy/s_showcase.svg?c1=o-color-2</attribute>
     </xpath>
     <xpath expr="//h3" position="replace" mode="inner">
-        Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">showcase<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 32) scale(0.728046875, 0.375)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>
+        Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">showcase</span>
     </xpath>
     <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
         <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
diff --git a/theme_clean/views/snippets/s_banner.xml b/theme_clean/views/snippets/s_banner.xml
index 2a0afdf80..16af4d261 100644
--- a/theme_clean/views/snippets/s_banner.xml
+++ b/theme_clean/views/snippets/s_banner.xml
@@ -4,7 +4,7 @@
 <template id="s_banner" inherit_id="website.s_banner">
     <!-- Text -->
     <xpath expr="//h1" position="replace">
-        <h1 class="display-3 o_default_snippet_text">Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_circle_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(1.2835546875, 0.6916666666666667)" d="M112.58 21.164h18.516c-.478-.176-1.722-.64-2.967-1.105.101-.401.214-.803.315-1.192 12.255 2.912 24.561 5.573 36.716 8.823 5.896 1.582 11.628 3.967 17.171 6.527 10.433 4.832 14.418 14.22 16.479 24.739.377 1.92.566 3.878.83 5.823 2.212 15.94-5.858 23.986-21.595 33.813-.993.615-2.288.79-3.181 1.494-14.229 11.308-31.412 14.32-48.608 17.107-29.01 4.694-57.431 2.209-84.91-8.372-8.145-3.138-16.164-6.853-23.706-11.22C6.176 90.986 1.16 80.053.193 67.25c-1.798-23.809 9.025-42.485 30.356-53.304C44.678 6.793 59.8 3.367 75.45 2.375 90.583 1.42 105.793.379 120.927.78c16.089.427 32.041 3.05 46.911 9.84 2.074.941 3.67 2.912 4.915 5.083-9.73-1.443-19.433-2.987-29.175-4.305-4.89-.665-9.842-1.067-14.77-1.33-23.82-1.28-47.376.514-70.391 7.003a133.771 133.771 0 0 0-22.639 8.648c-17.9 8.786-27.616 26.935-25.567 46.364.666 6.263 3.507 11.133 9.05 14.308 26.862 15.401 55.748 21.965 86.645 19.819 15.561-1.08 31.01-2.787 45.767-8.284 11.099-4.142 21.658-9.25 30.595-17.195 9.779-8.698 11.715-18.55 5.669-30.249-1.131-2.196-3.256-4.079-5.33-5.56-7.981-5.736-17.773-7.48-26.459-11.534-13.249-6.175-27.541-6.916-41.343-10.167-.817-.188-1.571-.64-2.35-.966.037-.364.088-.728.125-1.092Z" class="o_text_highlight_path_circle_2"></path></svg></span></span>.</strong></h1>
+        <h1 class="display-3 o_default_snippet_text">Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_circle_2 o_text_highlight_fill">potential</span>.</strong></h1>
     </xpath>
     <!-- Remove panels -->
     <xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="replace"/>
diff --git a/theme_notes/views/snippets/s_company_team_shapes.xml b/theme_notes/views/snippets/s_company_team_shapes.xml
index 74d1cb621..644632182 100644
--- a/theme_notes/views/snippets/s_company_team_shapes.xml
+++ b/theme_notes/views/snippets/s_company_team_shapes.xml
@@ -10,7 +10,7 @@
         <div class="o_we_shape o_web_editor_Origins_05" style="background-image: url('/web_editor/shape/web_editor/Origins/05.svg?c3=o-color-1');"></div>
     </xpath>
     <xpath expr="//h2" position="replace">
-            <h2 style="text-align: center;"><span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);"><span class="o_text_highlight_item">Meet The Band<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 285.4921875" class="o_text_highlight_path_underline"></path></svg></span></span></h2>
+            <h2 style="text-align: center;"><span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);">Meet The Band</span></h2>
     </xpath>
 </template>
 
diff --git a/theme_notes/views/snippets/s_framed_intro.xml b/theme_notes/views/snippets/s_framed_intro.xml
index 87008b126..5bd4c4865 100644
--- a/theme_notes/views/snippets/s_framed_intro.xml
+++ b/theme_notes/views/snippets/s_framed_intro.xml
@@ -8,7 +8,7 @@
     </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
-        Unplug &amp; Unwind: The <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 6px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Ultimate<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,59 h 208.65625" class="o_text_highlight_path_underline"></path></svg></span></span> Music Experience
+        Unplug &amp; Unwind: The <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 6px; --text-highlight-color: var(--o-color-1);">Ultimate</span> Music Experience
     </xpath>
     <!-- Image -->
     <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
diff --git a/theme_notes/views/snippets/s_image_gallery.xml b/theme_notes/views/snippets/s_image_gallery.xml
index 8ac9e7ffd..5f0ca237b 100644
--- a/theme_notes/views/snippets/s_image_gallery.xml
+++ b/theme_notes/views/snippets/s_image_gallery.xml
@@ -18,7 +18,7 @@
     </xpath>
     <xpath expr="//div[hasclass('row')]/." position="before">
         <div class="col-lg-12">
-            <h2 style="text-align: center;"><span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-color: var(--o-color-4); --text-highlight-width: 3px;"><span class="o_text_highlight_item">Band Gallery<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 241.765625" class="o_text_highlight_path_underline"></path></svg></span></span></h2>
+            <h2 style="text-align: center;"><span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-color: var(--o-color-4); --text-highlight-width: 3px;">Band Gallery</span></h2>
             <p>
                 <br/>
             </p>
diff --git a/theme_notes/views/snippets/s_image_text.xml b/theme_notes/views/snippets/s_image_text.xml
index 1703daa4a..cb1aa930a 100644
--- a/theme_notes/views/snippets/s_image_text.xml
+++ b/theme_notes/views/snippets/s_image_text.xml
@@ -16,7 +16,7 @@
     </xpath>
     <!-- Title & Paragraph -->
     <xpath expr="//h2" position="replace" mode="inner">
-        <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Redefining modern rocks<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,34 h 373.15625" class="o_text_highlight_path_underline"/></svg></span></span>
+        <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);">Redefining modern rocks</span>
     </xpath>
     <xpath expr="//p" position="replace" mode="inner">
         <br/>
diff --git a/theme_notes/views/snippets/s_text_image.xml b/theme_notes/views/snippets/s_text_image.xml
index 6fc9df720..28f0752b2 100644
--- a/theme_notes/views/snippets/s_text_image.xml
+++ b/theme_notes/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Title & Paragraph -->
     <xpath expr="//h2" position="replace" mode="inner">
-        <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Our History<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,34 h 168.0625" class="o_text_highlight_path_underline"></path></svg></span></span>
+        <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);">Our History</span>
     </xpath>
     <xpath expr="//p" position="replace" mode="inner">
         <br/>
diff --git a/theme_notes/views/snippets/s_three_columns.xml b/theme_notes/views/snippets/s_three_columns.xml
index 0789bb74b..b66bffe38 100644
--- a/theme_notes/views/snippets/s_three_columns.xml
+++ b/theme_notes/views/snippets/s_three_columns.xml
@@ -10,7 +10,7 @@
     <xpath expr="//div[hasclass('row')]/." position="before">
         <div class="col-lg-12">
             <h2 style="text-align: center;">
-                <span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);"><span class="o_text_highlight_item">Upcoming concerts<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 371.046875" class="o_text_highlight_path_underline"></path></svg></span></span>
+                <span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);">Upcoming concerts</span>
             </h2>
             <p>
                 <br/>