FIX: missing SVG mask asset in wizard (#10856)

FIX: missing SVG mask asset in wizard (#10856)

The dark-mode-friendly SVG mask for the wizard’s background image introduced in 8fcfb9586cb3b81e7862be48984d9d3c0b8f7d50 does not work with CDNs, because CORS restrictions apply to SVG masks.

It would be complicated to modify CDN access origin rules for this one specific assets, so instead, this PR moves the contents of the SVG file inside the stylesheet.

diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index a5fd0ca..97ef15d 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -9,6 +9,705 @@
 @import "common/select-kit/*";
 @import "common/components/svg";
 
+$bubbles-mask: svg-uri(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="415.2" height="414" viewBox="0 0 415.2 414">
+  <defs>
+    <style>
+      .cls-1 {fill: #adaeb0;}
+      .cls-2 {opacity: 0.45;}
+      .cls-3 {opacity: 0.65;}
+      .cls-4 {opacity: 0.35;}
+      .cls-5 {opacity: 0.75;}
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M162.3,199.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6l2.5-14.3a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.4,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.9,7.4,8.6,3.2,18.1-4.7,10.6-16.6,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7l-10.3,10.3A1.39,1.39,0,0,1,162.3,199.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.1,0-15.2,4.4-15.2,16,0,7.4,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L163,196.1l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.6.7,19.7-3.6,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9-6.3-7.1-14.9-10.6-25.6-10.6Z"/>
+    <circle class="cls-1" cx="169" cy="169.5" r="2"/>
+    <circle class="cls-1" cx="184" cy="172.5" r="2"/>
+    <circle class="cls-1" cx="198" cy="174.5" r="2"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M206.3,271.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6l2.5-14.3a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.4,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.8,7.4,8.6,3.2,18.1-4.7,10.6-16.7,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7l-10.3,10.3A1.39,1.39,0,0,1,206.3,271.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.1,0-15.2,4.4-15.2,16,0,7.4,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L207,268l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.6.7,19.7-3.6,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9-6.3-7-14.9-10.5-25.6-10.5Z"/>
+    <circle class="cls-1" cx="213" cy="241.5" r="2"/>
+    <circle class="cls-1" cx="228" cy="244.5" r="2"/>
+    <circle class="cls-1" cx="242" cy="246.5" r="2"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M93.3,238.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6L94.3,222a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.4,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.9,7.4,8.6,3.2,18.1-4.7,10.6-16.6,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7L94.3,237.6A1.39,1.39,0,0,1,93.3,238.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.2,0-15.2,4.4-15.2,16,0,7.4,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L94,235.1l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.6.7,19.7-3.6,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9C132.4,193.7,123.8,190.2,113.1,190.2Z"/>
+    <circle class="cls-1" cx="100" cy="208.5" r="2"/>
+    <circle class="cls-1" cx="115" cy="211.5" r="2"/>
+    <circle class="cls-1" cx="129" cy="213.5" r="2"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M320.3,301.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6l2.5-14.3a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.4,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.8,7.4,8.5,3.2,18.1-4.7,10.6-16.7,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7l-10.3,10.3A1.39,1.39,0,0,1,320.3,301.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.1,0-15.2,4.4-15.2,16,0,7.4,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L321,298.1l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.6.7,19.7-3.6,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9-6.3-7.1-14.9-10.6-25.6-10.6Z"/>
+    <circle class="cls-1" cx="327" cy="271.5" r="2"/>
+    <circle class="cls-1" cx="342" cy="274.5" r="2"/>
+    <circle class="cls-1" cx="356" cy="276.5" r="2"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M355.3,194.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6l2.5-14.3a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.4,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.9,7.4,8.6,3.2,18.1-4.7,10.6-16.7,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7l-10.3,10.3A1.39,1.39,0,0,1,355.3,194.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.1,0-15.2,4.4-15.2,16,0,7.4,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L356,191.1l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.7.7,19.7-3.6,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9-6.3-7.1-14.9-10.6-25.6-10.6Z"/>
+    <circle class="cls-1" cx="362" cy="164.5" r="2"/>
+    <circle class="cls-1" cx="377" cy="167.5" r="2"/>
+    <circle class="cls-1" cx="391" cy="169.5" r="2"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M289.3,125.1a1.85,1.85,0,0,1-.7-.2,1.48,1.48,0,0,1-.8-1.6l2.5-14.3a1,1,0,0,0-.3-.9c-.3-.2-.6-.5-1-.8-2.6-2-6.5-5-6.5-13.3,0-12.3,14.6-17.6,16.8-18,15.9-2.6,28.3.8,36.9,10.3.8.8,7.4,8.6,3.2,18.1-4.7,10.6-16.7,15.4-26,14.6a26.91,26.91,0,0,1-12.8-4.7l-10.3,10.3A1.39,1.39,0,0,1,289.3,125.1Zm19.8-47.9a59.89,59.89,0,0,0-9.5.8c-.1,0-15.2,4.4-15.2,16,0,7.3,3.3,9.9,5.8,11.7.4.3.7.6,1,.8a3,3,0,0,1,1,2.8L290,122.1l9.3-9.3a1.68,1.68,0,0,1,2.2-.2,24.79,24.79,0,0,0,12,4.5c8.7.7,19.7-3.7,24-13.4,3.7-8.4-2.1-15.2-2.8-15.9-6.3-7.1-14.9-10.6-25.6-10.6Z"/>
+    <circle class="cls-1" cx="296" cy="95.5" r="2"/>
+    <circle class="cls-1" cx="311" cy="98.5" r="2"/>
+    <circle class="cls-1" cx="325" cy="100.5" r="2"/>
+  </g>
+  <g class="cls-2">
+    <path class="cls-1" d="M375.58,81.67a1.57,1.57,0,0,1-.65,0,1.33,1.33,0,0,1-1.12-1.16l-1.7-13a.91.91,0,0,0-.5-.69c-.31-.09-.65-.27-1.08-.42-2.77-1-6.92-2.55-9.16-9.67-3.31-10.57,7.8-19,9.58-20,13-6.52,24.52-6.94,34.46-1.09.91.47,8.67,5.39,7.62,14.68C411.85,60.78,402.84,68.13,394.64,70a24.28,24.28,0,0,1-12.26-.59L376.31,81A1.23,1.23,0,0,1,375.58,81.67Zm4.11-46.46a54.14,54.14,0,0,0-7.94,3.24c-.09,0-11.87,7.87-8.75,17.84,2,6.26,5.5,7.61,8.13,8.48.43.15.77.33,1.08.42a2.72,2.72,0,0,1,1.61,2.13l1.56,11.59,5.48-10.49a1.51,1.51,0,0,1,1.83-.77,22.31,22.31,0,0,0,11.52.64c7.66-1.74,15.92-8.48,17-18,.92-8.21-5.89-12.49-6.68-12.9-7.32-4.4-15.65-5.09-24.84-2.21Z"/>
+    <circle class="cls-1" cx="373.37" cy="54.45" r="1.8"/>
+    <circle class="cls-1" cx="387.06" cy="52.99" r="1.8"/>
+    <circle class="cls-1" cx="399.62" cy="50.94" r="1.8"/>
+  </g>
+  <g class="cls-2">
+    <path class="cls-1" d="M83.1,111.1h-.6a1.06,1.06,0,0,1-1-.9l-2-10.7c-.1-.2-.2-.5-.5-.6a3.18,3.18,0,0,1-.9-.3c-2.4-.7-6-1.7-8.3-7.5-3.3-8.6,5.9-16.4,7.4-17.3,10.8-6.2,20.8-7.3,29.5-3,.8.3,7.7,4,7.2,11.8-.6,8.7-8,15.4-15,17.4a21.13,21.13,0,0,1-10.6.2l-4.7,10.1A.79.79,0,0,1,83.1,111.1ZM84.7,72A51.55,51.55,0,0,0,78,75.2c-.1,0-9.9,7.3-6.8,15.4,2,5.1,5,6,7.3,6.6a4.65,4.65,0,0,1,.9.3,2.18,2.18,0,0,1,1.5,1.7l1.8,9.6L87,99.7a1.31,1.31,0,0,1,1.6-.7,19.53,19.53,0,0,0,9.9-.2c6.5-1.9,13.3-8,13.8-16,.4-6.9-5.6-10.1-6.3-10.4C99.7,69.2,92.5,69.1,84.7,72Z"/>
+    <ellipse class="cls-1" cx="80.1" cy="88.49" rx="1.6" ry="1.5" transform="translate(-26.23 34.27) rotate(-20.83)"/>
+    <ellipse class="cls-1" cx="91.78" cy="86.4" rx="1.6" ry="1.5" transform="translate(-24.72 38.29) rotate(-20.83)"/>
+    <ellipse class="cls-1" cx="102.5" cy="83.99" rx="1.6" ry="1.5" transform="translate(-23.17 41.94) rotate(-20.83)"/>
+  </g>
+  <g class="cls-2">
+    <path class="cls-1" d="M79.71,433.38H79a1.25,1.25,0,0,1-1.17-1.05l-2.33-12.49c-.12-.23-.23-.58-.58-.7a3.61,3.61,0,0,1-1.05-.35c-2.81-.82-7-2-9.69-8.75-3.85-10,6.88-19.14,8.64-20.19,12.6-7.24,24.27-8.53,34.43-3.51.93.35,9,4.67,8.4,13.78-.7,10.15-9.34,18-17.51,20.31a24.78,24.78,0,0,1-12.37.23L80.3,432.45A.93.93,0,0,1,79.71,433.38Zm1.87-45.64a59.81,59.81,0,0,0-7.82,3.74c-.12,0-11.56,8.52-7.94,18,2.34,6,5.84,7,8.52,7.71a4.69,4.69,0,0,1,1,.35,2.52,2.52,0,0,1,1.75,2l2.1,11.21,5-10.62a1.51,1.51,0,0,1,1.87-.82A22.75,22.75,0,0,0,97.69,419c7.58-2.21,15.52-9.33,16.1-18.67.47-8.05-6.53-11.79-7.35-12.14C99.09,384.48,90.68,384.36,81.58,387.74Z"/>
+    <ellipse class="cls-1" cx="76.21" cy="407" rx="1.87" ry="1.75" transform="translate(-139.75 53.71) rotate(-20.83)"/>
+    <ellipse class="cls-1" cx="89.84" cy="404.55" rx="1.87" ry="1.75" transform="translate(-137.99 58.39) rotate(-20.83)"/>
+    <ellipse class="cls-1" cx="102.36" cy="401.74" rx="1.87" ry="1.75" transform="translate(-136.17 62.66) rotate(-20.83)"/>
+  </g>

[... diff too long, it was truncated ...]

GitHub sha: 40460fa0

This commit appears in #10856 which was approved by CvX. It was merged by pmusaraj.