Cleanup.

Author: boehlerlukas

demo/bb.css

@@ -735,9 +735,47 @@
 }
 
 .bb-feedback-dialog-success svg {
-  width: 30px;
-  height: 30px;
-  object-fit: contain;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: block;
+  stroke-width: 2;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  animation: bb-suc-fill 0.4s ease-in-out 0.4s forwards,
+    bb-suc-scale 0.3s ease-in-out 0.9s both;
+}
+
+.bb-feedback-dialog-success svg path {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: bb-suc-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+.bb-feedback-dialog-success svg circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 3;
+  stroke-miterlimit: 10;
+  fill: none;
+  animation: bb-suc-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+@keyframes bb-suc-stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes bb-suc-scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
 }
 
 .bb-feedback-dialog-body {

demo/main.js

@@ -1,5 +1,5 @@
 const Gleap = window.Gleap;
 
-Gleap.setApiUrl("http://localhost:9000");
-Gleap.setWidgetUrl("http://localhost:9002");
+//Gleap.setApiUrl("http://localhost:9000");
+//Gleap.setWidgetUrl("http://localhost:9002");
 Gleap.initialize("TRiC1FmOEt2N6KCUiLIetFHyyGyxfXYV");

src/Gleap.js

@@ -1165,13 +1165,7 @@ class Gleap {
     </svg>
   </div>
   <div class="bb-feedback-dialog-success">
-    <svg width="120px" height="92px" viewBox="0 0 120 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g fill="${this.mainColor}" fill-rule="nonzero">
-                <path d="M107.553103,1.03448276 L101.669379,6.85344828 C81.2141379,27.3490345 62.5845517,47.5706897 42.7038621,67.7596552 L17.5535172,47.6517931 L11.088,42.4793793 L0.743172414,55.4104138 L38.2431724,85.4104138 L44.0621379,90.0010345 L49.2991034,84.764069 C71.5404828,62.4751034 91.5349655,40.4985517 113.437034,18.5571724 L119.256,12.6734483 L107.553103,1.03448276 Z" id="Path"></path>
-            </g>
-        </g>
-    </svg>
+    ${loadIcon("success", this.mainColor)}
     <div class="bb-feedback-dialog-info-text">${translateText(
       feedbackOptions.thanksMessage
         ? feedbackOptions.thanksMessage

src/UI.js

@@ -72,6 +72,18 @@ export const injectStyledCSS = (
       color: ${contrastBackgroundColor};
       border-radius: ${buttonBorderRadius}px;
     }
+    .bb-feedback-dialog-success svg {
+      box-shadow: inset 0px 0px 0px ${primaryColor};
+    }
+
+    @keyframes bb-suc-fill {
+      100% {
+        box-shadow: inset 0px 0px 0px 30px ${primaryColor};
+      }
+    }
+    .bb-feedback-dialog-success svg circle {
+      stroke: ${primaryColor};
+    }
     .bb-capture-preview-retrybutton:hover {
       background-color: ${backgroundColorHover};
     }
@@ -588,6 +600,13 @@ export const loadIcon = function (name, color) {
 </svg>`;
   }
 
+  if (name === "success") {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <circle cx="26" cy="26" r="25" fill="none"/>
+    <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+  </svg>`;
+  }
+
   if (name === "blur") {
     return `<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
  <path class="bb-svg-path" d="m602.25 1200c238.2 0 435.95-193.26 435.95-435.95 0-269.66-220.23-615.73-435.95-764.05-220.23 161.8-440.45 485.39-440.45 764.05 0 242.7 197.75 435.95 440.45 435.95zm-260.68-382.02c0 112.36 89.887 206.74 206.74 206.74v62.922c-148.32 0-274.16-121.35-274.16-269.66z" fill="#333"/>