[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>

3 files changed, 72 insertions, 0 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),