[IMP] web_editor: replace some bottom shape colors with transparent

Previously, rainy 05 and wavy 06 had a bottom color with a hard edge.
This means that in order to not have a harsh color transition in the
section, the user would have to match the bottom color to the background
color of the section or vice versa. This commit makes it so that this
color is transparent by default instead. This means that the user can
now simply choose the background color and have the same result, without
having to configure two separate colors.

Part of: odoo/odoo#58333

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 74 insertions, 2 deletions

diff --git a/addons/web_editor/static/shapes/Rainy/05_001.svg b/addons/web_editor/static/shapes/Rainy/05_001.svg
new file mode 100644
index 00000000000..1dcf31a07ef
--- /dev/null
+++ b/addons/web_editor/static/shapes/Rainy/05_001.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:#3AADAA;}
+</style>
+<defs>
+	<mask maskUnits="userSpaceOnUse" x="0" y="0" width="1400" height="1400" id="SVGID_3_">
+		<rect style="fill:white" width="1400" height="1400"/>
+		<path class="st2" d="M0,0h605.4v1.4l0-0.4h794.5l0.1,192.6c0,10.4-8.4,18.7-18.8,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-7.5  c0-10.4-8.4-18.8-18.7-18.8h-0.4c-10.3,0-18.7,8.4-18.7,18.8v40c0,10.4-8.4,18.7-18.8,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-2.8  c0-10.4-8.4-18.8-18.7-18.8h-0.4c-8.9,0-16.5,6.3-18.4,14.9v56c0,10.4-8.4,18.7-18.7,18.8h-0.4c-10.4,0-18.7-8.4-18.7-18.8  l-0.4-68.5c-1.9-8.7-9.5-14.9-18.3-14.9h-0.4c-10.3,0-18.7,8.4-18.7,18.8v44.1c0,10.4-8.4,18.8-18.7,18.8h-0.4  c-10.4,0-18.7-8.4-18.8-18.8v-15.6c0-10.4-8.4-18.7-18.7-18.8h-0.4c-10.3,0-18.7,8.4-18.7,18.8l0,0v48.8c0,10.4-8.4,18.8-18.7,18.8  h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-7.5c0-10.4-8.4-18.8-18.7-18.8h-0.4c-10.3,0-18.7,8.4-18.7,18.8v40c0,10.3-8.4,18.7-18.7,18.8  h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-2.8c0-10.4-8.4-18.7-18.7-18.8h-0.4c-8.9,0-16.5,6.3-18.4,14.9v56c0,10.4-8.4,18.7-18.7,18.8H927  c-10.3,0-18.7-8.4-18.7-18.8l-0.4-68.5c-1.9-8.7-9.5-14.9-18.3-14.9h-0.4c-10.4,0-18.7,8.4-18.8,18.8v44.1  c0,10.4-8.4,18.7-18.7,18.8h-0.5c-10.3-0.1-18.7-8.4-18.7-18.8v-15.6c0-10.4-8.4-18.8-18.7-18.8h-0.4c-9.2,0-17,6.7-18.5,15.7  l-0.3,58c0,10.4-8.4,18.7-18.7,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-56c-1.8-8.7-9.5-14.9-18.3-14.9h-0.4  c-10.3,0-18.7,8.4-18.7,18.8v2.9c0,10.4-8.4,18.8-18.7,18.8H700c-10.3,0-18.7-8.4-18.7-18.8v-40c0-10.4-8.4-18.8-18.7-18.8h-0.4  c-10.4,0-18.7,8.4-18.8,18.8v7.5c0,10.4-8.4,18.8-18.8,18.8h-0.4c-10.2,0-18.6-8.3-18.7-18.5v-2.9c0-10.4-8.4-18.8-18.7-18.8h-0.4  c-9.7,0-17.8,7.4-18.7,17.1c-0.1,0.6-0.1,17.5-0.1,17.5c0,10.4-8.4,18.8-18.7,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-44.1  c0-10.4-8.4-18.8-18.8-18.8h-0.4c-8.9,0-16.5,6.2-18.3,14.9l-0.4,68.5c0,10.3-8.4,18.7-18.7,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8  v-56c-1.8-8.7-9.5-14.9-18.4-14.9h-0.4c-10.4,0-18.7,8.4-18.8,18.8v2.8c0,10.4-8.4,18.7-18.7,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8  v-40c0-10.4-8.4-18.7-18.7-18.8h-0.3c-10.4,0-18.8,8.4-18.8,18.8v7.5c0,10.4-8.4,18.8-18.8,18.8h-0.4c-10.3,0-18.7-8.4-18.7-18.8  V210l0,0c0-10.4-8.4-18.7-18.7-18.8h-0.4c-10.3,0-18.7,8.4-18.7,18.8v15.6c0,10.3-8.4,18.7-18.7,18.8h-0.4  c-10.3,0-18.7-8.4-18.7-18.8v-44c0-10.4-8.4-18.7-18.7-18.8h-0.4c-8.8,0.1-16.4,6.3-18.3,14.9l-0.4,68.5c0,10.4-8.4,18.7-18.7,18.8  h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-56c-1.8-8.7-9.5-14.9-18.4-14.9h-0.4c-10.3,0-18.7,8.4-18.7,18.8v2.8c0,10.4-8.4,18.8-18.8,18.8  h-0.4c-10.3,0-18.7-8.4-18.7-18.8v-40c0-10.4-8.4-18.7-18.7-18.8h-0.4c-10.4,0-18.8,8.4-18.8,18.8v7.5c0,10.4-8.4,18.7-18.8,18.8  h-0.4C8.4,183.1,0,174.7,0,164.3L0,0z"/>
+	</mask>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="18645.6504" y1="-5838.8398" x2="18645.6504" y2="-6533.2598" gradientTransform="matrix(-1 0 0 1 19345.6504 6388.0703)">
+	<stop offset="0" style="stop-color:#3AADAA;stop-opacity:0"/>
+	<stop offset="1" style="stop-color:#3AADAA"/>
+</linearGradient>
+<g style="mask:url(#SVGID_3_)">
+	<rect class="st0" width="1400" height="570"/>
+</g>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="18640.3203" y1="-6558.2705" x2="18626.9336" y2="-7232.4897" gradientTransform="matrix(-1 0 0 1 19345.6504 6388.0698)">
+	<stop offset="0" style="stop-color:white"/>
+	<stop offset="1" style="stop-color:white;stop-opacity:0"/>
+</linearGradient>
+<path class="st2" d="M0,130.1c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1l0.5-76.8c2.1-9.7,10.7-16.7,20.6-16.7H64  c11.6,0.1,21,9.5,21,21.1V107c0,11.6,9.4,21,21,21h0.5c11.6-0.1,20.9-9.4,21-21V89.6c0-11.6,9.4-21,21-21.1h0.5  c11.6,0.1,21,9.5,21,21.1v54.6c0,11.6,9.4,21,21,21.1h0.5c11.6,0,21-9.5,21-21.1v-8.4c0-11.6,9.4-21,21-21.1h0.5  c11.6,0.1,21,9.5,21,21.1v44.8c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-3.1c0-11.6,9.4-21,21-21.1h0.5  c9.9,0,18.5,7,20.6,16.8v62.7c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1l0.5-76.8c2.1-9.8,10.8-16.8,20.8-16.7h0.5  c11.6,0.1,21,9.5,21,21.1v49.4c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-17.5c0-11.6,9.4-21,21-21.1h0.5  c10.3,0,19,7.5,20.7,17.6l0.4,65c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-26.2c2.1-9.7,10.6-16.7,20.6-16.8h0.5  c11.6,0.1,21,9.5,21,21.1v3.1c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-44.8c0-11.6,9.4-21,21-21.1h0.4  c11.6,0.1,21,9.5,21,21.1v8.4c0,11.6,9.4,21,21,21.1h0.5c11.5,0,20.8-9.3,21-20.7v-3.3c0-11.6,9.4-21,21-21.1h0.5  c10.9,0,19.9,8.3,20.9,19.1c0.1,0.7,0.1,19.6,0.1,19.6c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-49.4  c0-11.6,9.4-21,21-21.1h0.5c9.9,0,18.5,7,20.6,16.7l0.5,76.8c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-62.7  c2.1-9.7,10.6-16.7,20.6-16.8h0.5c11.6,0.1,21,9.5,21,21.1v3.1c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1v-44.8  c0-11.6,9.4-21,21-21.1h0.4c11.6,0.1,21,9.5,21,21.1v8.4c0,11.6,9.4,21,21,21.1h0.4c11.6-0.1,21-9.5,21-21.1V93.2l0,0  c0.1-11.6,9.4-20.9,21-21h0.4c11.6,0.1,20.9,9.4,21,21v17.5c0.1,11.6,9.4,20.9,21,21h0.5c11.6-0.1,20.9-9.4,21-21V61.3  c0-11.6,9.4-21,21-21.1h0.5c9.9,0,18.5,7,20.6,16.7l0.5,76.8c0,11.6,9.4,21,21,21.1h0.4c11.6-0.1,21-9.5,21-21.1V71  c2.1-9.7,10.6-16.7,20.6-16.7h0.5c11.6,0.1,21,9.5,21,21.1v3.1c0.1,11.6,9.4,20.9,21,21h0.5c11.6-0.1,20.9-9.4,21-21V33.7  c0-11.6,9.4-21,21-21.1h0.4c11.6,0.1,21,9.5,21,21.1v8.4c0,11.6,9.4,21,21,21.1h0.5c11.6-0.1,21-9.5,21-21.1V0H0.1L0,130.1z"/>
+</svg>
diff --git a/addons/web_editor/static/shapes/Wavy/06_001.svg b/addons/web_editor/static/shapes/Wavy/06_001.svg
new file mode 100644
index 00000000000..8a4482d4a11
--- /dev/null
+++ b/addons/web_editor/static/shapes/Wavy/06_001.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1400 1400">
+    <defs>
+        <filter id="drop-shadow" y="-50%" height="200%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="10" />
+            <feOffset dx="0" dy="-4" result="offsetblur" />
+            <feFlood flood-color="rgba(0,0,0,0.4)" />
+            <feComposite in2="offsetblur" operator="in" />
+            <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+            </feMerge>
+        </filter>
+        <mask maskUnits="userSpaceOnUse" x="0" y="0" width="1400" height="500" id="SVGID_1_">
+            <rect style="fill:white" width="1400" height="550"/>
+            <path d="M-1,286c283.4-184.2,559.7,140.5,1066,174.3c175.6,11.7,333.1-48.9,336-49.3v1400H-1V287z" style="fill:black"/>
+        </mask>
+        <linearGradient id="linear-gradient" x1="700.51" y1="8915.67" x2="699.42" y2="9429.18"
+        gradientTransform="matrix(1, 0, 0, -1, 0, 9440.95)" gradientUnits="userSpaceOnUse">
+            <stop offset="0.11" stop-color="#3aadaa" />
+            <stop offset="1" stop-color="#383e45" />
+        </linearGradient>
+        <linearGradient id="linear-gradient-2" x1="904.49" y1="9586.58" x2="351.14" y2="8214.94"
+        gradientTransform="matrix(1, 0, 0, -1, 0, 9440.95)" gradientUnits="userSpaceOnUse">
+            <stop offset="0.8" stop-color="#3aadaa" />
+            <stop offset="0.97" stop-color="#383e45" />
+        </linearGradient>
+        <linearGradient id="linear-gradient-4" x1="622.62" y1="8824.69" x2="1098.85" y2="10216.47"
+        gradientTransform="matrix(1, 0, 0, -1, 0, 9440.95)" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#3aadaa" />
+            <stop offset="0.99" stop-color="#383e45" />
+        </linearGradient>
+    </defs>
+    <g style="mask:url(#SVGID_1_)">
+        <polygon points="1400,471.7 0,470 0,0 1400,0" style="fill: url(#linear-gradient)" />
+        <path d="M0,156.2C89.9,77.9,390.4-46,695,195.9c232,184.2,528.2,252.1,705,157.9v53.2H0V568V156.2z"
+        style="fill: url(#linear-gradient-2); filter: url(#drop-shadow)" />
+        <path d="M1037.6,418.4c137.4,29.3,241.9,7.7,325.9-24c-237.3-114-374.4-94.2-529.3-47.5
+      C899.6,377.3,966.9,403.3,1037.6,418.4z"
+        style="fill: #F6F6F6; filter: url(#drop-shadow)" />
+        <path d="M0,212.2c401.1-238,673.5,128.4,1037.6,206.2c158.1,33.8,272.6,0,362.4-38.7v92H0V212.2z"
+        style="fill: url(#linear-gradient-4); filter: url(#drop-shadow)" />
+        <path d="M0,287c283.4-184.2,559.7,140.5,1066,174.3c175.6,11.7,333.1-48.9,334-49.3v140H0V287z"
+        style="filter: url(#drop-shadow)" />
+    </g>
+</svg>
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 00d7884f4f7..eb63e7cdec2 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -685,6 +685,7 @@ $o-bg-shapes: ('web_editor': (
     'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true),
     'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
     'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/05_001': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
     'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
     'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
     'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
@@ -695,6 +696,7 @@ $o-bg-shapes: ('web_editor': (
     'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
     'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
     'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5), 'repeat-y': false),
+    'Wavy/06_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
     'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
     'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
     'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 4d03af570bc..38b9c50742e 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -255,7 +255,7 @@
                     <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
                     <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 04"/>
                     <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 05"/>
-                    <we-button data-shape="web_editor/Wavy/06" data-select-label="Wavy 06"/>
+                    <we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 06"/>
                     <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 07"/>
                     <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 08"/>
                     <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 09"/>
@@ -293,7 +293,7 @@
                     <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
                     <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
                     <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
-                    <we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
+                    <we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 05"/>
                     <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
                     <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
                     <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>