Merge remote-tracking branch 'upstream/master' into feature/issue-433

src/styles/_base.scss

@@ -3,6 +3,7 @@
   src: url('../fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -10,6 +11,7 @@
   src: url('../fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
 }
 
 html {

src/styles/_layer.scss

@@ -24,6 +24,15 @@
     padding-bottom: $margin-5;
   }
 
+  &-item-handle {
+    flex: 1;
+    display: flex;
+
+    svg {
+      margin-right: 4px;
+    }
+  }
+
   &-item {
     font-weight: 400;
     color: $color-lowgray;
@@ -36,7 +45,7 @@
     z-index: 2000;
     cursor: pointer;
     position: relative;
-    padding: 5px 10px;
+    padding: 5px;
     line-height: 1.3;
     max-height: 50px;
     opacity: 1;
@@ -62,6 +71,7 @@
     background: initial;
     border: none;
     padding: 0 2px;
+    height: 15px;
 
     svg {
       fill: darken($color-lowgray, 20);
@@ -111,6 +121,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: inherit;
+    text-decoration: none;
   }
 
   &-group-header {
@@ -160,7 +172,7 @@
 // PROPERTY
 .maputnik-default-property {
   .maputnik-input-block-label {
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
   }
 
   .maputnik-string,
@@ -169,7 +181,7 @@
   .maputnik-select,
   .maputnik-checkbox-wrapper {
     background-color: darken($color-gray, 2%);
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
   }
 
   .maputnik-make-zoom-function svg {
@@ -178,7 +190,7 @@
 
   .maputnik-multibutton .maputnik-button {
     background-color: darken($color-midgray, 10%);
-    color: darken($color-lowgray, 25%);
+    color: darken($color-lowgray, 20%);
 
     &:hover {
       background-color: lighten($color-midgray, 12);
@@ -195,6 +207,11 @@
 .more-menu {
   position: relative;
 
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
   &__menu {
     position: absolute;
     z-index: 9999;
@@ -229,3 +246,10 @@
     min-width: 28px;
   }
 }
+
+// Clone of the element which is sorted
+.sortableHelper {
+  font-family: $font-family;
+  z-index: 9999;
+  border: none;
+}

src/styles/_modal.scss

@@ -247,12 +247,13 @@
 }
 
 .maputnik-modal-survey {
-  width: 372px;
+  width: 400px;
 }
 
 .maputnik-modal-survey__logo {
   display: block;
   margin: 0 auto;
+  height: 128px;
 }
 
 .maputnik-modal-survey__description {

src/styles/_scrollbar.scss

@@ -12,4 +12,8 @@ div:not(.maputnik-toolbar__actions) {
     padding-left: 2px;
     padding-right: 2px;
   }
+  
+  // Styling for Firefox
+  scrollbar-width: thin;
+  scrollbar-color: #666 #26282e;
 }

src/styles/_toolbar.scss

@@ -100,10 +100,18 @@
   background: inherit;
   border-width: 0;
   @extend .maputnik-toolbar-link;
-}
 
-.maputnik-toolbar-select select {
-  margin-left: 4px;
+  select {
+    // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
+    color: $color-black !important;
+    margin-left: 4px;
+    border-width: 0;
+
+    option {
+      // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
+      color: $color-black !important;
+    }
+  }
 }
 
 .maputnik-icon-text {

src/styles/index.scss

@@ -1,7 +1,7 @@
-$color-black: #1c1f24;
-$color-gray: #26282e;
-$color-midgray: #36383e;
-$color-lowgray: #8e8e8e;
+$color-black: #191b20;
+$color-gray: #222429;
+$color-midgray: #303237;
+$color-lowgray: #a4a4a4;
 $color-white: #f0f0f0;
 $color-red: #cf4a4a;
 $color-green: #53b972;