[IMP] website, *: review snippets thumbs

*: website_blog, website_event, website_form, website_mail_channel,
   website_mass_mailing, website_sale, website_twitter

Part of https://github.com/odoo/odoo/pull/55089
task-2157252

6 files changed, 177 insertions, 3 deletions

diff --git a/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.png b/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.png
deleted file mode 100644
index c55ad28b628..00000000000
--- a/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.png
+++ /dev/null
diff --git a/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg b/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg
new file mode 100644
index 00000000000..a9bf77fe6ea
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg
@@ -0,0 +1,99 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M16 19v1H8v-1h8zm17 0v1h-9v-1h9zm16 0v1h-9v-1h9z"/>
+    <filter id="filter-3" width="102.4%" height="300%" x="-1.2%" y="-50%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <polygon id="path-4" points="0 8.954 5.571 11.28 5.571 4.714 0 2.571"/>
+    <filter id="filter-5" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-6" points="6.429 11.28 12 8.954 12 2.571 6.429 4.714"/>
+    <filter id="filter-7" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <polygon id="path-8" points="0 8.954 5.571 11.28 5.571 4.714 0 2.571"/>
+    <filter id="filter-9" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-10" points="6.429 11.28 12 8.954 12 2.571 6.429 4.714"/>
+    <filter id="filter-11" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <polygon id="path-12" points="0 8.954 5.571 11.28 5.571 4.714 0 2.571"/>
+    <filter id="filter-13" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <polygon id="path-14" points="6.429 11.28 12 8.954 12 2.571 6.429 4.714"/>
+    <filter id="filter-15" width="117.9%" height="123%" x="-9%" y="-5.7%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_products_recently_viewed">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(13 20)">
+        <path fill="url(#linearGradient-1)" d="M17.154 15v2H7v-2h10.154zm16.923 0v2h-11v-2h11zM51 15v2H38.308v-2H51z" class="combined_shape"/>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-2"/>
+        </g>
+        <g class="box_solid" transform="translate(6)">
+          <rect width="12" height="11.143" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="6 .429 0 2.061 6 4.286 12 2.061" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-4"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-7)" xlink:href="#path-6"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-6"/>
+          </g>
+        </g>
+        <g class="box_solid" transform="translate(38)">
+          <rect width="12" height="11.143" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="6 .429 0 2.061 6 4.286 12 2.061" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-9)" xlink:href="#path-8"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-8"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-11)" xlink:href="#path-10"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-10"/>
+          </g>
+        </g>
+        <g class="box_solid" transform="translate(22)">
+          <rect width="12" height="11.143" class="rectangle"/>
+          <polygon fill="#FFF" fill-opacity=".78" points="6 .429 0 2.061 6 4.286 12 2.061" class="path"/>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-13)" xlink:href="#path-12"/>
+            <use fill="#FFF" fill-opacity=".95" xlink:href="#path-12"/>
+          </g>
+          <g class="path">
+            <use fill="#000" filter="url(#filter-15)" xlink:href="#path-14"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-14"/>
+          </g>
+        </g>
+        <path fill="#FFF" stroke="#FFF" d="M1.5 4.793v4.414L-.707 7 1.5 4.793zm53-1L56.707 6 54.5 8.207V3.793z" class="combined_shape"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.png b/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.png
deleted file mode 100644
index 4f24bb529cf..00000000000
--- a/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.png
+++ /dev/null
diff --git a/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.svg b/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.svg
new file mode 100644
index 00000000000..e6317a00b81
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <path id="path-2" d="M62 13.5c0-.55-.196-1.022-.587-1.413A1.926 1.926 0 0 0 60 11.5c-.55 0-1.022.196-1.413.587A1.926 1.926 0 0 0 58 13.5c0 .55.196 1.022.587 1.413.391.391.862.587 1.413.587.55 0 1.022-.196 1.413-.587.391-.391.587-.862.587-1.413zm2 3.462a.517.517 0 0 1-.16.378.517.517 0 0 1-.378.16.5.5 0 0 1-.38-.16l-1.442-1.439a2.88 2.88 0 0 1-1.678.522 2.91 2.91 0 0 1-1.151-.233 2.961 2.961 0 0 1-.947-.631 2.961 2.961 0 0 1-.63-.947 2.91 2.91 0 0 1-.234-1.15c0-.402.078-.785.233-1.151a2.98 2.98 0 0 1 .631-.947c.266-.265.581-.475.947-.63a2.91 2.91 0 0 1 1.15-.234c.402 0 .785.078 1.151.233.366.156.682.366.947.631.265.266.475.581.63.947.156.366.234.75.234 1.15a2.88 2.88 0 0 1-.522 1.679l1.443 1.443c.104.104.156.23.156.379z"/>
+    <filter id="filter-3" width="114.3%" height="128.6%" x="-7.1%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-4" d="M55 10v8H34v-8h21zm-1 1H35v6h19v-6z"/>
+    <filter id="filter-5" width="104.8%" height="125%" x="-2.4%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_products_searchbar">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(0 16)">
+        <rect width="82" height="28" fill="url(#linearGradient-1)" class="rectangle" opacity=".4"/>
+        <g class="box_solid" transform="translate(18 9.5)">
+          <rect width="11" height="10" class="rectangle"/>
+          <path fill="#FFF" fill-opacity=".95" d="M0 2.174L5.077 4.1V10L0 7.91V2.174zm11 0V7.91L5.923 10V4.1L11 2.174zM5.5 0L11 1.472 5.5 3.478 0 1.472 5.5 0z" class="combined_shape"/>
+        </g>
+        <g class="search">
+          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-2"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar_inline.svg b/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar_inline.svg
new file mode 100644
index 00000000000..bfa9a7062a5
--- /dev/null
+++ b/addons/website_sale/static/src/img/snippets_thumbs/s_products_searchbar_inline.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M46 4.5c0-.55-.196-1.022-.587-1.413A1.926 1.926 0 0 0 44 2.5c-.55 0-1.022.196-1.413.587A1.926 1.926 0 0 0 42 4.5c0 .55.196 1.022.587 1.413.391.391.862.587 1.413.587.55 0 1.022-.196 1.413-.587.391-.391.587-.862.587-1.413zm2 3.462a.517.517 0 0 1-.16.378.517.517 0 0 1-.378.16.5.5 0 0 1-.38-.16L45.64 6.901a2.88 2.88 0 0 1-1.678.522 2.91 2.91 0 0 1-1.151-.233 2.961 2.961 0 0 1-.947-.631 2.961 2.961 0 0 1-.63-.947A2.91 2.91 0 0 1 41 4.462c0-.402.078-.785.233-1.151a2.98 2.98 0 0 1 .631-.947c.266-.265.581-.475.947-.63a2.91 2.91 0 0 1 1.15-.234c.402 0 .785.078 1.151.233.366.156.682.366.947.631.265.266.475.581.63.947.156.366.234.75.234 1.15a2.88 2.88 0 0 1-.522 1.679l1.443 1.443c.104.104.156.23.156.379z"/>
+    <filter id="filter-2" width="114.3%" height="128.6%" x="-7.1%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.4 0"/>
+    </filter>
+    <path id="path-3" d="M37 1v8H16V1h21zm-1 1H17v6h19V2z"/>
+    <filter id="filter-4" width="104.8%" height="125%" x="-2.4%" y="-6.2%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_products_searchbar_inline">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(17 25)">
+        <g class="box_solid" transform="translate(0 .5)">
+          <rect width="11" height="10" class="rectangle"/>
+          <path fill="#FFF" fill-opacity=".95" d="M0 2.174L5.077 4.1V10L0 7.91V2.174zm11 0V7.91L5.923 10V4.1L11 2.174zM5.5 0L11 1.472 5.5 3.478 0 1.472 5.5 0z" class="combined_shape"/>
+        </g>
+        <g class="search">
+          <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+          <use fill="#FFF" fill-opacity=".95" xlink:href="#path-1"/>
+        </g>
+        <g class="combined_shape">
+          <use fill="#000" filter="url(#filter-4)" xlink:href="#path-3"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-3"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index 2a273b045ad..64660e3b029 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -18,13 +18,13 @@
 
 <template id="snippets" inherit_id="website.snippets" name="e-commerce snippets">
     <xpath expr="//t[@id='sale_recently_viewed_product_hook']" position="replace">
-        <t t-snippet="website_sale.s_products_recently_viewed" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.png"/>
+        <t t-snippet="website_sale.s_products_recently_viewed" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg"/>
     </xpath>
     <xpath expr="//t[@id='sale_product_search_section_hook']" position="replace">
-        <t t-snippet="website_sale.s_products_searchbar" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+        <t t-snippet="website_sale.s_products_searchbar" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.svg"/>
     </xpath>
     <xpath expr="//t[@id='sale_product_search_input_hook']" position="replace">
-        <t t-snippet="website_sale.s_products_searchbar_input" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+        <t t-snippet="website_sale.s_products_searchbar_input" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_searchbar_inline.svg"/>
     </xpath>
 </template>