Merge remote-tracking branch 'upstream/master' into feature/color-accessibility-ui

Conflicts:
	src/components/App.jsx
	src/styles/_components.scss

src/styles/_base.scss

@@ -18,6 +18,11 @@ html {
   box-sizing: border-box;
 }
 
+body {
+  // The UI is 100% height so prevent bounce scroll on OSX
+  overflow: hidden;
+}
+
 *,
 *::before,
 *::after {

src/styles/_components.scss

@@ -1,11 +1,31 @@
 // MAP
-.maputnik-map {
+.maputnik-map__container {
+  display: flex;
   position: fixed !important;
   top: $toolbar-height + $toolbar-offset;
   right: 0;
   bottom: 0;
   height: calc(100% - #{$toolbar-height + $toolbar-offset});
-  width: 75%;
+  width: calc(
+    100%
+    - 200px /* layer list */
+    - 350px /* layer editor */
+  );
+
+  &--error {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__error-message {
+    margin: 16px;
+    text-align: center;
+  }
+}
+
+.maputnik-map__map {
+  width: 100%;
+  height: 100%;
 }
 
 // DOC LABEL
@@ -56,6 +76,7 @@
   border-width: 0;
   border-radius: 2px;
   box-sizing: border-box;
+  text-decoration: none;
 
   &:hover {
     background-color: lighten($color-midgray, 12);
@@ -70,6 +91,20 @@
   font-size: $font-size-5;
 }
 
+.maputnik-wide-button {
+  padding: $margin-2 $margin-3;
+}
+
+.maputnik-green-button {
+  background-color: $color-green;
+  color: $color-black;
+}
+
+.maputnik-white-button {
+  background-color: $color-white;
+  color: $color-black;
+}
+
 .maputnik-icon-button {
   background-color: transparent;
 

src/styles/_layout.scss

@@ -1,6 +1,6 @@
 //SCROLLING
 .maputnik-scroll-container {
-  overflow-x: visible;
+  overflow-x: hidden;
   overflow-y: scroll;
   bottom: 0;
   left: 0;

src/styles/_modal.scss

@@ -125,6 +125,10 @@
 }
 
 //SOURCE MODAL
+.maputnik-public-sources {
+  margin-bottom: 1.5%;
+}
+
 .maputnik-public-source {
   vertical-align: top;
   margin-top: 1.5%;
@@ -150,6 +154,7 @@
 
 .maputnik-public-source-id {
   font-weight: 400;
+  text-align: left;
 }
 
 .maputnik-active-source-type-editor {
@@ -240,3 +245,21 @@
     margin-bottom: 4px;
   }
 }
+
+.maputnik-modal-survey {
+  width: 372px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  color: $color-green;
+  margin-top: 16px;
+}

src/styles/_react-codemirror.scss

@@ -0,0 +1,3 @@
+.react-codemirror2 {
+  max-width: 100%;
+}

src/styles/_react-collapse.scss

@@ -1,6 +1,7 @@
 // See <https://github.com/nkbt/react-collapse/commit/4f4fbce7c6c07b082dc62062338c9294c656f9df>
 .react-collapse-container {
   display: flex;
+  max-width: 100%;
 
   > * {
     flex: 1;

src/styles/_toolbar.scss

@@ -57,6 +57,29 @@
   }
 }
 
+.maputnik-toolbar-link--highlighted {
+  line-height: 1;
+  padding: $margin-2 $margin-3;
+
+  .maputnik-toolbar-link-wrapper {
+    background-color: $color-white;
+    border-radius: 2px;
+    padding: $margin-2;
+    margin-top: $margin-1;
+    color: $color-black;
+    display: block;
+  }
+
+  &:hover {
+    background-color: $color-black;
+  }
+
+  &:hover .maputnik-toolbar-link-wrapper {
+    background-color: lighten($color-midgray, 12);
+    color: $color-white;
+  }
+}
+
 .maputnik-toolbar-version {
   font-size: 10px;
   margin-left: 4px;

src/styles/index.scss

@@ -4,6 +4,7 @@ $color-midgray: #36383e;
 $color-lowgray: #8e8e8e;
 $color-white: #f0f0f0;
 $color-red: #cf4a4a;
+$color-green: #53b972;
 $margin-1: 3px;
 $margin-2: 5px;
 $margin-3: 10px;
@@ -37,6 +38,7 @@ $toolbar-offset: 0;
 @import 'popup';
 @import 'map';
 @import 'react-collapse';
+@import 'react-codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport