Feature: Widget design update (#426)

app/javascript/widget/assets/scss/_mixins.scss

@@ -4,6 +4,11 @@ $shadow-color-2: rgba(0, 0, 0, 0.07);
 $shadow-color-3: rgba(50, 50, 93, .08);
 $shadow-color-4: rgba(0, 0, 0, .05);
 
+$color-shadow-medium: rgba(0, 0, 0, 0.1);
+$color-shadow-light: rgba(0, 0, 0, 0.06);
+$color-shadow-large: rgba(0, 0, 0, 0.25);
+$color-shadow-outline: rgba(66, 153, 225, 0.5);
+
 @mixin normal-shadow {
   box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2;
 }
@@ -13,8 +18,59 @@ $shadow-color-4: rgba(0, 0, 0, .05);
 }
 
 @mixin placeholder {
-  &::-webkit-input-placeholder {@content}
-  &:-moz-placeholder           {@content}
-  &::-moz-placeholder          {@content}
-  &:-ms-input-placeholder      {@content}
+  &::-webkit-input-placeholder {
+    @content
+  }
+
+  &:-moz-placeholder {
+    @content
+  }
+
+  &::-moz-placeholder {
+    @content
+  }
+
+  &:-ms-input-placeholder {
+    @content
+  }
+}
+
+@mixin shadow {
+  box-shadow: 0 1px 10px -4 $color-shadow-medium,
+    0 1px 5px 2px $color-shadow-light;
+}
+
+
+@mixin shadow-medium {
+  box-shadow: 0 4px 6px -8px $color-shadow-medium,
+    0 2px 4px -4px $color-shadow-light;
+}
+
+
+@mixin shadow-large {
+  box-shadow: 0 10px 15px -16px $color-shadow-medium,
+    0 4px 6px -8px $color-shadow-light;
+}
+
+
+@mixin shadow-big {
+  box-shadow: 0 20px 25px -20px $color-shadow-medium,
+    0 10px 10px -10px $color-shadow-light;
+}
+
+
+@mixin shadow-mega {
+  box-shadow: 0 25px 50px -12px $color-shadow-big;
+}
+
+@mixin shadow-inner {
+  box-shadow: inset 0 2px 4px 0 $color-shadow-light;
+}
+
+@mixin shadow-outline {
+  box-shadow: 0 0 0 3px $color-shadow-outline;
+}
+
+@mixin shadow-none {
+  box-shadow: none;
 }

app/javascript/widget/assets/scss/_variables.scss

@@ -91,9 +91,20 @@ $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
 
-$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$font-family: 'Inter',
+-apple-system,
+system-ui,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Arial,
+sans-serif;
 $ionicons-font-path: '~ionicons/fonts';
 
 $spinkit-spinner-color: $color-white !default;
 $spinkit-spinner-margin: 0 0 0 1.6rem !default;
 $spinkit-size: 1.6rem !default;
+
+// Break points
+$break-point-medium: 667px;

app/javascript/widget/assets/scss/sdk.js

@@ -55,10 +55,10 @@ export const SDK_CSS = ` .woot-widget-holder {
 }
 .woot--close:before, .woot--close:after {
   position: absolute;
-  left: 30px;
-  top: 15px;
+  left: 32px;
+  top: 20px;
   content: ' ';
-  height: 33px;
+  height: 24px;
   width: 2px;
   background-color: white;
 }
@@ -86,17 +86,10 @@ export const SDK_CSS = ` .woot-widget-holder {
   }
 
   .woot-widget-bubble.woot--close {
-    top: 8px;
-    right: 8px;
-    box-shadow: none !important;
-    -moz-box-shadow: none !important;
-    -o-box-shadow: none !important;
-    -webkit-box-shadow: none !important;
-    background: transparent !important;
-  }
-
-  .woot--close:before, .woot--close:after {
-    background-color: black;
+    visibility: hidden !important;
+    z-index: -1 !important;
+    opacity: 0;
+    bottom: 60px;
   }
 }