From 46365d29ea37f2312116872f900c4ed0651098b2 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Tue, 6 Aug 2019 13:32:55 +0200
Subject: [PATCH 01/28] react responsive and main layout

---
 package.json                             |  1 +
 src/components/sidebar/style.module.scss |  5 +++++
 src/components/widgets/style.module.scss |  1 -
 src/pages/app/index.js                   | 22 +++++++++++++-------
 src/pages/app/style.module.scss          |  7 +++++++
 src/styles/_vars.scss                    | 15 ++++++++++++++
 yarn.lock                                | 26 ++++++++++++++++++++++++
 7 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 307960c16..5849e3abb 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-modal": "^3.9.1",
     "react-on-scroll": "^0.2.2",
     "react-redux": "^7.0.3",
+    "react-responsive": "^7.0.0",
     "react-scripts": "3.0.1",
     "react-select": "^3.0.4",
     "react-sticky-box": "^0.8.0",
diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index 01aea9c7e..27bfbfcde 100644
--- a/src/components/sidebar/style.module.scss
+++ b/src/components/sidebar/style.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/vars';
+
 .sidebar {
   position: relative;
   max-width: 540px;
@@ -5,4 +7,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    padding: 5px;
+  }
 }
diff --git a/src/components/widgets/style.module.scss b/src/components/widgets/style.module.scss
index 756609292..2724076da 100644
--- a/src/components/widgets/style.module.scss
+++ b/src/components/widgets/style.module.scss
@@ -2,7 +2,6 @@
   margin-bottom: 50px;
   max-width: 540px;
   z-index: 300;
-  left: 30px;
 }
 
 .actionBar {
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index eda98bea5..8b4c6d10b 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -3,18 +3,26 @@ import Widgets from 'components/widgets';
 import Map from 'components/map';
 import LocationModal from 'components/location-modal';
 import Sidebar from 'components/sidebar';
+import MediaQuery from 'react-responsive';
 import styles from './style.module.scss';
 
+
 const AppPage = () => (
   <div className={styles.app}>
-    <Sidebar>
-      <Widgets />
-    </Sidebar>
-    
-    <div className={styles.vis}>
-      <Map />
-    </div>
+    <MediaQuery maxWidth={384}>
+      <Sidebar>
+        <Widgets />
+      </Sidebar>
+    </MediaQuery>
+    <MediaQuery minWidth={384}>
+      <Sidebar>
+        <Widgets />
+      </Sidebar>
+      <div className={styles.vis}>
+        <Map />
+      </div>
 
+    </MediaQuery>
     {/* Modals */}
     <LocationModal />
   </div>
diff --git a/src/pages/app/style.module.scss b/src/pages/app/style.module.scss
index b080f2c1a..a7fd2ed2c 100644
--- a/src/pages/app/style.module.scss
+++ b/src/pages/app/style.module.scss
@@ -1,4 +1,7 @@
+@import '../../../../styles/vars';
+
 .app {
+
   .vis {
     position: fixed;
     top: 0;
@@ -36,4 +39,8 @@
       left: 30px;
     }
   }
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    max-width: 100%;
+    background-color: $header;
+  }
 }
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 1c25f5866..8195a1b41 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -4,6 +4,7 @@ $body-line-height: 1.4;
 
 /* Theme */
 $primary: #00857F;
+$header: #00C5BD;
 $black: #000000;
 $white: #FFFFFF;
 
@@ -26,6 +27,20 @@ $font-size-medium: 19px;
   line-height: 24px;
 }
 
+// Breakpoints
+$sm: 384px;
+$md: 768px;
+$lg: 992px;
+$xlg: 1280px;
+
+$screen-max-width: 1024px;
+$breakpoints: (
+  sm: $sm,
+  md: $md,
+  lg: $lg,
+  xlg: $xlg
+);
+
 // To remove
 $font-size-extra-small: 9px;
 $font-size-small: 12px;
diff --git a/yarn.lock b/yarn.lock
index 13a7db16f..fa9589302 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4284,6 +4284,11 @@ css-loader@2.1.1, css-loader@^2.1.1:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@@ -6584,6 +6589,11 @@ humps@^2.0.1:
   resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
   integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8243,6 +8253,13 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+matchmediaquery@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.0.tgz#6f672bcdbc44de16825c6917fbcdcfb9b82607b1"
+  integrity sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -10802,6 +10819,15 @@ react-resize-detector@^4.0.5:
     raf-schd "^4.0.0"
     resize-observer-polyfill "^1.5.1"
 
+react-responsive@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-7.0.0.tgz#0abde0ccbb50e5e8407e3d61dd4696447e7ebd3c"
+  integrity sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.3.0"
+    prop-types "^15.6.1"
+
 react-scripts@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"

From acbbc210dbcb7ae4ca35f25fca5fad66a015b6a9 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Tue, 6 Aug 2019 14:19:13 +0200
Subject: [PATCH 02/28] view map btn component

---
 src/components/view-selector/component.js     | 41 +++++++++++++++++++
 src/components/view-selector/index.js         | 13 ++++++
 src/components/view-selector/stories.jsx      | 14 +++++++
 .../view-selector/style.module.scss           | 12 ++++++
 src/modules/map/actions.js                    |  1 +
 src/modules/map/initial-state.js              |  3 +-
 src/modules/map/reducers.js                   |  4 ++
 src/pages/app/index.js                        |  2 +
 8 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/components/view-selector/component.js
 create mode 100644 src/components/view-selector/index.js
 create mode 100644 src/components/view-selector/stories.jsx
 create mode 100644 src/components/view-selector/style.module.scss

diff --git a/src/components/view-selector/component.js b/src/components/view-selector/component.js
new file mode 100644
index 000000000..82075d74a
--- /dev/null
+++ b/src/components/view-selector/component.js
@@ -0,0 +1,41 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Button from 'components/button';
+import styles from './style.module.scss';
+
+
+class ViewSelector extends PureComponent {
+  static propTypes = {
+    mapView: PropTypes.bool,
+    setMapView: PropTypes.func
+  };
+
+  static defaultProps = {
+    mapView: true,
+    setMapView: () => null
+  };
+
+  onChangeView = () => {
+    const { mapView, setMapView } = this.props;
+    setMapView(!mapView);
+  }
+
+  render() {
+    const { mapView } = this.props;
+
+    return (
+      <div className={styles.container}>
+        <Button
+          hasBackground
+          hasContrast
+          onClick={this.onChangeView}
+        >
+          {mapView ? 'Map View' : 'Whatever view'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default ViewSelector;
diff --git a/src/components/view-selector/index.js b/src/components/view-selector/index.js
new file mode 100644
index 000000000..2e7c6448f
--- /dev/null
+++ b/src/components/view-selector/index.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { setMapView } from 'modules/map/actions';
+import Component from './component';
+
+const mapStateToProps = state => ({
+  mapView: state.map.display
+});
+
+const mapDispatchToProps = {
+  setMapView
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/view-selector/stories.jsx b/src/components/view-selector/stories.jsx
new file mode 100644
index 000000000..75394b7af
--- /dev/null
+++ b/src/components/view-selector/stories.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Component from './component';
+
+storiesOf('Basemap Selector', module)
+  .add('Light active', () => (
+    <Component basemapName="light" />
+  ))
+  .add('Dark active', () => (
+    <Component basemapName="dark" />
+  ))
+  .add('Satllite active', () => (
+    <Component basemapName="satellite" />
+  ));
diff --git a/src/components/view-selector/style.module.scss b/src/components/view-selector/style.module.scss
new file mode 100644
index 000000000..7d5fd83b0
--- /dev/null
+++ b/src/components/view-selector/style.module.scss
@@ -0,0 +1,12 @@
+@import '../../styles/vars';
+
+.container {
+  position: fixed;
+  z-index: 300;
+  bottom: 5vh;
+  right: 20px;
+  left: 20px;
+  * {
+    width: 100%;
+  }
+}
diff --git a/src/modules/map/actions.js b/src/modules/map/actions.js
index 16c5f47a1..7c90b5838 100644
--- a/src/modules/map/actions.js
+++ b/src/modules/map/actions.js
@@ -3,3 +3,4 @@ import { createAction } from 'vizzuality-redux-tools';
 export const resetViewport = createAction('MAP/RESET_VIEWPORT');
 export const setViewport = createAction('MAP/SET_VIEWPORT');
 export const setBasemap = createAction('MAP/SET_BASEMAP');
+export const setMapView = createAction('MAP/SET_MAP_VIEW');
diff --git a/src/modules/map/initial-state.js b/src/modules/map/initial-state.js
index 058fff0f4..73f2e397b 100644
--- a/src/modules/map/initial-state.js
+++ b/src/modules/map/initial-state.js
@@ -7,5 +7,6 @@ export default {
     minZoom: 2,
     latitude: 20,
     longitude: 0,
-  }
+  },
+  display: true
 };
diff --git a/src/modules/map/reducers.js b/src/modules/map/reducers.js
index df8b7fc20..1cf9e2310 100644
--- a/src/modules/map/reducers.js
+++ b/src/modules/map/reducers.js
@@ -20,5 +20,9 @@ export default {
   [actions.setBasemap]: (state, { payload }) => ({
     ...state,
     basemap: payload
+  }),
+  [actions.setMapView]: (state, { payload }) => ({
+    ...state,
+    display: payload
   })
 };
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index 8b4c6d10b..edb36bc4c 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -3,6 +3,7 @@ import Widgets from 'components/widgets';
 import Map from 'components/map';
 import LocationModal from 'components/location-modal';
 import Sidebar from 'components/sidebar';
+import ViewSelector from 'components/view-selector';
 import MediaQuery from 'react-responsive';
 import styles from './style.module.scss';
 
@@ -12,6 +13,7 @@ const AppPage = () => (
     <MediaQuery maxWidth={384}>
       <Sidebar>
         <Widgets />
+        <ViewSelector />
       </Sidebar>
     </MediaQuery>
     <MediaQuery minWidth={384}>

From cdd30afa02b7218c7d1f0c16a69e3290c0728c4d Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 12:00:27 +0200
Subject: [PATCH 03/28] media queries and mobile view styles

---
 src/components/button/style.module.scss       |  2 +-
 src/components/header/style.module.scss       | 25 ++++++++++++++++++-
 src/components/spinner/component.js           |  1 -
 src/components/widget/style.module.scss       |  5 ++++
 .../conservation-hotspots/style.module.scss   | 22 +++++++++++++++-
 src/styles/_vars.scss                         |  4 +++
 src/styles/main.scss                          |  2 +-
 7 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/components/button/style.module.scss b/src/components/button/style.module.scss
index 75b2781e9..a6eef8224 100644
--- a/src/components/button/style.module.scss
+++ b/src/components/button/style.module.scss
@@ -3,7 +3,7 @@
 .button {
   padding: 0 20px;
   min-width: 116px;
-  height: 30px;
+  min-height: 30px;
   background-color: transparent;
   border-radius: 15px;
   border: 2px solid rgba($primary, 0.2);
diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 49949a032..3dbad57d0 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -3,6 +3,9 @@
 .header {
   display: flex;
   margin-bottom: 50px;
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    margin-bottom: 25px;
+  }
 
   .bg,
   .bgFixed {
@@ -16,23 +19,32 @@
     &.isHidden {
       display: none;
     }
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      display: none;
+    }
   }
 
   .bgFixed {
     position: fixed;
     z-index: 100;
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      display: none;
+    }
   }
 
   .searchBar {
     margin-top: 80px;
     z-index: 300;
-    left: 30;
     width: 100%;
     display: flex;
     &.fixed {
       position: fixed;
       top: -65px;
     }
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      margin-top: 20px;
+      font-size: 35px;
+    }
   }
 
   .titleBtn {
@@ -51,6 +63,10 @@
     font-size: 60px;
     font-weight: 300;
     line-height: 0.85;
+
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      font-size: 35px;
+    }
   }
 
   .searchButton {
@@ -66,6 +82,13 @@
     :global(.svg-inline--fa path) {
       fill: $primary;
     }
+    svg {
+      @media screen and (max-width: map-get($breakpoints, md)) {
+        height: 30px;
+        width: 30px;
+        vertical-align: 0;
+      }
+    }
   }
   .invisible {
     display: block;
diff --git a/src/components/spinner/component.js b/src/components/spinner/component.js
index bb0f769b4..d625bf3ce 100644
--- a/src/components/spinner/component.js
+++ b/src/components/spinner/component.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './style.module.scss';
 
-
 const Spinner = ({ isLoading }) => (
 
   <div
diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index 29a7e463c..66a236c90 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -2,6 +2,7 @@
 
 .widget {
   $padding: 30px;
+  $paddingMobile: 20px;
   $border-radius: 20px;
 
   position: relative;
@@ -18,6 +19,10 @@
   transition: all .5s ease;
   will-change: margin-bottom;
 
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    padding: $paddingMobile;
+  }
+
   &.collapsed {
     margin-bottom: -45px;
     background-position: 0;
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index f99120713..35c662a0e 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -5,28 +5,48 @@
   align-items: stretch;
   margin-top: 30px;
 
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
   .card {
     flex: 1;
-
     width: 50%;
     padding: 20px 30px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 20px;
+      @media screen and (max-width: map-get($breakpoints, md)) {
+        flex-direction: column;
+        justify-content: space-between;
 
+    }
+    .cardInfo {
+      display: inline;
+    }
     h3 {
       margin-top: 0;
     }
 
     &:first-child {
       margin-right: 10px;
+      @media screen and (max-width: map-get($breakpoints, md)) {
+        margin-right: 0;
+      }
     }
 
     &:last-child {
       margin-left: 10px;
+      @media screen and (max-width: map-get($breakpoints, md)) {
+        margin-left: 0;
+      }
     }
 
     &.active {
       border-color: $primary;
     }
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      margin: 0;
+    }
   }
 }
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 8195a1b41..4110575eb 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -41,6 +41,10 @@ $breakpoints: (
   xlg: $xlg
 );
 
+// Mobile
+
+$paddingMobile: 5px;
+
 // To remove
 $font-size-extra-small: 9px;
 $font-size-small: 12px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 673616946..4e31893bb 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,7 +5,7 @@ body {
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

From fede10de460a088f6fc9a18139612df712d49cf9 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 12:28:08 +0200
Subject: [PATCH 04/28] media queries adjusted in header

---
 src/components/header/style.module.scss | 12 ++++++------
 src/modules/app/reducers.js             |  2 +-
 src/modules/pages/initial-state.js      |  3 ++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 3dbad57d0..3bed0426f 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -3,7 +3,7 @@
 .header {
   display: flex;
   margin-bottom: 50px;
-  @media screen and (max-width: map-get($breakpoints, md)) {
+  @media screen and (max-width: map-get($breakpoints, sm)) {
     margin-bottom: 25px;
   }
 
@@ -19,7 +19,7 @@
     &.isHidden {
       display: none;
     }
-    @media screen and (max-width: map-get($breakpoints, md)) {
+    @media screen and (max-width: map-get($breakpoints, sm)) {
       display: none;
     }
   }
@@ -27,7 +27,7 @@
   .bgFixed {
     position: fixed;
     z-index: 100;
-    @media screen and (max-width: map-get($breakpoints, md)) {
+    @media screen and (max-width: map-get($breakpoints, sm)) {
       display: none;
     }
   }
@@ -41,7 +41,7 @@
       position: fixed;
       top: -65px;
     }
-    @media screen and (max-width: map-get($breakpoints, md)) {
+    @media screen and (max-width: map-get($breakpoints, sm)) {
       margin-top: 20px;
       font-size: 35px;
     }
@@ -64,7 +64,7 @@
     font-weight: 300;
     line-height: 0.85;
 
-    @media screen and (max-width: map-get($breakpoints, md)) {
+    @media screen and (max-width: map-get($breakpoints, sm)) {
       font-size: 35px;
     }
   }
@@ -83,7 +83,7 @@
       fill: $primary;
     }
     svg {
-      @media screen and (max-width: map-get($breakpoints, md)) {
+      @media screen and (max-width: map-get($breakpoints, sm)) {
         height: 30px;
         width: 30px;
         vertical-align: 0;
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index 6183f072d..c7372f579 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,6 +1,6 @@
 import { pageActions } from './actions';
 
-const setPageReducer = key => (state, { payload }) => ({ ...state, current: key, payload });
+const setHeader = (state, { payload }) => ({ ...state, header: key, payload });
 
 const reducerMap = Object.keys(pageActions).reduce(
   (acc, key) => ({ ...acc, [key]: setPageReducer(key) }),
diff --git a/src/modules/pages/initial-state.js b/src/modules/pages/initial-state.js
index 16f1d7e02..83e4e6b58 100644
--- a/src/modules/pages/initial-state.js
+++ b/src/modules/pages/initial-state.js
@@ -1,3 +1,4 @@
 export default {
-  current: 'APP'
+  current: 'APP',
+  headerFixed: 'false'
 };

From 616a499bf9388c993c78b051d627c3ffeb14de47 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 13:37:56 +0200
Subject: [PATCH 05/28] mobile condition to redux, btn and header styles
 adapted

---
 src/components/button/style.module.scss       |  4 ++-
 src/components/header/component.js            |  6 +++-
 src/components/header/index.js                |  1 +
 src/components/language-selector/component.js |  8 +++--
 src/components/language-selector/index.js     |  1 +
 .../language-selector/style.module.scss       |  2 --
 src/config/store.js                           |  2 ++
 src/modules/app/actions.js                    |  4 ++-
 src/modules/app/index.js                      |  3 +-
 src/modules/app/initial-state.js              |  2 +-
 src/modules/app/reducers.js                   | 16 ++++------
 src/modules/app/sagas.js                      | 32 -------------------
 src/modules/pages/initial-state.js            |  1 -
 13 files changed, 29 insertions(+), 53 deletions(-)
 delete mode 100644 src/modules/app/sagas.js

diff --git a/src/components/button/style.module.scss b/src/components/button/style.module.scss
index a6eef8224..0b8cb2cb7 100644
--- a/src/components/button/style.module.scss
+++ b/src/components/button/style.module.scss
@@ -7,7 +7,6 @@
   background-color: transparent;
   border-radius: 15px;
   border: 2px solid rgba($primary, 0.2);
-
   color: $primary;
   font-size: $body-font-size;
   font-weight: 600;
@@ -56,4 +55,7 @@
     pointer-events: none;
     opacity: 0.2;
   }
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    min-width: 0;
+  }
 }
diff --git a/src/components/header/component.js b/src/components/header/component.js
index fdb5672eb..328f21530 100644
--- a/src/components/header/component.js
+++ b/src/components/header/component.js
@@ -9,6 +9,7 @@ import styles from './style.module.scss';
 
 class Header extends PureComponent {
   static propTypes = {
+    isMobile: PropTypes.bool.isRequired,
     sticky: PropTypes.bool,
     location: PropTypes.shape({
       name: PropTypes.string
@@ -29,9 +30,12 @@ class Header extends PureComponent {
 
 
   render() {
-    const { location, sticky } = this.props;
+    const { location, sticky, isMobile } = this.props;
     let stylesOverride = { fontSize: 60, lineHeight: 0.85 };
 
+    if (isMobile) stylesOverride = { fontSize: 35, lineHeight: 0.85 };
+
+
     if (location && location.name.length > 10) stylesOverride = { fontSize: 45, lineHeight: 1 };
     if (location && location.name.length > 30) stylesOverride = { fontSize: 30, lineHeight: 1 };
 
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 080f83377..cb4337859 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -5,6 +5,7 @@ import Component from './component';
 
 const mapStateToProps = state => ({
   location: currentLocation(state),
+  isMobile: state.app.isMobile
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/language-selector/component.js b/src/components/language-selector/component.js
index eedd93b1f..c4cdf5756 100644
--- a/src/components/language-selector/component.js
+++ b/src/components/language-selector/component.js
@@ -5,6 +5,7 @@ import Button from 'components/button';
 
 class LanguageSelect extends PureComponent {
   static propTypes = {
+    isMobile: PropTypes.bool.isRequired,
     language: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
@@ -47,11 +48,12 @@ class LanguageSelect extends PureComponent {
   }
 
   render() {
-    const { language, data } = this.props;
+    const { language, data, isMobile } = this.props;
 
     const options = data.map(lang => ({
       label: lang.name,
-      value: lang.code
+      value: lang.code,
+      code: (lang.code.split('_')[0]).toUpperCase()
     }));
     const currentValue = options.find(o => o.value === language);
     if (!data || !currentValue) return null;
@@ -67,7 +69,7 @@ class LanguageSelect extends PureComponent {
             key={`lang-${o.value}`}
             onClick={() => this.handleChange({ langCode: o.value })}
           >
-            {o.label}
+            {isMobile ? o.code : o.label }
           </Button>
         ))}
       </ButtonGroup>
diff --git a/src/components/language-selector/index.js b/src/components/language-selector/index.js
index 63d75b791..ab2f14237 100644
--- a/src/components/language-selector/index.js
+++ b/src/components/language-selector/index.js
@@ -5,6 +5,7 @@ import Component from './component';
 const mapStateToProps = state => ({
   language: state.languages.current,
   data: state.languages.list,
+  isMobile: state.app.isMobile
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/language-selector/style.module.scss b/src/components/language-selector/style.module.scss
index 9a56f4174..cad078f2a 100644
--- a/src/components/language-selector/style.module.scss
+++ b/src/components/language-selector/style.module.scss
@@ -4,7 +4,6 @@
   border: 2px solid rgba(0,0,0,0.2);
   display: inline-flex;
   position: relative;
-  height: 26px;
   border-radius: 15px;
 
   button {
@@ -19,7 +18,6 @@
       text-align: center;
       border: 2px solid white;
       margin: -2px;
-      height: 30px;
       background-color: $white;
       color: $primary;
       border-bottom: 3px solid white;
diff --git a/src/config/store.js b/src/config/store.js
index 5b8c674a6..a7022f2b4 100644
--- a/src/config/store.js
+++ b/src/config/store.js
@@ -6,6 +6,7 @@ import { all, fork } from 'redux-saga/effects';
 
 // import { PAGES } from 'modules/pages/constants';
 
+import * as app from 'modules/app';
 import * as pages from 'modules/pages';
 import * as map from 'modules/map';
 import * as mapStyles from 'modules/map-styles';
@@ -24,6 +25,7 @@ import router from './router';
 // });
 
 const modules = [
+  { namespace: 'app', components: app },
   { namespace: 'page', components: pages },
   { namespace: 'map', components: map },
   { namespace: 'layers', components: layers },
diff --git a/src/modules/app/actions.js b/src/modules/app/actions.js
index 7766b3827..610a6a0e3 100644
--- a/src/modules/app/actions.js
+++ b/src/modules/app/actions.js
@@ -1,3 +1,5 @@
 import { createAction } from 'vizzuality-redux-tools';
 
-export const setHeader = createAction('PAGE/HEADER');
+const setScreen = createAction('APP/MOBILE');
+
+export default setScreen;
diff --git a/src/modules/app/index.js b/src/modules/app/index.js
index b9809dcf0..1e936b317 100644
--- a/src/modules/app/index.js
+++ b/src/modules/app/index.js
@@ -1,6 +1,5 @@
 import * as actions from './actions';
 import * as reducers from './reducers';
-import sagas from './sagas';
 import initialState from './initial-state';
 
-export { actions, initialState, reducers, sagas };
+export { actions, initialState, reducers };
diff --git a/src/modules/app/initial-state.js b/src/modules/app/initial-state.js
index fe472cbe2..2a90bcfca 100644
--- a/src/modules/app/initial-state.js
+++ b/src/modules/app/initial-state.js
@@ -1,3 +1,3 @@
 export default {
-  headerFixed: 'false'
+  isMobile: true
 };
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index c7372f579..a52cb6436 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,10 +1,8 @@
-import { pageActions } from './actions';
+import setScreen from './actions';
 
-const setHeader = (state, { payload }) => ({ ...state, header: key, payload });
-
-const reducerMap = Object.keys(pageActions).reduce(
-  (acc, key) => ({ ...acc, [key]: setPageReducer(key) }),
-  {}
-);
-
-export default reducerMap;
+export default {
+  [setScreen]: (state, { payload }) => ({
+    ...state,
+    isMobile: payload,
+  })
+};
diff --git a/src/modules/app/sagas.js b/src/modules/app/sagas.js
deleted file mode 100644
index 58c98a02b..000000000
--- a/src/modules/app/sagas.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { takeLatest, put, select } from 'redux-saga/effects';
-import { fetchLocations, closeSearchPanel, setCurrent } from 'modules/locations/actions';
-import { fetchDashboards } from 'modules/dashboards/actions';
-import { fetchWidgets } from 'modules/widgets/actions';
-import { fetchLayers } from 'modules/layers/actions';
-import { fetchMapStyles } from 'modules/map-styles/actions';
-
-function* loadInitialData({ payload }) {
-  const { locations, dashboards, widgets, layers, mapStyles } = yield select();
-  if (!locations.list.length) yield put(fetchLocations());
-  if (!dashboards.list.length) yield put(fetchDashboards());
-  if (!widgets.list.length) yield put(fetchWidgets());
-  if (!layers.list.length) yield put(fetchLayers());
-  if (!mapStyles.layers) yield put(fetchMapStyles());
-  yield put(closeSearchPanel());
-
-  /**
-   * Set current location
-   */
-  if (payload.id || payload.iso) {
-    yield put(setCurrent({ ...payload }));
-  } else {
-    yield put(setCurrent({ id: 'global' }));
-  }
-}
-
-export default function* pages() {
-  yield takeLatest('PAGE/APP', loadInitialData);
-  yield takeLatest('PAGE/COUNTRY', loadInitialData);
-  yield takeLatest('PAGE/AOI', loadInitialData);
-  yield takeLatest('PAGE/WDPA', loadInitialData);
-}
diff --git a/src/modules/pages/initial-state.js b/src/modules/pages/initial-state.js
index 83e4e6b58..6ddc48775 100644
--- a/src/modules/pages/initial-state.js
+++ b/src/modules/pages/initial-state.js
@@ -1,4 +1,3 @@
 export default {
   current: 'APP',
-  headerFixed: 'false'
 };

From 1f69b9173385f952ebdf1984f8801e214b565a6e Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 15:05:30 +0200
Subject: [PATCH 06/28] action bar in header

---
 src/components/header/style.module.scss  |  4 +++
 src/components/sidebar/component.js      | 39 ++++++++++++++++++++----
 src/components/sidebar/index.js          |  8 +++--
 src/components/sidebar/style.module.scss | 13 ++++++++
 src/components/widgets/component.js      | 28 ++---------------
 src/components/widgets/index.js          |  8 +----
 src/components/widgets/style.module.scss |  8 -----
 src/pages/app/index.js                   |  2 --
 8 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 3bed0426f..1d09676e6 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -82,6 +82,10 @@
     :global(.svg-inline--fa path) {
       fill: $primary;
     }
+    @media screen and (max-width: map-get($breakpoints, sm)) {
+      height: 50px;
+      width: 50px;
+    }
     svg {
       @media screen and (max-width: map-get($breakpoints, sm)) {
         height: 30px;
diff --git a/src/components/sidebar/component.js b/src/components/sidebar/component.js
index 09421ea47..379dd9d97 100644
--- a/src/components/sidebar/component.js
+++ b/src/components/sidebar/component.js
@@ -2,23 +2,40 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import OnScroll from 'react-on-scroll';
 import Header from 'components/header';
+import Button from 'components/button';
+import LanguageSelect from 'components/language-selector';
 import styles from './style.module.scss';
 
 class Dashboard extends Component {
   static propTypes = {
-    children: PropTypes.node
-  };
+    children: PropTypes.node,
+    collapseAll: PropTypes.func,
+    expandAll: PropTypes.func
+  }
 
   static defaultProps = {
-    children: null
-  };
+    children: null,
+    collapseAll: () => null,
+    expandAll: () => null
+  }
 
   state = { sticky: false }
 
   setSticky = sticky => this.setState({ sticky })
 
+  onClickCollapseAll = () => {
+    const { collapseAll } = this.props;
+    collapseAll();
+  }
+
+  onClickExpandAll = () => {
+    const { expandAll } = this.props;
+    expandAll();
+  }
+
+
   render() {
-    const { children } = this.props;
+    const { children, isCollapsed } = this.props;
     const { sticky } = this.state;
 
     return (
@@ -28,7 +45,17 @@ class Dashboard extends Component {
           { top: -65, callback: sticky => this.setSticky(!sticky) },
         ]}
       >
-        <Header sticky={sticky} />
+        <div className={styles.header}>
+          <Header sticky={sticky} />
+          <div className={styles.actionBar}>
+            {
+              isCollapsed
+                ? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
+                : <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
+            }
+            <LanguageSelect />
+          </div>
+        </div>
         {children}
       </OnScroll>
     );
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
index 4e5d129a9..6183fef67 100644
--- a/src/components/sidebar/index.js
+++ b/src/components/sidebar/index.js
@@ -1,13 +1,17 @@
 import { connect } from 'react-redux';
 import { setHeader } from 'modules/pages/actions';
+import { expandAll, collapseAll } from 'modules/widgets/actions';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  header: state.page.header
+  header: state.page.header,
+  isCollapsed: state.widgets.isCollapsed
 });
 
 const mapDispatchToProps = {
-  setHeader
+  setHeader,
+  collapseAll,
+  expandAll
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index 27bfbfcde..0a6d766b6 100644
--- a/src/components/sidebar/style.module.scss
+++ b/src/components/sidebar/style.module.scss
@@ -7,7 +7,20 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  box-sizing: border-box;
   @media screen and (max-width: map-get($breakpoints, md)) {
     padding: 5px;
   }
+  .header {
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      padding: 10px;
+    }
+  }
+  .actionBar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
 }
diff --git a/src/components/widgets/component.js b/src/components/widgets/component.js
index a51c7e638..49661cac7 100644
--- a/src/components/widgets/component.js
+++ b/src/components/widgets/component.js
@@ -1,8 +1,6 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Widget from 'components/widget';
-import Button from 'components/button';
-import LanguageSelect from 'components/language-selector';
 import TEMPLATES from 'components/widget/templates';
 import CONFIGS from 'components/widget/templates/configs';
 import styles from './style.module.scss';
@@ -15,39 +13,17 @@ class WidgetList extends PureComponent {
         title: PropTypes.string
       })
     ),
-    collapseAll: PropTypes.func,
-    expandAll: PropTypes.func
   }
 
   static defaultProps = {
-    widgets: [],
-    collapseAll: () => null,
-    expandAll: () => null
-  }
-
-  onClickCollapseAll = () => {
-    const { collapseAll } = this.props;
-    collapseAll();
-  }
-
-  onClickExpandAll = () => {
-    const { expandAll } = this.props;
-    expandAll();
+    widgets: []
   }
 
   render() {
-    const { isCollapsed, widgets } = this.props;
+    const { widgets } = this.props;
 
     return (
       <div className={styles.widgets}>
-        <div className={styles.actionBar}>
-          {
-            isCollapsed
-              ? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
-              : <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
-          }
-          <LanguageSelect />
-        </div>
         {widgets.map(widget => (
           <Widget
             key={widget.id}
diff --git a/src/components/widgets/index.js b/src/components/widgets/index.js
index 135045c09..d18a46d99 100644
--- a/src/components/widgets/index.js
+++ b/src/components/widgets/index.js
@@ -1,16 +1,10 @@
 import { connect } from 'react-redux';
-import { expandAll, collapseAll } from 'modules/widgets/actions';
 import { dashboardWidgets } from 'modules/widgets/selectors';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  isCollapsed: state.widgets.isCollapsed,
   widgets: dashboardWidgets(state)
 });
 
-const mapDispatchToProps = {
-  collapseAll,
-  expandAll
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Component);
+export default connect(mapStateToProps)(Component);
diff --git a/src/components/widgets/style.module.scss b/src/components/widgets/style.module.scss
index ace0df566..596fe7c49 100644
--- a/src/components/widgets/style.module.scss
+++ b/src/components/widgets/style.module.scss
@@ -3,11 +3,3 @@
   max-width: 540px;
   z-index: 300;
 }
-
-.actionBar {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: space-between;
-}
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index edb36bc4c..8b4c6d10b 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -3,7 +3,6 @@ import Widgets from 'components/widgets';
 import Map from 'components/map';
 import LocationModal from 'components/location-modal';
 import Sidebar from 'components/sidebar';
-import ViewSelector from 'components/view-selector';
 import MediaQuery from 'react-responsive';
 import styles from './style.module.scss';
 
@@ -13,7 +12,6 @@ const AppPage = () => (
     <MediaQuery maxWidth={384}>
       <Sidebar>
         <Widgets />
-        <ViewSelector />
       </Sidebar>
     </MediaQuery>
     <MediaQuery minWidth={384}>

From 790690dff98a682a70d6d0966c97ec684127668f Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 16:32:01 +0200
Subject: [PATCH 07/28] hotspots widget mobile

---
 src/components/widget/style.module.scss        |  5 ++++-
 .../conservation-hotspots/component.js         |  8 +++++---
 .../conservation-hotspots/style.module.scss    | 18 ++++++++++++------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index 66a236c90..1b0587a83 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -2,7 +2,7 @@
 
 .widget {
   $padding: 30px;
-  $paddingMobile: 20px;
+  $paddingMobile: 10px;
   $border-radius: 20px;
 
   position: relative;
@@ -20,7 +20,10 @@
   will-change: margin-bottom;
 
   @media screen and (max-width: map-get($breakpoints, md)) {
+    display: flex;
+    flex-direction: column;
     padding: $paddingMobile;
+    margin-bottom: 0;
   }
 
   &.collapsed {
diff --git a/src/components/widget/templates/conservation-hotspots/component.js b/src/components/widget/templates/conservation-hotspots/component.js
index 3ce571b3d..291ad529c 100644
--- a/src/components/widget/templates/conservation-hotspots/component.js
+++ b/src/components/widget/templates/conservation-hotspots/component.js
@@ -16,9 +16,11 @@ const ConservationHotspots = ({ conservationHotspots, currentLocation }) => {
           key={d.id}
           className={classnames(styles.card, { [styles.active]: d.id === currentLocation.id })}
         >
-          <h3 className="notranslate">{d.name}</h3>
-          <p><span className="notranslate">{numberFormat(d.length_coast_m / 1000)}</span> <span>km coastline</span></p>
-          {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}>View place</Link>}
+          <span clasName={styles.cardInfo}>
+            <h3 className="notranslate">{d.name}</h3>
+            <p><span className="notranslate">{numberFormat(d.length_coast_m / 1000)}</span> <span>km coastline</span></p>
+          </span>
+          {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}><span className={styles.link}>View place</span></Link>}
         </div>
       ))}
     </div>
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index 35c662a0e..04f545b30 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -5,20 +5,26 @@
   align-items: stretch;
   margin-top: 30px;
 
-  @media screen and (max-width: map-get($breakpoints, md)) {
+  @media screen and (max-width: map-get($breakpoints, sm)) {
     flex-direction: column;
     justify-content: space-around;
+    div:not(:last-child) {
+        margin-bottom: 10px;
+    }
   }
 
   .card {
-    flex: 1;
-    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     padding: 20px 30px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 20px;
-      @media screen and (max-width: map-get($breakpoints, md)) {
-        flex-direction: column;
-        justify-content: space-between;
+    width: auto;
+    margin-bottom: 50px;
+      @media screen and (max-width: map-get($breakpoints, sm)) {
+        flex-direction: row;
+        vertical-align: bottom;
 
     }
     .cardInfo {

From 307b71c0a83da454f55148cf87c681d899fe1e44 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 16:50:55 +0200
Subject: [PATCH 08/28] typo error

---
 .../templates/conservation-hotspots/component.js   |  4 ++--
 .../conservation-hotspots/style.module.scss        | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/widget/templates/conservation-hotspots/component.js b/src/components/widget/templates/conservation-hotspots/component.js
index 291ad529c..1a662aa36 100644
--- a/src/components/widget/templates/conservation-hotspots/component.js
+++ b/src/components/widget/templates/conservation-hotspots/component.js
@@ -16,11 +16,11 @@ const ConservationHotspots = ({ conservationHotspots, currentLocation }) => {
           key={d.id}
           className={classnames(styles.card, { [styles.active]: d.id === currentLocation.id })}
         >
-          <span clasName={styles.cardInfo}>
+          <span className={styles.cardInfo}>
             <h3 className="notranslate">{d.name}</h3>
             <p><span className="notranslate">{numberFormat(d.length_coast_m / 1000)}</span> <span>km coastline</span></p>
           </span>
-          {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}><span className={styles.link}>View place</span></Link>}
+          {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}><span>View place</span></Link>}
         </div>
       ))}
     </div>
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index 04f545b30..6e71f6b88 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -2,7 +2,6 @@
 
 .hotspotsList {
   display: flex;
-  align-items: stretch;
   margin-top: 30px;
 
   @media screen and (max-width: map-get($breakpoints, sm)) {
@@ -16,20 +15,27 @@
   .card {
     display: flex;
     flex-direction: column;
+    align-items: flex-end;
     justify-content: space-between;
     padding: 20px 30px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 20px;
     width: auto;
     margin-bottom: 50px;
-      @media screen and (max-width: map-get($breakpoints, sm)) {
-        flex-direction: row;
-        vertical-align: bottom;
 
+    @media screen and (max-width: map-get($breakpoints, sm)) {
+      flex-direction: row;
+      vertical-align: bottom;
     }
+
     .cardInfo {
       display: inline;
+      p {
+        margin-bottom: 0;
+      }
     }
+
+
     h3 {
       margin-top: 0;
     }

From bd1e0b8e6f0b45a6adcb0180078e14cf4f6b2a68 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 17:14:49 +0200
Subject: [PATCH 09/28] indentation

---
 src/components/widgets/component.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/widgets/component.js b/src/components/widgets/component.js
index a51c7e638..ad9f10ff1 100644
--- a/src/components/widgets/component.js
+++ b/src/components/widgets/component.js
@@ -41,11 +41,24 @@ class WidgetList extends PureComponent {
     return (
       <div className={styles.widgets}>
         <div className={styles.actionBar}>
-          {
-            isCollapsed
-              ? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
-              : <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
-          }
+          {isCollapsed && (
+            <Button
+              hasBackground
+              hasContrast
+              onClick={this.onClickExpandAll}
+            >
+              Expand all widgets
+            </Button>
+          )}
+          {!isCollapsed && (
+            <Button
+              isTransparent
+              isGrey
+              onClick={this.onClickCollapseAll}
+            >
+              Collapse all widgets
+            </Button>
+          )}
           <LanguageSelect />
         </div>
         {widgets.map(widget => (

From b2f59ba3dd7ae136a8f7de578d5e15814aacea20 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 18:09:50 +0200
Subject: [PATCH 10/28] background, widgets arrow

---
 src/components/sidebar/style.module.scss                   | 3 +++
 src/components/widget/component.js                         | 7 +++++--
 src/components/widget/style.module.scss                    | 7 +++++--
 .../templates/conservation-hotspots/style.module.scss      | 2 +-
 src/pages/app/style.module.scss                            | 1 -
 src/styles/_vars.scss                                      | 2 +-
 src/styles/main.scss                                       | 4 ++++
 7 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index 0a6d766b6..e1aa01ce2 100644
--- a/src/components/sidebar/style.module.scss
+++ b/src/components/sidebar/style.module.scss
@@ -22,5 +22,8 @@
     margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
+    @media screen and (max-width: map-get($breakpoints, md)) {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index 0e6e14939..190b480d2 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Button from 'components/button';
 import Spinner from 'components/spinner';
+import MediaQuery from 'react-responsive';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import classnames from 'classnames';
@@ -68,9 +69,11 @@ class Widget extends PureComponent {
             className={styles.title}
             onClick={this.collapseToggleHandler}
           >
+          <MediaQuery minWidth={384}>
             {isCollapsed
-              ? <FontAwesomeIcon icon={faChevronDown} />
-              : <FontAwesomeIcon icon={faChevronUp} />}
+                ? <FontAwesomeIcon icon={faChevronDown} />
+                : <FontAwesomeIcon icon={faChevronUp} />}
+          </MediaQuery>
             {name}
           </button>
           {layerId && (
diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index 1b0587a83..bfbcc4f06 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -2,7 +2,7 @@
 
 .widget {
   $padding: 30px;
-  $paddingMobile: 10px;
+  $paddingMobile: 20px;
   $border-radius: 20px;
 
   position: relative;
@@ -18,6 +18,7 @@
 
   transition: all .5s ease;
   will-change: margin-bottom;
+  overflow: hidden;
 
   @media screen and (max-width: map-get($breakpoints, md)) {
     display: flex;
@@ -29,6 +30,9 @@
   &.collapsed {
     margin-bottom: -45px;
     background-position: 0;
+    @media screen and (max-width: map-get($breakpoints, sm)) {
+      margin-bottom: -37px;
+    }
 
     .content {
       max-height: 0px;
@@ -80,7 +84,6 @@
   }
 
   .content {
-    overflow: hidden;
     transition: max-height .5s ease-in-out;
     will-change: max-height;
     max-height: 700px;
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index 6e71f6b88..db2a0a9f0 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -2,7 +2,7 @@
 
 .hotspotsList {
   display: flex;
-  margin-top: 30px;
+  margin: 20px -10px -10px -10px;
 
   @media screen and (max-width: map-get($breakpoints, sm)) {
     flex-direction: column;
diff --git a/src/pages/app/style.module.scss b/src/pages/app/style.module.scss
index a7fd2ed2c..f61783e80 100644
--- a/src/pages/app/style.module.scss
+++ b/src/pages/app/style.module.scss
@@ -41,6 +41,5 @@
   }
   @media screen and (max-width: map-get($breakpoints, md)) {
     max-width: 100%;
-    background-color: $header;
   }
 }
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 4110575eb..1b6567815 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -4,7 +4,7 @@ $body-line-height: 1.4;
 
 /* Theme */
 $primary: #00857F;
-$header: #00C5BD;
+$background-mobile: #00C5BD;
 $black: #000000;
 $white: #FFFFFF;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 4e31893bb..e7bb99828 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -8,6 +8,10 @@ body {
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  @media screen and (max-width: map-get($breakpoints, md)) {
+    background-color: $background-mobile
+  }
+
 }
 
 button {

From 66fc5f7b1cf67c4c903f4f517b783aea27dcb2d4 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Wed, 7 Aug 2019 19:06:05 +0200
Subject: [PATCH 11/28] desktop styles fixed

---
 src/components/widget/component.js            |  6 ++---
 src/components/widget/style.module.scss       |  5 +++++
 .../conservation-hotspots/style.module.scss   | 22 +++++++++++++------
 src/modules/app/initial-state.js              |  2 +-
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index 190b480d2..8d6ffb234 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -69,11 +69,11 @@ class Widget extends PureComponent {
             className={styles.title}
             onClick={this.collapseToggleHandler}
           >
-          <MediaQuery minWidth={384}>
-            {isCollapsed
+            <MediaQuery minWidth={384}>
+              {isCollapsed
                 ? <FontAwesomeIcon icon={faChevronDown} />
                 : <FontAwesomeIcon icon={faChevronUp} />}
-          </MediaQuery>
+            </MediaQuery>
             {name}
           </button>
           {layerId && (
diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index bfbcc4f06..862a13f82 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -87,6 +87,11 @@
     transition: max-height .5s ease-in-out;
     will-change: max-height;
     max-height: 700px;
+    overflow: hidden;
+
+    @media screen and (max-width: map-get($breakpoints, sm)) {
+      overflow: visible;
+    }
   }
 }
 
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index db2a0a9f0..9db686578 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -2,11 +2,14 @@
 
 .hotspotsList {
   display: flex;
-  margin: 20px -10px -10px -10px;
+  align-items: stretch;
+  margin-top: 30px;
+  justify-content: space-between;
 
   @media screen and (max-width: map-get($breakpoints, sm)) {
     flex-direction: column;
     justify-content: space-around;
+    margin: 20px -10px -10px -10px;
     div:not(:last-child) {
         margin-bottom: 10px;
     }
@@ -15,41 +18,46 @@
   .card {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
     justify-content: space-between;
+    flex: 1 1;
+    width: 50%;
     padding: 20px 30px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 20px;
     width: auto;
-    margin-bottom: 50px;
 
     @media screen and (max-width: map-get($breakpoints, sm)) {
       flex-direction: row;
       vertical-align: bottom;
+      align-items: flex-end;
+
     }
 
     .cardInfo {
       display: inline;
-      p {
-        margin-bottom: 0;
+      @media screen and (max-width: map-get($breakpoints, sm)) {
+        p {
+          margin-bottom: 0;
+        }
       }
     }
 
 
     h3 {
       margin-top: 0;
+      font-size: 19px;
     }
 
     &:first-child {
       margin-right: 10px;
-      @media screen and (max-width: map-get($breakpoints, md)) {
+      @media screen and (max-width: map-get($breakpoints, sm)) {
         margin-right: 0;
       }
     }
 
     &:last-child {
       margin-left: 10px;
-      @media screen and (max-width: map-get($breakpoints, md)) {
+      @media screen and (max-width: map-get($breakpoints, sm)) {
         margin-left: 0;
       }
     }
diff --git a/src/modules/app/initial-state.js b/src/modules/app/initial-state.js
index 2a90bcfca..3522c8bf3 100644
--- a/src/modules/app/initial-state.js
+++ b/src/modules/app/initial-state.js
@@ -1,3 +1,3 @@
 export default {
-  isMobile: true
+  isMobile: false
 };

From fccf8fd92ffc2c49a7e71c74b0742c03b7ff04c8 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 11:26:10 +0200
Subject: [PATCH 12/28] view map btn and active layers

---
 src/components/view-selector/component.js     | 12 +++---
 src/components/view-selector/index.js         |  4 +-
 .../view-selector/style.module.scss           | 40 ++++++++++++++++---
 src/modules/widgets/selectors.js              |  6 +++
 src/pages/app/index.js                        |  2 +
 5 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/view-selector/component.js b/src/components/view-selector/component.js
index 82075d74a..443a9ddfb 100644
--- a/src/components/view-selector/component.js
+++ b/src/components/view-selector/component.js
@@ -8,12 +8,14 @@ import styles from './style.module.scss';
 class ViewSelector extends PureComponent {
   static propTypes = {
     mapView: PropTypes.bool,
-    setMapView: PropTypes.func
+    setMapView: PropTypes.func,
+    activeLayers: PropTypes.number
   };
 
   static defaultProps = {
     mapView: true,
-    setMapView: () => null
+    setMapView: () => null,
+    activeLayers: null
   };
 
   onChangeView = () => {
@@ -22,8 +24,7 @@ class ViewSelector extends PureComponent {
   }
 
   render() {
-    const { mapView } = this.props;
-
+    const { mapView, activeLayers } = this.props;
     return (
       <div className={styles.container}>
         <Button
@@ -31,7 +32,8 @@ class ViewSelector extends PureComponent {
           hasContrast
           onClick={this.onChangeView}
         >
-          {mapView ? 'Map View' : 'Whatever view'}
+          <div className={styles.btnTitle}>{mapView ? 'Map View' : 'Whatever view'}</div>
+          <span className={styles.btnInfo}>{activeLayers}</span>
         </Button>
       </div>
     );
diff --git a/src/components/view-selector/index.js b/src/components/view-selector/index.js
index 2e7c6448f..4b6e49a18 100644
--- a/src/components/view-selector/index.js
+++ b/src/components/view-selector/index.js
@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { setMapView } from 'modules/map/actions';
+import { activeLayers } from 'modules/widgets/selectors';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  mapView: state.map.display
+  mapView: state.map.display,
+  activeLayers: activeLayers(state)
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/view-selector/style.module.scss b/src/components/view-selector/style.module.scss
index 7d5fd83b0..539d8fb3c 100644
--- a/src/components/view-selector/style.module.scss
+++ b/src/components/view-selector/style.module.scss
@@ -2,11 +2,41 @@
 
 .container {
   position: fixed;
-  z-index: 300;
-  bottom: 5vh;
-  right: 20px;
   left: 20px;
-  * {
-    width: 100%;
+  right: 20px;
+  z-index: 301;
+  background-color: $white;
+  bottom: 10px;
+  border-radius: 25px;
+  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.08);
+  min-height: 50px;
+
+  > button {
+    display: flex;
+    border-radius: 25px;
+    margin: auto;
+    height: 50px;
+  }
+  .btnTitle {
+    display: flex;
+    justify-content: center;
+    float: left;
+    min-width: 150px;
+    margin: 5px;
+    color: $black;
+
+  }
+
+  .btnInfo {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-weight: 200;
+    color: $primary;
+    padding: 5px;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 133, 127, 0.2);
+    border-radius: 50%;
   }
 }
diff --git a/src/modules/widgets/selectors.js b/src/modules/widgets/selectors.js
index f76ed69ba..6f4f2d0c5 100644
--- a/src/modules/widgets/selectors.js
+++ b/src/modules/widgets/selectors.js
@@ -22,6 +22,12 @@ export const activeWidgets = createSelector(
   _widgets => _widgets.filter(widget => widget.isActive)
 );
 
+export const activeLayers = createSelector(
+  [activeWidgets],
+  _activeWidgets => _activeWidgets.length
+);
+
+
 export const conservationHotspots = createSelector(
   [locations],
   (_locations) => {
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index 8b4c6d10b..7c2aa7a91 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -3,6 +3,7 @@ import Widgets from 'components/widgets';
 import Map from 'components/map';
 import LocationModal from 'components/location-modal';
 import Sidebar from 'components/sidebar';
+import ViewSelector from 'components/view-selector';
 import MediaQuery from 'react-responsive';
 import styles from './style.module.scss';
 
@@ -13,6 +14,7 @@ const AppPage = () => (
       <Sidebar>
         <Widgets />
       </Sidebar>
+      <ViewSelector />
     </MediaQuery>
     <MediaQuery minWidth={384}>
       <Sidebar>

From 63cf7388a5ab6706c74a11168d5e5e6c0a94d1d5 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 11:56:37 +0200
Subject: [PATCH 13/28] desktop layout component

---
 src/components/layout/desktop/component.js     | 18 ++++++++++++++++++
 src/components/layout/desktop/index.js         |  3 +++
 src/components/layout/desktop/stories.jsx      |  0
 .../layout/desktop/style.module.scss           | 10 ++++++++++
 src/modules/app/actions.js                     |  4 ++--
 src/modules/app/initial-state.js               |  6 +++++-
 src/modules/app/reducers.js                    | 10 ++++++++--
 src/pages/app/index.js                         | 10 ++--------
 src/pages/app/style.module.scss                |  8 --------
 9 files changed, 48 insertions(+), 21 deletions(-)
 create mode 100644 src/components/layout/desktop/component.js
 create mode 100644 src/components/layout/desktop/index.js
 create mode 100644 src/components/layout/desktop/stories.jsx
 create mode 100644 src/components/layout/desktop/style.module.scss

diff --git a/src/components/layout/desktop/component.js b/src/components/layout/desktop/component.js
new file mode 100644
index 000000000..c2d97a296
--- /dev/null
+++ b/src/components/layout/desktop/component.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Widgets from 'components/widgets';
+import Map from 'components/map';
+import Sidebar from 'components/sidebar';
+import styles from './style.module.scss';
+
+const DesktopLayout = () => (
+  <div>
+    <Sidebar>
+      <Widgets />
+    </Sidebar>
+    <div className={styles.vis}>
+      <Map />
+    </div>
+  </div>
+);
+
+export default DesktopLayout;
diff --git a/src/components/layout/desktop/index.js b/src/components/layout/desktop/index.js
new file mode 100644
index 000000000..5081bc3d6
--- /dev/null
+++ b/src/components/layout/desktop/index.js
@@ -0,0 +1,3 @@
+import DesktopLayout from './component';
+
+export default DesktopLayout;
diff --git a/src/components/layout/desktop/stories.jsx b/src/components/layout/desktop/stories.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/layout/desktop/style.module.scss b/src/components/layout/desktop/style.module.scss
new file mode 100644
index 000000000..e06204089
--- /dev/null
+++ b/src/components/layout/desktop/style.module.scss
@@ -0,0 +1,10 @@
+@import '../../styles/vars';
+
+.vis {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 1;
+}
diff --git a/src/modules/app/actions.js b/src/modules/app/actions.js
index 610a6a0e3..727ea4ace 100644
--- a/src/modules/app/actions.js
+++ b/src/modules/app/actions.js
@@ -1,5 +1,5 @@
 import { createAction } from 'vizzuality-redux-tools';
 
-const setScreen = createAction('APP/MOBILE');
+export const setScreen = createAction('APP/MOBILE');
 
-export default setScreen;
+export const setView = createAction('APP/MOBILE');
diff --git a/src/modules/app/initial-state.js b/src/modules/app/initial-state.js
index 2a90bcfca..5348798ae 100644
--- a/src/modules/app/initial-state.js
+++ b/src/modules/app/initial-state.js
@@ -1,3 +1,7 @@
 export default {
-  isMobile: true
+  isMobile: false,
+  mobile: {
+    active: true,
+    map: true
+  }
 };
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index a52cb6436..407e33e67 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,8 +1,14 @@
-import setScreen from './actions';
+import { setScreen, setView } from './actions';
 
 export default {
   [setScreen]: (state, { payload }) => ({
     ...state,
-    isMobile: payload,
+    isMobile: payload
+  }),
+  [setView]: (state, { payload }) => ({
+    ...state,
+    mobile: {
+      map: payload
+    }
   })
 };
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index 7c2aa7a91..da8f9a132 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Widgets from 'components/widgets';
-import Map from 'components/map';
+import DesktopLayout from 'components/layout/desktop';
 import LocationModal from 'components/location-modal';
 import Sidebar from 'components/sidebar';
 import ViewSelector from 'components/view-selector';
@@ -17,13 +17,7 @@ const AppPage = () => (
       <ViewSelector />
     </MediaQuery>
     <MediaQuery minWidth={384}>
-      <Sidebar>
-        <Widgets />
-      </Sidebar>
-      <div className={styles.vis}>
-        <Map />
-      </div>
-
+      <DesktopLayout />
     </MediaQuery>
     {/* Modals */}
     <LocationModal />
diff --git a/src/pages/app/style.module.scss b/src/pages/app/style.module.scss
index f61783e80..8605e1596 100644
--- a/src/pages/app/style.module.scss
+++ b/src/pages/app/style.module.scss
@@ -2,14 +2,6 @@
 
 .app {
 
-  .vis {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    z-index: 1;
-  }
 
   .overlay {
     position: absolute;

From 5679f8ac9fc1b0395f07ee931a32381aea626afe Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 12:14:11 +0200
Subject: [PATCH 14/28] mobile layout component

---
 src/components/layout/desktop/component.js    |  2 +-
 src/components/layout/desktop/stories.jsx     |  0
 src/components/layout/mobile/component.js     | 33 +++++++++++++++++++
 src/components/layout/mobile/index.js         |  8 +++++
 .../layout/{desktop => }/style.module.scss    |  0
 src/pages/app/index.js                        |  9 ++---
 6 files changed, 44 insertions(+), 8 deletions(-)
 delete mode 100644 src/components/layout/desktop/stories.jsx
 create mode 100644 src/components/layout/mobile/component.js
 create mode 100644 src/components/layout/mobile/index.js
 rename src/components/layout/{desktop => }/style.module.scss (100%)

diff --git a/src/components/layout/desktop/component.js b/src/components/layout/desktop/component.js
index c2d97a296..366626f4a 100644
--- a/src/components/layout/desktop/component.js
+++ b/src/components/layout/desktop/component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Widgets from 'components/widgets';
 import Map from 'components/map';
 import Sidebar from 'components/sidebar';
-import styles from './style.module.scss';
+import styles from '../style.module.scss';
 
 const DesktopLayout = () => (
   <div>
diff --git a/src/components/layout/desktop/stories.jsx b/src/components/layout/desktop/stories.jsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/layout/mobile/component.js b/src/components/layout/mobile/component.js
new file mode 100644
index 000000000..57f2523b7
--- /dev/null
+++ b/src/components/layout/mobile/component.js
@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Widgets from 'components/widgets';
+import Sidebar from 'components/sidebar';
+import Map from 'components/map';
+import ViewSelector from 'components/view-selector';
+import styles from '../style.module.scss';
+
+class MobileLayout extends PureComponent {
+  static propTypes = {
+    mapView: PropTypes.bool.isRequired
+  }
+
+  render() {
+    const { mapView } = this.props;
+    return (
+      <div>
+        {!mapView && (
+          <Sidebar>
+            <Widgets />
+          </Sidebar>
+        )}
+        {mapView && (
+          <div className={styles.vis}>
+            <Map />
+          </div>)}
+        <ViewSelector />
+      </div>
+    );
+  }
+}
+
+export default MobileLayout;
diff --git a/src/components/layout/mobile/index.js b/src/components/layout/mobile/index.js
new file mode 100644
index 000000000..25285b00b
--- /dev/null
+++ b/src/components/layout/mobile/index.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import Component from './component';
+
+const mapStateToProps = state => ({
+  mapView: state.app.mobile.map,
+});
+
+export default connect(mapStateToProps)(Component);
diff --git a/src/components/layout/desktop/style.module.scss b/src/components/layout/style.module.scss
similarity index 100%
rename from src/components/layout/desktop/style.module.scss
rename to src/components/layout/style.module.scss
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index da8f9a132..eb0efadba 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import Widgets from 'components/widgets';
 import DesktopLayout from 'components/layout/desktop';
+import MobileLayout from 'components/layout/mobile';
 import LocationModal from 'components/location-modal';
-import Sidebar from 'components/sidebar';
-import ViewSelector from 'components/view-selector';
 import MediaQuery from 'react-responsive';
 import styles from './style.module.scss';
 
@@ -11,10 +9,7 @@ import styles from './style.module.scss';
 const AppPage = () => (
   <div className={styles.app}>
     <MediaQuery maxWidth={384}>
-      <Sidebar>
-        <Widgets />
-      </Sidebar>
-      <ViewSelector />
+      <MobileLayout />
     </MediaQuery>
     <MediaQuery minWidth={384}>
       <DesktopLayout />

From 91925ffe285fe7c9c48640a6ae80e43345ab80ab Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 16:23:01 +0200
Subject: [PATCH 15/28] layers collapsed in map view

---
 src/components/basemap-selector/component.js  | 12 +++--
 src/components/basemap-selector/index.js      |  3 +-
 .../basemap-selector/style.module.scss        |  3 ++
 src/components/map-legend/component.js        | 44 ++++++++++++++++---
 src/components/map-legend/index.js            |  6 ++-
 .../map-legend/legend-item/component.js       | 10 +++--
 .../map-legend/legend-item/index.js           |  6 ++-
 .../map-legend/legend-item/style.module.scss  |  4 +-
 src/components/map-legend/style.module.scss   | 35 +++++++++++++++
 src/components/map/component.js               |  5 ++-
 src/components/map/index.js                   |  3 +-
 src/components/map/style.module.scss          |  8 ++++
 src/components/view-selector/component.js     |  7 ++-
 src/components/view-selector/index.js         |  2 +-
 src/modules/layers/actions.js                 |  1 +
 src/modules/layers/initial-state.js           |  3 +-
 src/modules/layers/reducers.js                | 10 ++++-
 src/styles/main.scss                          |  1 +
 18 files changed, 137 insertions(+), 26 deletions(-)
 create mode 100644 src/components/map-legend/style.module.scss

diff --git a/src/components/basemap-selector/component.js b/src/components/basemap-selector/component.js
index 5a337c6fb..6bf3be453 100644
--- a/src/components/basemap-selector/component.js
+++ b/src/components/basemap-selector/component.js
@@ -16,7 +16,8 @@ const thumbs = {
 class BasemapSelector extends PureComponent {
   static propTypes = {
     basemapName: PropTypes.string,
-    setBasemap: PropTypes.func
+    setBasemap: PropTypes.func,
+    isCollapsed: PropTypes.bool.isRequired
   };
 
   static defaultProps = {
@@ -32,11 +33,16 @@ class BasemapSelector extends PureComponent {
   }
 
   render() {
-    const { basemapName } = this.props;
+    const { basemapName, isCollapsed } = this.props;
     const currentBasemap = basemaps.find(b => b.id === basemapName);
 
     return (
-      <div className={classnames('mapboxgl-ctrl', styles.basemap)}>
+      <div className={classnames(
+        'mapboxgl-ctrl',
+        styles.basemap,
+        { [styles.collapse]: isCollapsed }
+      )}
+      >
         <div className={styles.current}>
           <h3>Map style</h3>
           <div>{currentBasemap.name}</div>
diff --git a/src/components/basemap-selector/index.js b/src/components/basemap-selector/index.js
index 66add9cd6..8a8efeb7f 100644
--- a/src/components/basemap-selector/index.js
+++ b/src/components/basemap-selector/index.js
@@ -4,7 +4,8 @@ import { setBasemap } from 'modules/map/actions';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  basemapName: state.map.basemap
+  basemapName: state.map.basemap,
+  isCollapsed: state.layers.isCollapsed
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/basemap-selector/style.module.scss b/src/components/basemap-selector/style.module.scss
index d97b79f5a..39053d708 100644
--- a/src/components/basemap-selector/style.module.scss
+++ b/src/components/basemap-selector/style.module.scss
@@ -10,6 +10,9 @@
   border-radius: 10px;
   box-shadow: 0 4px 12px 0 rgba(168,168,168,0.25);
 
+  &.collapse {
+    display: none;
+  }
   .current {
     margin-right: 30px;
 
diff --git a/src/components/map-legend/component.js b/src/components/map-legend/component.js
index f8f7c113f..077c01bf7 100644
--- a/src/components/map-legend/component.js
+++ b/src/components/map-legend/component.js
@@ -1,15 +1,47 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import LegendItem from './legend-item';
+import styles from './style.module.scss';
 
-const Legend = ({ layers }) => (
-  <Fragment>
-    {layers.map(layer => <LegendItem key={layer.id} {...layer} />)}
-  </Fragment>
-);
+const Legend = ({ layers, isCollapsed, toggleCollapse, isMobile }) => {
+  const onToggleCollapsed = () => {
+    toggleCollapse(!isCollapsed);
+  };
+
+  return (
+    <Fragment>
+      {isMobile && (
+        <div className={styles.layersCollapse}>
+          <div className={classnames(styles.title,
+            { [styles.collapse]: !isCollapsed })}
+          >
+            <span>Layers</span>
+          </div>
+          <button
+            type="button"
+            className={styles.layersBtn}
+            onClick={onToggleCollapsed}
+          >
+            {isCollapsed
+              ? <FontAwesomeIcon icon={faChevronDown} />
+              : <FontAwesomeIcon icon={faChevronUp} />
+            }
+          </button>
+        </div>
+      )}
+      {layers.map(layer => <LegendItem key={layer.id} {...layer} />)}
+    </Fragment>
+  );
+};
 
 Legend.propTypes = {
-  layers: PropTypes.arrayOf(PropTypes.shape({}))
+  layers: PropTypes.arrayOf(PropTypes.shape({})),
+  isCollapsed: PropTypes.bool.isRequired,
+  toggleCollapse: PropTypes.func.isRequired,
+  isMobile: PropTypes.bool.isRequired
 };
 
 Legend.defaultProps = {
diff --git a/src/components/map-legend/index.js b/src/components/map-legend/index.js
index 8fa860862..988b2a75a 100644
--- a/src/components/map-legend/index.js
+++ b/src/components/map-legend/index.js
@@ -1,12 +1,16 @@
 import { connect } from 'react-redux';
 import { activeLayersForLegend } from 'modules/layers/selectors';
+import { toggleCollapse } from 'modules/layers/actions';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  layers: activeLayersForLegend(state)
+  layers: activeLayersForLegend(state),
+  isCollapsed: state.layers.isCollapsed,
+  isMobile: state.app.mobile.active
 });
 
 const mapDispatchToProps = {
+  toggleCollapse
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/map-legend/legend-item/component.js b/src/components/map-legend/legend-item/component.js
index 060358c69..eff3eb331 100644
--- a/src/components/map-legend/legend-item/component.js
+++ b/src/components/map-legend/legend-item/component.js
@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import classnames from 'classnames';
 import styles from './style.module.scss';
 
-const LegendItem = ({ id, name, toggleActive }) => {
+const LegendItem = ({ id, name, toggleActive, isCollapsed }) => {
   const onClickHandler = () => toggleActive({ id, isActive: false });
 
   return (
-    <div className={styles.legendItem}>
+    <div className={classnames(styles.legendItem,
+      { [styles.collapse]: isCollapsed })}
+    >
       <h3>{name}</h3>
       <button className={styles.removeButton} type="button" onClick={onClickHandler}>
         <FontAwesomeIcon icon={faTimes} />
@@ -20,7 +23,8 @@ const LegendItem = ({ id, name, toggleActive }) => {
 LegendItem.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  toggleActive: PropTypes.func
+  toggleActive: PropTypes.func,
+  isCollapsed: PropTypes.bool.isRequired
 };
 
 LegendItem.defaultProps = {
diff --git a/src/components/map-legend/legend-item/index.js b/src/components/map-legend/legend-item/index.js
index 562ec56af..e4ac701d1 100644
--- a/src/components/map-legend/legend-item/index.js
+++ b/src/components/map-legend/legend-item/index.js
@@ -2,8 +2,12 @@ import { connect } from 'react-redux';
 import { toggleActive } from 'modules/layers/actions';
 import Component from './component';
 
+const mapStateToProps = state => ({
+  isCollapsed: state.layers.isCollapsed
+});
+
 const mapDispatchToProps = {
   toggleActive
 };
 
-export default connect(null, mapDispatchToProps)(Component);
+export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/map-legend/legend-item/style.module.scss b/src/components/map-legend/legend-item/style.module.scss
index 1f85d84ec..53b2593de 100644
--- a/src/components/map-legend/legend-item/style.module.scss
+++ b/src/components/map-legend/legend-item/style.module.scss
@@ -1,7 +1,6 @@
 @import '../../../styles/vars';
 
 .legendItem {
-  display: flex;
   align-items: center;
   justify-content: space-between;
 
@@ -11,6 +10,9 @@
   border-radius: 10px;
   box-shadow: 0 4px 12px 0 rgba(168,168,168,0.25);
 
+  &.collapse {
+    display: none;
+  }
   > h3 {
     @include upper-text;
   }
diff --git a/src/components/map-legend/style.module.scss b/src/components/map-legend/style.module.scss
new file mode 100644
index 000000000..4a50a2fa0
--- /dev/null
+++ b/src/components/map-legend/style.module.scss
@@ -0,0 +1,35 @@
+@import '../../../styles/vars';
+
+.layersCollapse {
+  display: flex;
+  justify-content: flex-end;
+  > * {
+    padding: 0 20px 5px 20px;
+    margin-bottom: 5px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px 0 rgba(168,168,168,0.25);
+    align-items: center;
+  }
+  > div {
+    width: 100%;
+  }
+  .title {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    line-height: 15px;
+    display: flex;
+    margin-right: 5px;
+
+    &.collapse {
+      display: none;
+    }
+  }
+  .layersBtn {
+    width: 15px;
+    height: 45px;
+    box-sizing: content-box;
+  }
+}
diff --git a/src/components/map/component.js b/src/components/map/component.js
index e8d4ac286..48d6e2cce 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -54,7 +54,8 @@ class Map extends PureComponent {
     const {
       mapboxApiAccessToken,
       mapStyle,
-      viewport
+      viewport,
+      isMobile
     } = this.props;
 
     return (
@@ -69,7 +70,7 @@ class Map extends PureComponent {
         onViewportChange={this.onViewportChange}
       >
         <div className={styles.navigation}>
-          <NavigationControl />
+          {!isMobile && <NavigationControl />}
         </div>
         <div className={styles.legend}>
           <Legend />
diff --git a/src/components/map/index.js b/src/components/map/index.js
index 7db12673c..e1072be78 100644
--- a/src/components/map/index.js
+++ b/src/components/map/index.js
@@ -7,7 +7,8 @@ import Component from './component';
 const mapStateToProps = state => ({
   ...state.map,
   mapStyle: mapStyle(state),
-  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN
+  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
+  isMobile: state.app
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/map/style.module.scss b/src/components/map/style.module.scss
index ec000f55e..b4dbc3e67 100644
--- a/src/components/map/style.module.scss
+++ b/src/components/map/style.module.scss
@@ -1,4 +1,8 @@
+@import '../../../styles/vars';
+
 $space-around-map: 30px;
+$space-top-map-mobile: 5px;
+$space-left-map-mobile: 20px;
 
 .map {
   background: white;
@@ -14,6 +18,10 @@ $space-around-map: 30px;
   position: absolute;
   right: $space-around-map;
   bottom: $space-around-map;
+  @media screen and (max-width: map-get($breakpoints, sm)) {
+    top: $space-top-map-mobile;
+    left: $space-left-map-mobile;
+  }
 }
 
 // Mapbox override
diff --git a/src/components/view-selector/component.js b/src/components/view-selector/component.js
index 443a9ddfb..9c47a5247 100644
--- a/src/components/view-selector/component.js
+++ b/src/components/view-selector/component.js
@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import Button from 'components/button';
 import styles from './style.module.scss';
 
@@ -18,8 +17,8 @@ class ViewSelector extends PureComponent {
     activeLayers: null
   };
 
-  onChangeView = () => {
-    const { mapView, setMapView } = this.props;
+  onChangeView = (mapView) => {
+    const { setMapView } = this.props;
     setMapView(!mapView);
   }
 
@@ -30,7 +29,7 @@ class ViewSelector extends PureComponent {
         <Button
           hasBackground
           hasContrast
-          onClick={this.onChangeView}
+          onClick={() => this.onChangeView(mapView)}
         >
           <div className={styles.btnTitle}>{mapView ? 'Map View' : 'Whatever view'}</div>
           <span className={styles.btnInfo}>{activeLayers}</span>
diff --git a/src/components/view-selector/index.js b/src/components/view-selector/index.js
index 4b6e49a18..6a5973eb1 100644
--- a/src/components/view-selector/index.js
+++ b/src/components/view-selector/index.js
@@ -4,7 +4,7 @@ import { activeLayers } from 'modules/widgets/selectors';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  mapView: state.map.display,
+  mapView: state.app.mobile.map,
   activeLayers: activeLayers(state)
 });
 
diff --git a/src/modules/layers/actions.js b/src/modules/layers/actions.js
index 8118d26a2..c88926159 100644
--- a/src/modules/layers/actions.js
+++ b/src/modules/layers/actions.js
@@ -4,5 +4,6 @@ export const fetchRequested = createAction('LAYERS/FETCH_REQUESTED');
 export const fetchSucceeded = createAction('LAYERS/FETCH_SUCCEDED');
 export const fetchFailed = createAction('LAYERS/FETCH_FAILED');
 export const fetchLayers = createAction('LAYERS/FETCH_ALL');
+export const toggleCollapse = createAction('LAYERS/TOGGLE_COLLAPSE');
 
 export const toggleActive = createAction('LAYERS/TOGGLE_ACTIVE');
diff --git a/src/modules/layers/initial-state.js b/src/modules/layers/initial-state.js
index 431cbce69..42fea2034 100644
--- a/src/modules/layers/initial-state.js
+++ b/src/modules/layers/initial-state.js
@@ -1,5 +1,6 @@
 export default {
   list: [],
   isLoading: false,
-  error: null
+  error: null,
+  isCollapsed: true
 };
diff --git a/src/modules/layers/reducers.js b/src/modules/layers/reducers.js
index ff903c036..7ea0f4a88 100644
--- a/src/modules/layers/reducers.js
+++ b/src/modules/layers/reducers.js
@@ -1,4 +1,8 @@
-import { fetchRequested, fetchSucceeded, fetchFailed, toggleActive } from './actions';
+import { fetchRequested,
+  fetchSucceeded,
+  fetchFailed,
+  toggleActive,
+  toggleCollapse } from './actions';
 
 export default {
   [fetchRequested]: state => ({
@@ -16,6 +20,10 @@ export default {
     isLoading: false,
     error: payload
   }),
+  [toggleCollapse]: (state, { payload }) => ({
+    ...state,
+    isCollapsed: payload,
+  }),
   [toggleActive]: (state, { payload }) => ({
     ...state,
     list: state.list.map((item) => {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e7bb99828..893690c1d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,6 +15,7 @@ body {
 }
 
 button {
+  border: none;
   background: none;
   cursor: pointer;
 

From fef9e7085a71f7fb7930e47353ef09d089ca27db Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 17:16:16 +0200
Subject: [PATCH 16/28] mediaqueries added

---
 package.json                                  |  1 +
 src/components/header/component.js            | 29 ++++++++++++-------
 src/components/header/index.js                |  3 +-
 src/components/language-selector/component.js | 12 ++++++--
 src/components/language-selector/index.js     |  1 -
 src/components/layout/mobile/index.js         |  2 +-
 src/components/map-legend/component.js        | 11 +++----
 src/components/map-legend/index.js            |  3 +-
 src/components/map/component.js               |  8 +++--
 src/components/map/index.js                   |  3 +-
 src/modules/app/actions.js                    |  4 +--
 src/modules/app/initial-state.js              |  4 +--
 src/modules/app/reducers.js                   |  8 ++---
 yarn.lock                                     |  5 ++++
 14 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 5849e3abb..b367016a4 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-csv": "^1.1.1",
+    "react-device-detect": "^1.7.5",
     "react-dom": "^16.8.6",
     "react-map-gl": "^5.0.3",
     "react-modal": "^3.9.1",
diff --git a/src/components/header/component.js b/src/components/header/component.js
index 328f21530..83220be38 100644
--- a/src/components/header/component.js
+++ b/src/components/header/component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import MediaQuery from 'react-responsive';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import background from './bg-shape.svg';
@@ -9,7 +10,6 @@ import styles from './style.module.scss';
 
 class Header extends PureComponent {
   static propTypes = {
-    isMobile: PropTypes.bool.isRequired,
     sticky: PropTypes.bool,
     location: PropTypes.shape({
       name: PropTypes.string
@@ -30,12 +30,9 @@ class Header extends PureComponent {
 
 
   render() {
-    const { location, sticky, isMobile } = this.props;
+    const { location, sticky } = this.props;
     let stylesOverride = { fontSize: 60, lineHeight: 0.85 };
 
-    if (isMobile) stylesOverride = { fontSize: 35, lineHeight: 0.85 };
-
-
     if (location && location.name.length > 10) stylesOverride = { fontSize: 45, lineHeight: 1 };
     if (location && location.name.length > 30) stylesOverride = { fontSize: 30, lineHeight: 1 };
 
@@ -61,12 +58,22 @@ class Header extends PureComponent {
           </button>
           {location && (
             <button type="button" className={styles.titleBtn} onClick={this.clickHandler}>
-              <h1
-                className={classnames(styles.title, 'notranslate')}
-                style={stylesOverride}
-              >
-                {location.name}
-              </h1>
+              <MediaQuery minWidth={384}>
+                <h1
+                  className={classnames(styles.title, 'notranslate')}
+                  style={stylesOverride}
+                >
+                  {location.name}
+                </h1>
+              </MediaQuery>
+              <MediaQuery maxWidth={384}>
+                <h1
+                  className={classnames(styles.title, 'notranslate')}
+                  style={{ fontSize: 35, lineHeight: 0.85 }}
+                >
+                  {location.name}
+                </h1>
+              </MediaQuery>
             </button>
           )}
         </div>
diff --git a/src/components/header/index.js b/src/components/header/index.js
index cb4337859..722619c18 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -4,8 +4,7 @@ import { openSearchPanel } from 'modules/locations/actions';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  location: currentLocation(state),
-  isMobile: state.app.isMobile
+  location: currentLocation(state)
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/language-selector/component.js b/src/components/language-selector/component.js
index c4cdf5756..91c01eadf 100644
--- a/src/components/language-selector/component.js
+++ b/src/components/language-selector/component.js
@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import ButtonGroup from 'components/buttonGroup';
 import Button from 'components/button';
 
 class LanguageSelect extends PureComponent {
   static propTypes = {
-    isMobile: PropTypes.bool.isRequired,
     language: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
@@ -48,7 +48,7 @@ class LanguageSelect extends PureComponent {
   }
 
   render() {
-    const { language, data, isMobile } = this.props;
+    const { language, data } = this.props;
 
     const options = data.map(lang => ({
       label: lang.name,
@@ -69,7 +69,13 @@ class LanguageSelect extends PureComponent {
             key={`lang-${o.value}`}
             onClick={() => this.handleChange({ langCode: o.value })}
           >
-            {isMobile ? o.code : o.label }
+            <MediaQuery maxWidth={384}>
+              { o.code }
+            </MediaQuery>
+            <MediaQuery minWidth={384}>
+              { o.label}
+            </MediaQuery>
+
           </Button>
         ))}
       </ButtonGroup>
diff --git a/src/components/language-selector/index.js b/src/components/language-selector/index.js
index ab2f14237..63d75b791 100644
--- a/src/components/language-selector/index.js
+++ b/src/components/language-selector/index.js
@@ -5,7 +5,6 @@ import Component from './component';
 const mapStateToProps = state => ({
   language: state.languages.current,
   data: state.languages.list,
-  isMobile: state.app.isMobile
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/layout/mobile/index.js b/src/components/layout/mobile/index.js
index 25285b00b..381b87a23 100644
--- a/src/components/layout/mobile/index.js
+++ b/src/components/layout/mobile/index.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  mapView: state.app.mobile.map,
+  mapView: state.app.mobile.mapView
 });
 
 export default connect(mapStateToProps)(Component);
diff --git a/src/components/map-legend/component.js b/src/components/map-legend/component.js
index 077c01bf7..95a21e02b 100644
--- a/src/components/map-legend/component.js
+++ b/src/components/map-legend/component.js
@@ -1,19 +1,20 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import MediaQuery from 'react-responsive';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import LegendItem from './legend-item';
 import styles from './style.module.scss';
 
-const Legend = ({ layers, isCollapsed, toggleCollapse, isMobile }) => {
+const Legend = ({ layers, isCollapsed, toggleCollapse }) => {
   const onToggleCollapsed = () => {
     toggleCollapse(!isCollapsed);
   };
 
   return (
     <Fragment>
-      {isMobile && (
+      <MediaQuery maxWidth={384}>
         <div className={styles.layersCollapse}>
           <div className={classnames(styles.title,
             { [styles.collapse]: !isCollapsed })}
@@ -31,7 +32,8 @@ const Legend = ({ layers, isCollapsed, toggleCollapse, isMobile }) => {
             }
           </button>
         </div>
-      )}
+      </MediaQuery>
+
       {layers.map(layer => <LegendItem key={layer.id} {...layer} />)}
     </Fragment>
   );
@@ -40,8 +42,7 @@ const Legend = ({ layers, isCollapsed, toggleCollapse, isMobile }) => {
 Legend.propTypes = {
   layers: PropTypes.arrayOf(PropTypes.shape({})),
   isCollapsed: PropTypes.bool.isRequired,
-  toggleCollapse: PropTypes.func.isRequired,
-  isMobile: PropTypes.bool.isRequired
+  toggleCollapse: PropTypes.func.isRequired
 };
 
 Legend.defaultProps = {
diff --git a/src/components/map-legend/index.js b/src/components/map-legend/index.js
index 988b2a75a..1fbd97c99 100644
--- a/src/components/map-legend/index.js
+++ b/src/components/map-legend/index.js
@@ -5,8 +5,7 @@ import Component from './component';
 
 const mapStateToProps = state => ({
   layers: activeLayersForLegend(state),
-  isCollapsed: state.layers.isCollapsed,
-  isMobile: state.app.mobile.active
+  isCollapsed: state.layers.isCollapsed
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/map/component.js b/src/components/map/component.js
index 48d6e2cce..158d54d78 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import BasemapSelector from 'components/basemap-selector';
 import Legend from 'components/map-legend';
 import styles from './style.module.scss';
@@ -54,8 +55,7 @@ class Map extends PureComponent {
     const {
       mapboxApiAccessToken,
       mapStyle,
-      viewport,
-      isMobile
+      viewport
     } = this.props;
 
     return (
@@ -70,7 +70,9 @@ class Map extends PureComponent {
         onViewportChange={this.onViewportChange}
       >
         <div className={styles.navigation}>
-          {!isMobile && <NavigationControl />}
+          <MediaQuery minWidth={384}>
+            <NavigationControl />
+          </MediaQuery>
         </div>
         <div className={styles.legend}>
           <Legend />
diff --git a/src/components/map/index.js b/src/components/map/index.js
index e1072be78..7db12673c 100644
--- a/src/components/map/index.js
+++ b/src/components/map/index.js
@@ -7,8 +7,7 @@ import Component from './component';
 const mapStateToProps = state => ({
   ...state.map,
   mapStyle: mapStyle(state),
-  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
-  isMobile: state.app
+  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN
 });
 
 const mapDispatchToProps = {
diff --git a/src/modules/app/actions.js b/src/modules/app/actions.js
index 727ea4ace..a311cbd01 100644
--- a/src/modules/app/actions.js
+++ b/src/modules/app/actions.js
@@ -1,5 +1,5 @@
 import { createAction } from 'vizzuality-redux-tools';
 
-export const setScreen = createAction('APP/MOBILE');
+const setView = createAction('APP/MOBILE');
 
-export const setView = createAction('APP/MOBILE');
+export default setView;
diff --git a/src/modules/app/initial-state.js b/src/modules/app/initial-state.js
index 5348798ae..f07f1de2b 100644
--- a/src/modules/app/initial-state.js
+++ b/src/modules/app/initial-state.js
@@ -1,7 +1,5 @@
 export default {
-  isMobile: false,
   mobile: {
-    active: true,
-    map: true
+    mapView: true
   }
 };
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index 407e33e67..c10dfee92 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,14 +1,10 @@
-import { setScreen, setView } from './actions';
+import setView from './actions';
 
 export default {
-  [setScreen]: (state, { payload }) => ({
-    ...state,
-    isMobile: payload
-  }),
   [setView]: (state, { payload }) => ({
     ...state,
     mobile: {
-      map: payload
+      mapView: payload
     }
   })
 };
diff --git a/yarn.lock b/yarn.lock
index fa9589302..0d03bd94d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10628,6 +10628,11 @@ react-dev-utils@^9.0.0, react-dev-utils@^9.0.1:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
+react-device-detect@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.7.5.tgz#04c8a6475d67b5ac4f984c8d912ec11134f5b893"
+  integrity sha512-ccgJuTHVCI3yfqvgU56gQDvjueFyaHVAXsa5rJuzWRasvsd0IalzfyccSECIlygjv3E+DmAGcwNYWUarUA82Fw==
+
 react-docgen@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.1.tgz#8fef0212dbf14733e09edecef1de6b224d87219e"

From 5c1804ad56e5c1bb9ecad117871cd8a88c3ea208 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 17:16:42 +0200
Subject: [PATCH 17/28] unused dependencies removed

---
 package.json | 1 -
 yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/package.json b/package.json
index b367016a4..5849e3abb 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-csv": "^1.1.1",
-    "react-device-detect": "^1.7.5",
     "react-dom": "^16.8.6",
     "react-map-gl": "^5.0.3",
     "react-modal": "^3.9.1",
diff --git a/yarn.lock b/yarn.lock
index 0d03bd94d..fa9589302 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10628,11 +10628,6 @@ react-dev-utils@^9.0.0, react-dev-utils@^9.0.1:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-device-detect@^1.7.5:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.7.5.tgz#04c8a6475d67b5ac4f984c8d912ec11134f5b893"
-  integrity sha512-ccgJuTHVCI3yfqvgU56gQDvjueFyaHVAXsa5rJuzWRasvsd0IalzfyccSECIlygjv3E+DmAGcwNYWUarUA82Fw==
-
 react-docgen@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.1.tgz#8fef0212dbf14733e09edecef1de6b224d87219e"

From 6613a399e04fad9c50b59d9086b054e286af03ae Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 17:57:22 +0200
Subject: [PATCH 18/28] mediaqueries fix

---
 src/components/header/component.js            |  5 +++--
 src/components/language-selector/component.js |  6 +++---
 src/components/map-legend/component.js        |  4 ++--
 src/components/map/component.js               |  4 ++--
 src/components/view-selector/component.js     | 12 ++++++------
 src/components/view-selector/index.js         |  6 +++---
 src/components/widget/component.js            |  4 ++--
 src/modules/app/actions.js                    |  4 ++--
 src/modules/app/reducers.js                   |  5 +++--
 src/modules/map/actions.js                    |  2 +-
 src/modules/map/reducers.js                   |  2 +-
 src/pages/app/index.js                        |  6 +++---
 src/utils/responsive.js                       | 10 ++++++++++
 13 files changed, 41 insertions(+), 29 deletions(-)
 create mode 100644 src/utils/responsive.js

diff --git a/src/components/header/component.js b/src/components/header/component.js
index 83220be38..efdbddbfc 100644
--- a/src/components/header/component.js
+++ b/src/components/header/component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
+import { breakpoints } from 'utils/responsive';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import background from './bg-shape.svg';
@@ -58,7 +59,7 @@ class Header extends PureComponent {
           </button>
           {location && (
             <button type="button" className={styles.titleBtn} onClick={this.clickHandler}>
-              <MediaQuery minWidth={384}>
+              <MediaQuery minWidth={breakpoints.md}>
                 <h1
                   className={classnames(styles.title, 'notranslate')}
                   style={stylesOverride}
@@ -66,7 +67,7 @@ class Header extends PureComponent {
                   {location.name}
                 </h1>
               </MediaQuery>
-              <MediaQuery maxWidth={384}>
+              <MediaQuery maxWidth={breakpoints.md - 1}>
                 <h1
                   className={classnames(styles.title, 'notranslate')}
                   style={{ fontSize: 35, lineHeight: 0.85 }}
diff --git a/src/components/language-selector/component.js b/src/components/language-selector/component.js
index 91c01eadf..386bf3e12 100644
--- a/src/components/language-selector/component.js
+++ b/src/components/language-selector/component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import ButtonGroup from 'components/buttonGroup';
+import { breakpoints } from 'utils/responsive';import ButtonGroup from 'components/buttonGroup';
 import Button from 'components/button';
 
 class LanguageSelect extends PureComponent {
@@ -69,10 +69,10 @@ class LanguageSelect extends PureComponent {
             key={`lang-${o.value}`}
             onClick={() => this.handleChange({ langCode: o.value })}
           >
-            <MediaQuery maxWidth={384}>
+            <MediaQuery minWidth={breakpoints.md - 1}>
               { o.code }
             </MediaQuery>
-            <MediaQuery minWidth={384}>
+            <MediaQuery minWidth={breakpoints.md}>
               { o.label}
             </MediaQuery>
 
diff --git a/src/components/map-legend/component.js b/src/components/map-legend/component.js
index 95a21e02b..112169c07 100644
--- a/src/components/map-legend/component.js
+++ b/src/components/map-legend/component.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { breakpoints } from 'utils/responsive';import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import LegendItem from './legend-item';
 import styles from './style.module.scss';
@@ -14,7 +14,7 @@ const Legend = ({ layers, isCollapsed, toggleCollapse }) => {
 
   return (
     <Fragment>
-      <MediaQuery maxWidth={384}>
+      <MediaQuery maxWidth={breakpoints.md - 1}>
         <div className={styles.layersCollapse}>
           <div className={classnames(styles.title,
             { [styles.collapse]: !isCollapsed })}
diff --git a/src/components/map/component.js b/src/components/map/component.js
index 158d54d78..b92133021 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import BasemapSelector from 'components/basemap-selector';
+import { breakpoints } from 'utils/responsive';import BasemapSelector from 'components/basemap-selector';
 import Legend from 'components/map-legend';
 import styles from './style.module.scss';
 
@@ -70,7 +70,7 @@ class Map extends PureComponent {
         onViewportChange={this.onViewportChange}
       >
         <div className={styles.navigation}>
-          <MediaQuery minWidth={384}>
+          <MediaQuery minWidth={breakpoints.md}>
             <NavigationControl />
           </MediaQuery>
         </div>
diff --git a/src/components/view-selector/component.js b/src/components/view-selector/component.js
index 9c47a5247..9640ec949 100644
--- a/src/components/view-selector/component.js
+++ b/src/components/view-selector/component.js
@@ -7,19 +7,19 @@ import styles from './style.module.scss';
 class ViewSelector extends PureComponent {
   static propTypes = {
     mapView: PropTypes.bool,
-    setMapView: PropTypes.func,
+    setMobileView: PropTypes.func,
     activeLayers: PropTypes.number
   };
 
   static defaultProps = {
     mapView: true,
-    setMapView: () => null,
+    setMobileView: () => null,
     activeLayers: null
   };
 
-  onChangeView = (mapView) => {
-    const { setMapView } = this.props;
-    setMapView(!mapView);
+  onChangeView = () => {
+    const { setMobileView, mapView } = this.props;
+    setMobileView(!mapView);
   }
 
   render() {
@@ -29,7 +29,7 @@ class ViewSelector extends PureComponent {
         <Button
           hasBackground
           hasContrast
-          onClick={() => this.onChangeView(mapView)}
+          onClick={this.onChangeView}
         >
           <div className={styles.btnTitle}>{mapView ? 'Map View' : 'Whatever view'}</div>
           <span className={styles.btnInfo}>{activeLayers}</span>
diff --git a/src/components/view-selector/index.js b/src/components/view-selector/index.js
index 6a5973eb1..071d00c11 100644
--- a/src/components/view-selector/index.js
+++ b/src/components/view-selector/index.js
@@ -1,15 +1,15 @@
 import { connect } from 'react-redux';
-import { setMapView } from 'modules/map/actions';
+import { setMobileView } from 'modules/map/actions';
 import { activeLayers } from 'modules/widgets/selectors';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  mapView: state.app.mobile.map,
+  mapView: state.app.mobile.mapView,
   activeLayers: activeLayers(state)
 });
 
 const mapDispatchToProps = {
-  setMapView
+  setMobileView
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index 8d6ffb234..ed5594123 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Button from 'components/button';
 import Spinner from 'components/spinner';
 import MediaQuery from 'react-responsive';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { breakpoints } from 'utils/responsive';import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import classnames from 'classnames';
 import styles from './style.module.scss';
@@ -69,7 +69,7 @@ class Widget extends PureComponent {
             className={styles.title}
             onClick={this.collapseToggleHandler}
           >
-            <MediaQuery minWidth={384}>
+            <MediaQuery minWidth={breakpoints.md}>
               {isCollapsed
                 ? <FontAwesomeIcon icon={faChevronDown} />
                 : <FontAwesomeIcon icon={faChevronUp} />}
diff --git a/src/modules/app/actions.js b/src/modules/app/actions.js
index a311cbd01..9cfe0c6fb 100644
--- a/src/modules/app/actions.js
+++ b/src/modules/app/actions.js
@@ -1,5 +1,5 @@
 import { createAction } from 'vizzuality-redux-tools';
 
-const setView = createAction('APP/MOBILE');
+const setMobileView = createAction('APP/MOBILE');
 
-export default setView;
+export default setMobileView;
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index c10dfee92..74d7aed34 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,9 +1,10 @@
-import setView from './actions';
+import setMobileView from './actions';
 
 export default {
-  [setView]: (state, { payload }) => ({
+  [setMobileView]: (state, { payload }) => ({
     ...state,
     mobile: {
+      ...state.mobile,
       mapView: payload
     }
   })
diff --git a/src/modules/map/actions.js b/src/modules/map/actions.js
index 7c90b5838..7a9316e84 100644
--- a/src/modules/map/actions.js
+++ b/src/modules/map/actions.js
@@ -3,4 +3,4 @@ import { createAction } from 'vizzuality-redux-tools';
 export const resetViewport = createAction('MAP/RESET_VIEWPORT');
 export const setViewport = createAction('MAP/SET_VIEWPORT');
 export const setBasemap = createAction('MAP/SET_BASEMAP');
-export const setMapView = createAction('MAP/SET_MAP_VIEW');
+export const setMobileView = createAction('MAP/SET_MAP_VIEW');
diff --git a/src/modules/map/reducers.js b/src/modules/map/reducers.js
index 1cf9e2310..415628c12 100644
--- a/src/modules/map/reducers.js
+++ b/src/modules/map/reducers.js
@@ -21,7 +21,7 @@ export default {
     ...state,
     basemap: payload
   }),
-  [actions.setMapView]: (state, { payload }) => ({
+  [actions.setMobileView]: (state, { payload }) => ({
     ...state,
     display: payload
   })
diff --git a/src/pages/app/index.js b/src/pages/app/index.js
index eb0efadba..8b4e6a91e 100644
--- a/src/pages/app/index.js
+++ b/src/pages/app/index.js
@@ -3,15 +3,15 @@ import DesktopLayout from 'components/layout/desktop';
 import MobileLayout from 'components/layout/mobile';
 import LocationModal from 'components/location-modal';
 import MediaQuery from 'react-responsive';
-import styles from './style.module.scss';
+import { breakpoints } from 'utils/responsive';import styles from './style.module.scss';
 
 
 const AppPage = () => (
   <div className={styles.app}>
-    <MediaQuery maxWidth={384}>
+    <MediaQuery maxWidth={breakpoints.md - 1}>
       <MobileLayout />
     </MediaQuery>
-    <MediaQuery minWidth={384}>
+    <MediaQuery minWidth={breakpoints.md}>
       <DesktopLayout />
     </MediaQuery>
     {/* Modals */}
diff --git a/src/utils/responsive.js b/src/utils/responsive.js
new file mode 100644
index 000000000..eedde732d
--- /dev/null
+++ b/src/utils/responsive.js
@@ -0,0 +1,10 @@
+export const breakpoints = {
+  sm: 384,
+  md: 768,
+  lg: 992,
+  xlg: 1280
+};
+
+export default {
+  breakpoints
+};

From 7bb3f9168b6a00bde2bc854a5df0bb90644a48ed Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Thu, 8 Aug 2019 18:25:41 +0200
Subject: [PATCH 19/28] map btn functionality

---
 src/components/basemap-selector/component.js       |  7 ++++---
 src/components/basemap-selector/index.js           |  3 ++-
 src/components/header/style.module.scss            | 14 +++++++-------
 src/components/language-selector/component.js      |  2 +-
 src/components/map/component.js                    |  3 ++-
 src/components/map/style.module.scss               |  2 +-
 src/components/view-selector/index.js              |  2 +-
 src/components/widget/style.module.scss            |  4 ++--
 .../conservation-hotspots/style.module.scss        | 10 +++++-----
 src/modules/app/actions.js                         |  6 ++++--
 src/modules/app/initial-state.js                   |  2 +-
 src/modules/app/reducers.js                        |  2 +-
 src/modules/map/actions.js                         |  1 -
 src/modules/map/reducers.js                        |  4 ----
 14 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/basemap-selector/component.js b/src/components/basemap-selector/component.js
index 6bf3be453..153ec3366 100644
--- a/src/components/basemap-selector/component.js
+++ b/src/components/basemap-selector/component.js
@@ -17,7 +17,8 @@ class BasemapSelector extends PureComponent {
   static propTypes = {
     basemapName: PropTypes.string,
     setBasemap: PropTypes.func,
-    isCollapsed: PropTypes.bool.isRequired
+    isCollapsed: PropTypes.bool.isRequired,
+    mapView: PropTypes.bool.isRequired
   };
 
   static defaultProps = {
@@ -33,14 +34,14 @@ class BasemapSelector extends PureComponent {
   }
 
   render() {
-    const { basemapName, isCollapsed } = this.props;
+    const { basemapName, isCollapsed, mapView } = this.props;
     const currentBasemap = basemaps.find(b => b.id === basemapName);
 
     return (
       <div className={classnames(
         'mapboxgl-ctrl',
         styles.basemap,
-        { [styles.collapse]: isCollapsed }
+        { [styles.collapse]: isCollapsed && mapView }
       )}
       >
         <div className={styles.current}>
diff --git a/src/components/basemap-selector/index.js b/src/components/basemap-selector/index.js
index 8a8efeb7f..f23122850 100644
--- a/src/components/basemap-selector/index.js
+++ b/src/components/basemap-selector/index.js
@@ -5,7 +5,8 @@ import Component from './component';
 
 const mapStateToProps = state => ({
   basemapName: state.map.basemap,
-  isCollapsed: state.layers.isCollapsed
+  isCollapsed: state.layers.isCollapsed,
+  mapView: state.app.mobile.mapView
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 1d09676e6..4a932644c 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -3,7 +3,7 @@
 .header {
   display: flex;
   margin-bottom: 50px;
-  @media screen and (max-width: map-get($breakpoints, sm)) {
+  @media screen and (max-width: map-get($breakpoints, md)) {
     margin-bottom: 25px;
   }
 
@@ -19,7 +19,7 @@
     &.isHidden {
       display: none;
     }
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       display: none;
     }
   }
@@ -27,7 +27,7 @@
   .bgFixed {
     position: fixed;
     z-index: 100;
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       display: none;
     }
   }
@@ -41,7 +41,7 @@
       position: fixed;
       top: -65px;
     }
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       margin-top: 20px;
       font-size: 35px;
     }
@@ -64,7 +64,7 @@
     font-weight: 300;
     line-height: 0.85;
 
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       font-size: 35px;
     }
   }
@@ -82,12 +82,12 @@
     :global(.svg-inline--fa path) {
       fill: $primary;
     }
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       height: 50px;
       width: 50px;
     }
     svg {
-      @media screen and (max-width: map-get($breakpoints, sm)) {
+      @media screen and (max-width: map-get($breakpoints, md)) {
         height: 30px;
         width: 30px;
         vertical-align: 0;
diff --git a/src/components/language-selector/component.js b/src/components/language-selector/component.js
index 386bf3e12..b004b159f 100644
--- a/src/components/language-selector/component.js
+++ b/src/components/language-selector/component.js
@@ -69,7 +69,7 @@ class LanguageSelect extends PureComponent {
             key={`lang-${o.value}`}
             onClick={() => this.handleChange({ langCode: o.value })}
           >
-            <MediaQuery minWidth={breakpoints.md - 1}>
+            <MediaQuery maxWidth={breakpoints.md - 1}>
               { o.code }
             </MediaQuery>
             <MediaQuery minWidth={breakpoints.md}>
diff --git a/src/components/map/component.js b/src/components/map/component.js
index b92133021..73d565001 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from 'utils/responsive';import BasemapSelector from 'components/basemap-selector';
+import { breakpoints } from 'utils/responsive';
+import BasemapSelector from 'components/basemap-selector';
 import Legend from 'components/map-legend';
 import styles from './style.module.scss';
 
diff --git a/src/components/map/style.module.scss b/src/components/map/style.module.scss
index b4dbc3e67..5e39d5af9 100644
--- a/src/components/map/style.module.scss
+++ b/src/components/map/style.module.scss
@@ -18,7 +18,7 @@ $space-left-map-mobile: 20px;
   position: absolute;
   right: $space-around-map;
   bottom: $space-around-map;
-  @media screen and (max-width: map-get($breakpoints, sm)) {
+  @media screen and (max-width: map-get($breakpoints, md)) {
     top: $space-top-map-mobile;
     left: $space-left-map-mobile;
   }
diff --git a/src/components/view-selector/index.js b/src/components/view-selector/index.js
index 071d00c11..fa0bbd4bc 100644
--- a/src/components/view-selector/index.js
+++ b/src/components/view-selector/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { setMobileView } from 'modules/map/actions';
+import { setMobileView } from 'modules/app/actions';
 import { activeLayers } from 'modules/widgets/selectors';
 import Component from './component';
 
diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index 862a13f82..bd23dc3d5 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -30,7 +30,7 @@
   &.collapsed {
     margin-bottom: -45px;
     background-position: 0;
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       margin-bottom: -37px;
     }
 
@@ -89,7 +89,7 @@
     max-height: 700px;
     overflow: hidden;
 
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       overflow: visible;
     }
   }
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index 9db686578..33df8dd81 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -6,7 +6,7 @@
   margin-top: 30px;
   justify-content: space-between;
 
-  @media screen and (max-width: map-get($breakpoints, sm)) {
+  @media screen and (max-width: map-get($breakpoints, md)) {
     flex-direction: column;
     justify-content: space-around;
     margin: 20px -10px -10px -10px;
@@ -26,7 +26,7 @@
     border-radius: 20px;
     width: auto;
 
-    @media screen and (max-width: map-get($breakpoints, sm)) {
+    @media screen and (max-width: map-get($breakpoints, md)) {
       flex-direction: row;
       vertical-align: bottom;
       align-items: flex-end;
@@ -35,7 +35,7 @@
 
     .cardInfo {
       display: inline;
-      @media screen and (max-width: map-get($breakpoints, sm)) {
+      @media screen and (max-width: map-get($breakpoints, md)) {
         p {
           margin-bottom: 0;
         }
@@ -50,14 +50,14 @@
 
     &:first-child {
       margin-right: 10px;
-      @media screen and (max-width: map-get($breakpoints, sm)) {
+      @media screen and (max-width: map-get($breakpoints, md)) {
         margin-right: 0;
       }
     }
 
     &:last-child {
       margin-left: 10px;
-      @media screen and (max-width: map-get($breakpoints, sm)) {
+      @media screen and (max-width: map-get($breakpoints, md)) {
         margin-left: 0;
       }
     }
diff --git a/src/modules/app/actions.js b/src/modules/app/actions.js
index 9cfe0c6fb..386e1460e 100644
--- a/src/modules/app/actions.js
+++ b/src/modules/app/actions.js
@@ -1,5 +1,7 @@
 import { createAction } from 'vizzuality-redux-tools';
 
-const setMobileView = createAction('APP/MOBILE');
+export const setMobileView = createAction('APP/MOBILE');
 
-export default setMobileView;
+export default {
+  setMobileView
+};
diff --git a/src/modules/app/initial-state.js b/src/modules/app/initial-state.js
index f07f1de2b..39af165d9 100644
--- a/src/modules/app/initial-state.js
+++ b/src/modules/app/initial-state.js
@@ -1,5 +1,5 @@
 export default {
   mobile: {
-    mapView: true
+    mapView: false
   }
 };
diff --git a/src/modules/app/reducers.js b/src/modules/app/reducers.js
index 74d7aed34..bfa5e42d8 100644
--- a/src/modules/app/reducers.js
+++ b/src/modules/app/reducers.js
@@ -1,4 +1,4 @@
-import setMobileView from './actions';
+import { setMobileView } from './actions';
 
 export default {
   [setMobileView]: (state, { payload }) => ({
diff --git a/src/modules/map/actions.js b/src/modules/map/actions.js
index 7a9316e84..16c5f47a1 100644
--- a/src/modules/map/actions.js
+++ b/src/modules/map/actions.js
@@ -3,4 +3,3 @@ import { createAction } from 'vizzuality-redux-tools';
 export const resetViewport = createAction('MAP/RESET_VIEWPORT');
 export const setViewport = createAction('MAP/SET_VIEWPORT');
 export const setBasemap = createAction('MAP/SET_BASEMAP');
-export const setMobileView = createAction('MAP/SET_MAP_VIEW');
diff --git a/src/modules/map/reducers.js b/src/modules/map/reducers.js
index 415628c12..df8b7fc20 100644
--- a/src/modules/map/reducers.js
+++ b/src/modules/map/reducers.js
@@ -20,9 +20,5 @@ export default {
   [actions.setBasemap]: (state, { payload }) => ({
     ...state,
     basemap: payload
-  }),
-  [actions.setMobileView]: (state, { payload }) => ({
-    ...state,
-    display: payload
   })
 };

From 47d0c8bf6313f9fa44680efc7a6844be9e08f419 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 08:13:44 +0200
Subject: [PATCH 20/28] legend collapse

---
 src/components/map-legend/component.js      |  9 ++++++---
 src/components/map-legend/style.module.scss | 10 +++++++---
 src/components/map/component.js             | 13 +++++++++----
 src/components/map/index.js                 |  3 ++-
 src/components/map/style.module.scss        |  6 ++++++
 src/components/view-selector/component.js   |  3 +--
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/map-legend/component.js b/src/components/map-legend/component.js
index 112169c07..321e42b6e 100644
--- a/src/components/map-legend/component.js
+++ b/src/components/map-legend/component.js
@@ -2,7 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from 'utils/responsive';import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { breakpoints } from 'utils/responsive';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import LegendItem from './legend-item';
 import styles from './style.module.scss';
@@ -15,9 +16,11 @@ const Legend = ({ layers, isCollapsed, toggleCollapse }) => {
   return (
     <Fragment>
       <MediaQuery maxWidth={breakpoints.md - 1}>
-        <div className={styles.layersCollapse}>
+        <div className={classnames(styles.layersCollapse,
+          { [styles.collapse]: isCollapsed })}
+        >
           <div className={classnames(styles.title,
-            { [styles.collapse]: !isCollapsed })}
+            { [styles.collapse]: isCollapsed })}
           >
             <span>Layers</span>
           </div>
diff --git a/src/components/map-legend/style.module.scss b/src/components/map-legend/style.module.scss
index 4a50a2fa0..5b116d7c4 100644
--- a/src/components/map-legend/style.module.scss
+++ b/src/components/map-legend/style.module.scss
@@ -3,6 +3,10 @@
 .layersCollapse {
   display: flex;
   justify-content: flex-end;
+  &.collapse {
+    width: 100%;
+  }
+
   > * {
     padding: 0 20px 5px 20px;
     margin-bottom: 5px;
@@ -20,16 +24,16 @@
     font-weight: bold;
     letter-spacing: 1px;
     line-height: 15px;
-    display: flex;
-    margin-right: 5px;
+    display: none;
 
     &.collapse {
-      display: none;
+      display: flex;
     }
   }
   .layersBtn {
     width: 15px;
     height: 45px;
     box-sizing: content-box;
+    margin-right: 5px;
   }
 }
diff --git a/src/components/map/component.js b/src/components/map/component.js
index 73d565001..98dc94e7a 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
+import classnames from 'classnames';
 import { breakpoints } from 'utils/responsive';
 import BasemapSelector from 'components/basemap-selector';
 import Legend from 'components/map-legend';
@@ -11,7 +12,8 @@ class Map extends PureComponent {
   static propTypes = {
     basemap: PropTypes.string,
     viewport: PropTypes.shape({}),
-    setViewport: PropTypes.func
+    setViewport: PropTypes.func,
+    isCollapse: PropTypes.bool.isRequired
   }
 
   static defaultProps = {
@@ -26,7 +28,7 @@ class Map extends PureComponent {
       bearing: 0,
       pitch: 0
     },
-    setViewport: () => {}
+    setViewport: () => { }
   }
 
   componentDidMount() {
@@ -56,7 +58,8 @@ class Map extends PureComponent {
     const {
       mapboxApiAccessToken,
       mapStyle,
-      viewport
+      viewport,
+      isCollapse
     } = this.props;
 
     return (
@@ -75,7 +78,9 @@ class Map extends PureComponent {
             <NavigationControl />
           </MediaQuery>
         </div>
-        <div className={styles.legend}>
+        <div className={classnames(styles.legend,
+          { [styles.expanded]: !isCollapse })}
+        >
           <Legend />
           <BasemapSelector />
         </div>
diff --git a/src/components/map/index.js b/src/components/map/index.js
index 7db12673c..a136d17d7 100644
--- a/src/components/map/index.js
+++ b/src/components/map/index.js
@@ -7,7 +7,8 @@ import Component from './component';
 const mapStateToProps = state => ({
   ...state.map,
   mapStyle: mapStyle(state),
-  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN
+  mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
+  isCollapse: state.layers.isCollapse
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/map/style.module.scss b/src/components/map/style.module.scss
index 5e39d5af9..e9c76b83a 100644
--- a/src/components/map/style.module.scss
+++ b/src/components/map/style.module.scss
@@ -21,6 +21,12 @@ $space-left-map-mobile: 20px;
   @media screen and (max-width: map-get($breakpoints, md)) {
     top: $space-top-map-mobile;
     left: $space-left-map-mobile;
+    &.expanded {
+      display: flex;
+      flex-direction: row-reverse;
+      bottom: inherit;
+      right: 25px;
+    }
   }
 }
 
diff --git a/src/components/view-selector/component.js b/src/components/view-selector/component.js
index 9640ec949..be78d7f4c 100644
--- a/src/components/view-selector/component.js
+++ b/src/components/view-selector/component.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Button from 'components/button';
 import styles from './style.module.scss';
 
-
 class ViewSelector extends PureComponent {
   static propTypes = {
     mapView: PropTypes.bool,
@@ -31,7 +30,7 @@ class ViewSelector extends PureComponent {
           hasContrast
           onClick={this.onChangeView}
         >
-          <div className={styles.btnTitle}>{mapView ? 'Map View' : 'Whatever view'}</div>
+          <div className={styles.btnTitle}>{mapView ? 'Dashboard View' : 'Map View'}</div>
           <span className={styles.btnInfo}>{activeLayers}</span>
         </Button>
       </div>

From b4ce71a47075925aed0daec6c6ad053970c2d3da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?=
 <miguelbarrenechea@MacBook-Pro.home>
Date: Fri, 9 Aug 2019 09:53:20 +0200
Subject: [PATCH 21/28] import styles using SASS_PATH

---
 src/components/basemap-selector/style.module.scss               | 2 +-
 src/components/button/style.module.scss                         | 2 +-
 src/components/buttonGroup/style.module.scss                    | 2 +-
 src/components/header/style.module.scss                         | 2 +-
 src/components/language-selector/style.module.scss              | 2 +-
 src/components/layout/style.module.scss                         | 2 +-
 src/components/link/style.module.scss                           | 2 +-
 src/components/location-modal/style.module.scss                 | 2 +-
 src/components/map-legend/legend-item/style.module.scss         | 2 +-
 src/components/map-legend/style.module.scss                     | 2 +-
 src/components/map/style.module.scss                            | 2 +-
 src/components/select/style.module.scss                         | 2 +-
 src/components/sidebar/style.module.scss                        | 2 +-
 src/components/spinner/style.module.scss                        | 2 +-
 src/components/view-selector/style.module.scss                  | 2 +-
 src/components/widget/style.module.scss                         | 2 +-
 .../widget/templates/conservation-hotspots/style.module.scss    | 2 +-
 src/pages/app/style.module.scss                                 | 2 +-
 18 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/basemap-selector/style.module.scss b/src/components/basemap-selector/style.module.scss
index 39053d708..23006a11d 100644
--- a/src/components/basemap-selector/style.module.scss
+++ b/src/components/basemap-selector/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .basemap {
   display: flex;
diff --git a/src/components/button/style.module.scss b/src/components/button/style.module.scss
index 0b8cb2cb7..fb68eaca5 100644
--- a/src/components/button/style.module.scss
+++ b/src/components/button/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .button {
   padding: 0 20px;
diff --git a/src/components/buttonGroup/style.module.scss b/src/components/buttonGroup/style.module.scss
index df24cd560..66edba931 100644
--- a/src/components/buttonGroup/style.module.scss
+++ b/src/components/buttonGroup/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .container {
   border: 2px solid rgba(0,0,0,0.2);
diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 1d09676e6..aea5917c1 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .header {
   display: flex;
diff --git a/src/components/language-selector/style.module.scss b/src/components/language-selector/style.module.scss
index cad078f2a..a386d7e7a 100644
--- a/src/components/language-selector/style.module.scss
+++ b/src/components/language-selector/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .container {
   border: 2px solid rgba(0,0,0,0.2);
diff --git a/src/components/layout/style.module.scss b/src/components/layout/style.module.scss
index e06204089..5ba81ce7b 100644
--- a/src/components/layout/style.module.scss
+++ b/src/components/layout/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .vis {
   position: fixed;
diff --git a/src/components/link/style.module.scss b/src/components/link/style.module.scss
index aee9d8f8d..7c7bbef11 100644
--- a/src/components/link/style.module.scss
+++ b/src/components/link/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 
 .downloadButton {
diff --git a/src/components/location-modal/style.module.scss b/src/components/location-modal/style.module.scss
index 96f70d593..e673e76af 100644
--- a/src/components/location-modal/style.module.scss
+++ b/src/components/location-modal/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .location {
   $padding: 30px;
diff --git a/src/components/map-legend/legend-item/style.module.scss b/src/components/map-legend/legend-item/style.module.scss
index 53b2593de..c9f7383d0 100644
--- a/src/components/map-legend/legend-item/style.module.scss
+++ b/src/components/map-legend/legend-item/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/vars';
+@import 'styles/vars';
 
 .legendItem {
   align-items: center;
diff --git a/src/components/map-legend/style.module.scss b/src/components/map-legend/style.module.scss
index 4a50a2fa0..4e50cf6e2 100644
--- a/src/components/map-legend/style.module.scss
+++ b/src/components/map-legend/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/vars';
+@import 'styles/vars';
 
 .layersCollapse {
   display: flex;
diff --git a/src/components/map/style.module.scss b/src/components/map/style.module.scss
index b4dbc3e67..028c58acf 100644
--- a/src/components/map/style.module.scss
+++ b/src/components/map/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/vars';
+@import 'styles/vars';
 
 $space-around-map: 30px;
 $space-top-map-mobile: 5px;
diff --git a/src/components/select/style.module.scss b/src/components/select/style.module.scss
index 382259f21..192211df3 100644
--- a/src/components/select/style.module.scss
+++ b/src/components/select/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .select {
   border-bottom: 2px solid $primary;
diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index e1aa01ce2..3ad9f7f91 100644
--- a/src/components/sidebar/style.module.scss
+++ b/src/components/sidebar/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .sidebar {
   position: relative;
diff --git a/src/components/spinner/style.module.scss b/src/components/spinner/style.module.scss
index 6370bc2c0..aeb5e1183 100644
--- a/src/components/spinner/style.module.scss
+++ b/src/components/spinner/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .loader {
   position: relative;
diff --git a/src/components/view-selector/style.module.scss b/src/components/view-selector/style.module.scss
index 539d8fb3c..80043f22e 100644
--- a/src/components/view-selector/style.module.scss
+++ b/src/components/view-selector/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .container {
   position: fixed;
diff --git a/src/components/widget/style.module.scss b/src/components/widget/style.module.scss
index 862a13f82..fed9c6d27 100644
--- a/src/components/widget/style.module.scss
+++ b/src/components/widget/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/vars';
+@import 'styles/vars';
 
 .widget {
   $padding: 30px;
diff --git a/src/components/widget/templates/conservation-hotspots/style.module.scss b/src/components/widget/templates/conservation-hotspots/style.module.scss
index 9db686578..092bfa33f 100644
--- a/src/components/widget/templates/conservation-hotspots/style.module.scss
+++ b/src/components/widget/templates/conservation-hotspots/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/vars';
+@import 'styles/vars';
 
 .hotspotsList {
   display: flex;
diff --git a/src/pages/app/style.module.scss b/src/pages/app/style.module.scss
index 8605e1596..1d0a09009 100644
--- a/src/pages/app/style.module.scss
+++ b/src/pages/app/style.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/vars';
+@import 'styles/vars';
 
 .app {
 

From 35726066ffb500caec8ba43ca8385917bca427bf Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 10:34:42 +0200
Subject: [PATCH 22/28] legend item back

---
 src/components/map-legend/legend-item/component.js | 7 ++++---
 src/components/map-legend/legend-item/index.js     | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/map-legend/legend-item/component.js b/src/components/map-legend/legend-item/component.js
index eff3eb331..279f709c4 100644
--- a/src/components/map-legend/legend-item/component.js
+++ b/src/components/map-legend/legend-item/component.js
@@ -5,12 +5,12 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import classnames from 'classnames';
 import styles from './style.module.scss';
 
-const LegendItem = ({ id, name, toggleActive, isCollapsed }) => {
+const LegendItem = ({ id, name, toggleActive, isCollapsed, mapView }) => {
   const onClickHandler = () => toggleActive({ id, isActive: false });
 
   return (
     <div className={classnames(styles.legendItem,
-      { [styles.collapse]: isCollapsed })}
+      { [styles.collapse]: (isCollapsed && mapView) })}
     >
       <h3>{name}</h3>
       <button className={styles.removeButton} type="button" onClick={onClickHandler}>
@@ -24,7 +24,8 @@ LegendItem.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   toggleActive: PropTypes.func,
-  isCollapsed: PropTypes.bool.isRequired
+  isCollapsed: PropTypes.bool.isRequired,
+  mapView: PropTypes.bool.isRequired
 };
 
 LegendItem.defaultProps = {
diff --git a/src/components/map-legend/legend-item/index.js b/src/components/map-legend/legend-item/index.js
index e4ac701d1..04b833f19 100644
--- a/src/components/map-legend/legend-item/index.js
+++ b/src/components/map-legend/legend-item/index.js
@@ -3,7 +3,8 @@ import { toggleActive } from 'modules/layers/actions';
 import Component from './component';
 
 const mapStateToProps = state => ({
-  isCollapsed: state.layers.isCollapsed
+  isCollapsed: state.layers.isCollapsed,
+  mapView: state.app.mobile.mapView
 });
 
 const mapDispatchToProps = {

From 9fc6db6081587155d6f50ccd77f0ff2842215cb3 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 11:27:49 +0200
Subject: [PATCH 23/28] map legend

---
 src/components/map-legend/component.js        | 47 +++----------------
 src/components/map-legend/mobile/component.js | 47 +++++++++++++++++++
 src/components/map-legend/mobile/index.js     | 13 +++++
 .../map-legend/{ => mobile}/style.module.scss |  0
 src/components/map/component.js               | 10 +++-
 src/components/map/style.module.scss          |  4 ++
 6 files changed, 78 insertions(+), 43 deletions(-)
 create mode 100644 src/components/map-legend/mobile/component.js
 create mode 100644 src/components/map-legend/mobile/index.js
 rename src/components/map-legend/{ => mobile}/style.module.scss (100%)

diff --git a/src/components/map-legend/component.js b/src/components/map-legend/component.js
index 321e42b6e..fddb4062e 100644
--- a/src/components/map-legend/component.js
+++ b/src/components/map-legend/component.js
@@ -1,51 +1,16 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import MediaQuery from 'react-responsive';
-import { breakpoints } from 'utils/responsive';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import LegendItem from './legend-item';
-import styles from './style.module.scss';
 
-const Legend = ({ layers, isCollapsed, toggleCollapse }) => {
-  const onToggleCollapsed = () => {
-    toggleCollapse(!isCollapsed);
-  };
+const Legend = ({ layers }) => (
+  <Fragment>
+    {layers.map(layer => <LegendItem key={layer.id} {...layer} />)}
+  </Fragment>
+);
 
-  return (
-    <Fragment>
-      <MediaQuery maxWidth={breakpoints.md - 1}>
-        <div className={classnames(styles.layersCollapse,
-          { [styles.collapse]: isCollapsed })}
-        >
-          <div className={classnames(styles.title,
-            { [styles.collapse]: isCollapsed })}
-          >
-            <span>Layers</span>
-          </div>
-          <button
-            type="button"
-            className={styles.layersBtn}
-            onClick={onToggleCollapsed}
-          >
-            {isCollapsed
-              ? <FontAwesomeIcon icon={faChevronDown} />
-              : <FontAwesomeIcon icon={faChevronUp} />
-            }
-          </button>
-        </div>
-      </MediaQuery>
-
-      {layers.map(layer => <LegendItem key={layer.id} {...layer} />)}
-    </Fragment>
-  );
-};
 
 Legend.propTypes = {
-  layers: PropTypes.arrayOf(PropTypes.shape({})),
-  isCollapsed: PropTypes.bool.isRequired,
-  toggleCollapse: PropTypes.func.isRequired
+  layers: PropTypes.arrayOf(PropTypes.shape({}))
 };
 
 Legend.defaultProps = {
diff --git a/src/components/map-legend/mobile/component.js b/src/components/map-legend/mobile/component.js
new file mode 100644
index 000000000..dc3c22a2d
--- /dev/null
+++ b/src/components/map-legend/mobile/component.js
@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import MediaQuery from 'react-responsive';
+import { breakpoints } from 'utils/responsive';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import styles from './style.module.scss';
+
+const MobileLegendControl = ({ isCollapsed, toggleCollapse }) => {
+  const onToggleCollapsed = () => {
+    toggleCollapse(!isCollapsed);
+  };
+
+  return (
+    <Fragment>
+      <MediaQuery maxWidth={breakpoints.md - 1}>
+        <div className={classnames(styles.layersCollapse,
+          { [styles.collapse]: isCollapsed })}
+        >
+          <div className={classnames(styles.title,
+            { [styles.collapse]: isCollapsed })}
+          >
+            <span>Layers</span>
+          </div>
+          <button
+            type="button"
+            className={styles.layersBtn}
+            onClick={onToggleCollapsed}
+          >
+            {isCollapsed
+              ? <FontAwesomeIcon icon={faChevronDown} />
+              : <FontAwesomeIcon icon={faChevronUp} />
+            }
+          </button>
+        </div>
+      </MediaQuery>
+    </Fragment>
+  );
+};
+
+MobileLegendControl.propTypes = {
+  isCollapsed: PropTypes.bool.isRequired,
+  toggleCollapse: PropTypes.func.isRequired
+};
+
+export default MobileLegendControl;
diff --git a/src/components/map-legend/mobile/index.js b/src/components/map-legend/mobile/index.js
new file mode 100644
index 000000000..09ef5c604
--- /dev/null
+++ b/src/components/map-legend/mobile/index.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { toggleCollapse } from 'modules/layers/actions';
+import Component from './component';
+
+const mapStateToProps = state => ({
+  isCollapsed: state.layers.isCollapsed
+});
+
+const mapDispatchToProps = {
+  toggleCollapse
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/src/components/map-legend/style.module.scss b/src/components/map-legend/mobile/style.module.scss
similarity index 100%
rename from src/components/map-legend/style.module.scss
rename to src/components/map-legend/mobile/style.module.scss
diff --git a/src/components/map/component.js b/src/components/map/component.js
index 98dc94e7a..66ddad95f 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
+import LegendMobileControl from 'components/map-legend/mobile';
 import classnames from 'classnames';
 import { breakpoints } from 'utils/responsive';
 import BasemapSelector from 'components/basemap-selector';
@@ -81,8 +82,13 @@ class Map extends PureComponent {
         <div className={classnames(styles.legend,
           { [styles.expanded]: !isCollapse })}
         >
-          <Legend />
-          <BasemapSelector />
+          <MediaQuery maxWidth={breakpoints.md - 1}>
+            <LegendMobileControl />
+          </MediaQuery>
+          <div className={styles.tooltip}>
+            <Legend />
+            <BasemapSelector />
+          </div>
         </div>
       </MapGL>
     );
diff --git a/src/components/map/style.module.scss b/src/components/map/style.module.scss
index e9c76b83a..f90f65529 100644
--- a/src/components/map/style.module.scss
+++ b/src/components/map/style.module.scss
@@ -28,6 +28,10 @@ $space-left-map-mobile: 20px;
       right: 25px;
     }
   }
+  .tooltip {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 // Mapbox override

From 227ba9328dcdd691b9051cdd955ea1fe1349607d Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 11:31:03 +0200
Subject: [PATCH 24/28] conflict and legend styles

---
 src/components/map-legend/legend-item/style.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/map-legend/legend-item/style.module.scss b/src/components/map-legend/legend-item/style.module.scss
index c9f7383d0..724443a46 100644
--- a/src/components/map-legend/legend-item/style.module.scss
+++ b/src/components/map-legend/legend-item/style.module.scss
@@ -1,9 +1,9 @@
 @import 'styles/vars';
 
 .legendItem {
+  display: flex;
   align-items: center;
   justify-content: space-between;
-
   padding: 5px 20px;
   margin-bottom: 5px;
   background: white;

From 9fc75fe0eeaaa63263d162e2df4e1f2c99b5eacb Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 11:33:01 +0200
Subject: [PATCH 25/28] PR changes

---
 src/components/language-selector/component.js | 3 ++-
 src/components/widget/component.js            | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/language-selector/component.js b/src/components/language-selector/component.js
index b004b159f..39f387f38 100644
--- a/src/components/language-selector/component.js
+++ b/src/components/language-selector/component.js
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from 'utils/responsive';import ButtonGroup from 'components/buttonGroup';
+import { breakpoints } from 'utils/responsive';
+import ButtonGroup from 'components/buttonGroup';
 import Button from 'components/button';
 
 class LanguageSelect extends PureComponent {
diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index ed5594123..c77a3928d 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import Button from 'components/button';
 import Spinner from 'components/spinner';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from 'utils/responsive';import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { breakpoints } from 'utils/responsive';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import classnames from 'classnames';
 import styles from './style.module.scss';

From 6f72138f4ac93cabf01e8a55ef7b7aa756d46c4a Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Fri, 9 Aug 2019 12:10:20 +0200
Subject: [PATCH 26/28] modal styles

---
 src/components/location-modal/component.js    | 131 ++++++++++++------
 .../location-modal/style.module.scss          |  26 ++--
 src/utils/responsive.js                       |  11 ++
 3 files changed, 119 insertions(+), 49 deletions(-)
 create mode 100644 src/utils/responsive.js

diff --git a/src/components/location-modal/component.js b/src/components/location-modal/component.js
index 91a0857ff..d0a4fc3f7 100644
--- a/src/components/location-modal/component.js
+++ b/src/components/location-modal/component.js
@@ -1,8 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'redux-first-router-link';
 import classnames from 'classnames';
 import Modal from 'components/modal';
+import MediaQuery from 'react-responsive';
+import { breakpoints } from 'utils/responsive';
 import ConservationHotspots from 'components/widget/templates/conservation-hotspots/component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
@@ -62,46 +64,93 @@ class LocationSelector extends PureComponent {
       : locations;
 
     return (
-      <Modal
-        className={styles.location}
-        isOpen={isOpened}
-        onRequestClose={this.closeModal}
-      >
-        <div className={styles.content}>
-          <div className={styles.search}>
-            <input
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              type="text"
-              className={classnames(styles.searchInput, 'notranslate')}
-              placeholder={currentLocation.name}
-              onChange={this.updateSearchTerm}
-            />
-          </div>
-          <ConservationHotspots
-            conservationHotspots={conservationHotspots}
-            currentLocation={currentLocation}
-          />
-          <ul className={styles.list}>
-            <li className={classnames(styles.listItem, 'notranslate')}>
-              <Link to={{ type: 'PAGE/APP', payload: { id: 'global' } }}>Worldwide</Link>
-            </li>
-            {locationsData.map(location => (
-              <li key={location.id} className={classnames(styles.listItem, 'notranslate')}>
-                {location.type === 'aoi'
-                  && <Link to={{ type: 'PAGE/AOI', payload: { id: location.id } }}>{location.name}</Link>}
-                {(location.type === 'country' || location.type === 'admin0-eez')
-                  && <Link to={{ type: 'PAGE/COUNTRY', payload: { iso: location.iso } }}>{location.name}</Link>}
-                {location.type === 'wdpa'
-                  && <Link to={{ type: 'PAGE/WDPA', payload: { id: location.id } }}>{location.name}</Link>}
-              </li>
-            ))}
-          </ul>
-        </div>
-        <button type="button" onClick={this.closeModal} className={styles.searchButton}>
-          <FontAwesomeIcon icon={faTimes} size="lg" />
-        </button>
-      </Modal>
+      <Fragment>
+        <MediaQuery maxWidth={breakpoints.md - 1}>
+          <Modal
+            className={classnames(styles.location, styles.mobile)}
+            isOpen={isOpened}
+            onRequestClose={this.closeModal}
+          >
+            <div className={styles.content}>
+              <div className={styles.search}>
+                <input
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                  type="text"
+                  className={classnames(styles.searchInput, 'notranslate')}
+                  placeholder={currentLocation.name}
+                  onChange={this.updateSearchTerm}
+                />
+              </div>
+              <ConservationHotspots
+                conservationHotspots={conservationHotspots}
+                currentLocation={currentLocation}
+              />
+              <ul className={styles.list}>
+                <li className={classnames(styles.listItem, 'notranslate')}>
+                  <Link to={{ type: 'PAGE/APP', payload: { id: 'global' } }}>Worldwide</Link>
+                </li>
+                {locationsData.map(location => (
+                  <li key={location.id} className={classnames(styles.listItem, 'notranslate')}>
+                    {location.type === 'aoi'
+                      && <Link to={{ type: 'PAGE/AOI', payload: { id: location.id } }}>{location.name}</Link>}
+                    {(location.type === 'country' || location.type === 'admin0-eez')
+                      && <Link to={{ type: 'PAGE/COUNTRY', payload: { iso: location.iso } }}>{location.name}</Link>}
+                    {location.type === 'wdpa'
+                      && <Link to={{ type: 'PAGE/WDPA', payload: { id: location.id } }}>{location.name}</Link>}
+                  </li>
+                ))}
+              </ul>
+              <button type="button" onClick={this.closeModal} className={classnames(styles.searchButton, styles.mobile)}>
+                <FontAwesomeIcon icon={faTimes} size="lg" />
+              </button>
+            </div>
+          </Modal>
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.md}>
+
+          <Modal
+            className={styles.location}
+            isOpen={isOpened}
+            onRequestClose={this.closeModal}
+          >
+            <div className={styles.content}>
+              <div className={styles.search}>
+                <input
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                  type="text"
+                  className={classnames(styles.searchInput, 'notranslate')}
+                  placeholder={currentLocation.name}
+                  onChange={this.updateSearchTerm}
+                />
+              </div>
+              <ConservationHotspots
+                conservationHotspots={conservationHotspots}
+                currentLocation={currentLocation}
+              />
+              <ul className={styles.list}>
+                <li className={classnames(styles.listItem, 'notranslate')}>
+                  <Link to={{ type: 'PAGE/APP', payload: { id: 'global' } }}>Worldwide</Link>
+                </li>
+                {locationsData.map(location => (
+                  <li key={location.id} className={classnames(styles.listItem, 'notranslate')}>
+                    {location.type === 'aoi'
+                      && <Link to={{ type: 'PAGE/AOI', payload: { id: location.id } }}>{location.name}</Link>}
+                    {(location.type === 'country' || location.type === 'admin0-eez')
+                      && <Link to={{ type: 'PAGE/COUNTRY', payload: { iso: location.iso } }}>{location.name}</Link>}
+                    {location.type === 'wdpa'
+                      && <Link to={{ type: 'PAGE/WDPA', payload: { id: location.id } }}>{location.name}</Link>}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <button type="button" onClick={this.closeModal} className={styles.searchButton}>
+              <FontAwesomeIcon icon={faTimes} size="lg" />
+            </button>
+          </Modal>
+        </MediaQuery>
+      </Fragment>
     );
   }
 }
diff --git a/src/components/location-modal/style.module.scss b/src/components/location-modal/style.module.scss
index 96f70d593..d824346a8 100644
--- a/src/components/location-modal/style.module.scss
+++ b/src/components/location-modal/style.module.scss
@@ -13,6 +13,14 @@
 
   z-index: 100;
 
+  &.mobile {
+    top: 10px;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+    width: inherit;
+  }
+
   .content {
     display: flex;
     flex-direction: column;
@@ -30,6 +38,10 @@
 
     overflow: auto;
     z-index: 1;
+    &.mobile {
+      position: absolute;
+      right: 20px;
+    }
   }
 
   .searchInput {
@@ -67,6 +79,12 @@
     background: white;
 
     cursor: pointer;
+    &.mobile {
+      top: 20px;
+      right: 20px;
+      left: inherit;
+
+    }
   }
 
   .list {
@@ -112,12 +130,4 @@
     opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
   z-index: 150;
 
-  // &:empty {
-  //   z-index: -1;
-  //   opacity: 0;
-  //   transform: scale(1.15);
-  //   transition:
-  //     transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
-  //     opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-  // }
 }
diff --git a/src/utils/responsive.js b/src/utils/responsive.js
new file mode 100644
index 000000000..c6258d86f
--- /dev/null
+++ b/src/utils/responsive.js
@@ -0,0 +1,11 @@
+
+export const breakpoints = {
+  sm: 384,
+  md: 768,
+  lg: 992,
+  xlg: 1280
+};
+
+export default {
+  breakpoints
+};

From 5ac67536c52340a1edf777824eff821d18e89452 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Mon, 12 Aug 2019 17:55:18 +0200
Subject: [PATCH 27/28] PR - changes

---
 src/components/map/index.js        | 2 +-
 src/components/widget/component.js | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/map/index.js b/src/components/map/index.js
index a136d17d7..73843d4bb 100644
--- a/src/components/map/index.js
+++ b/src/components/map/index.js
@@ -8,7 +8,7 @@ const mapStateToProps = state => ({
   ...state.map,
   mapStyle: mapStyle(state),
   mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
-  isCollapse: state.layers.isCollapse
+  isCollapse: state.layers.isCollapsed
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/widget/component.js b/src/components/widget/component.js
index 96b163837..ec0dd8516 100644
--- a/src/components/widget/component.js
+++ b/src/components/widget/component.js
@@ -61,8 +61,6 @@ class Widget extends PureComponent {
     } else {
       toggleActive({ slug, layerId, isActive: !isActive });
     }
-    console.log(toggleActive)
-    console.log(isActive, 'dentro active...')
   };
 
   render() {
@@ -109,7 +107,6 @@ class Widget extends PureComponent {
               isActive={isActive}
               onClick={this.activeToggleHandler}
             >
-            {console.log(isActive)}
               {isActive ? 'Hide layer' : 'Show layer'}
             </Button>
           )}

From a06bc5606bdf3e780ffce6ed1938bd8344bda2c9 Mon Sep 17 00:00:00 2001
From: maria <maluenarod@gmail.com>
Date: Tue, 13 Aug 2019 09:57:48 +0200
Subject: [PATCH 28/28] header and modal fix

---
 src/components/header/style.module.scss       | 13 +-----
 src/components/location-modal/component.js    |  4 +-
 .../location-modal/style.module.scss          |  4 --
 .../map-legend/mobile/style.module.scss~HEAD  | 39 -----------------
 src/components/map/component.js               |  4 +-
 .../conservation-hotspots/component.js        | 43 -------------------
 .../templates/highlighted-places/component.js | 10 +++--
 src/modules/pages/initial-state.js            |  2 +-
 8 files changed, 13 insertions(+), 106 deletions(-)
 delete mode 100644 src/components/map-legend/mobile/style.module.scss~HEAD
 delete mode 100644 src/components/widget/templates/conservation-hotspots/component.js

diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 451673fa4..36f97a185 100644
--- a/src/components/header/style.module.scss
+++ b/src/components/header/style.module.scss
@@ -54,7 +54,6 @@
   }
 
   .title {
-    width: 80%;
     padding: 0;
     margin: 0;
     border: 0;
@@ -63,6 +62,7 @@
     font-size: 60px;
     font-weight: 300;
     line-height: 0.85;
+    text-align: left;
 
     @media screen and (max-width: map-get($breakpoints, md)) {
       font-size: 35px;
@@ -76,16 +76,13 @@
     border: 0;
     border-radius: 100%;
     background: white;
+    text-align: center;
     cursor: pointer;
     box-shadow: $box-shadow;
 
     :global(.svg-inline--fa path) {
       fill: $primary;
     }
-    @media screen and (max-width: map-get($breakpoints, md)) {
-      height: 50px;
-      width: 50px;
-    }
     svg {
       @media screen and (max-width: map-get($breakpoints, md)) {
         height: 30px;
@@ -94,10 +91,4 @@
       }
     }
   }
-  .invisible {
-    display: block;
-  }
-  .visible {
-    display: none;
-  }
 }
diff --git a/src/components/location-modal/component.js b/src/components/location-modal/component.js
index a729b3c82..0c3a0dc0b 100644
--- a/src/components/location-modal/component.js
+++ b/src/components/location-modal/component.js
@@ -68,7 +68,7 @@ class LocationSelector extends PureComponent {
       <Fragment>
         <MediaQuery maxWidth={breakpoints.md - 1}>
           <Modal
-            className={styles.location}
+            className={classnames(styles.location, styles.mobile)}
             isOpen={isOpened}
             onRequestClose={this.closeModal}
           >
@@ -105,7 +105,7 @@ class LocationSelector extends PureComponent {
                 ))}
               </ul>
             </div>
-            <button type="button" onClick={this.closeModal} className={styles.searchButton}>
+            <button type="button" onClick={this.closeModal} className={classnames(styles.searchButton, styles.mobile)}>
               <FontAwesomeIcon icon={faTimes} size="lg" />
             </button>
           </Modal>
diff --git a/src/components/location-modal/style.module.scss b/src/components/location-modal/style.module.scss
index e6e777fd3..464ac3678 100644
--- a/src/components/location-modal/style.module.scss
+++ b/src/components/location-modal/style.module.scss
@@ -38,10 +38,6 @@
 
     overflow: auto;
     z-index: 1;
-    &.mobile {
-      position: absolute;
-      right: 20px;
-    }
   }
 
   .searchInput {
diff --git a/src/components/map-legend/mobile/style.module.scss~HEAD b/src/components/map-legend/mobile/style.module.scss~HEAD
deleted file mode 100644
index 7c415abd0..000000000
--- a/src/components/map-legend/mobile/style.module.scss~HEAD
+++ /dev/null
@@ -1,39 +0,0 @@
-@import 'styles/vars';
-
-.layersCollapse {
-  display: flex;
-  justify-content: flex-end;
-  &.collapse {
-    width: 100%;
-  }
-
-  > * {
-    padding: 0 20px 5px 20px;
-    margin-bottom: 5px;
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 12px 0 rgba(168,168,168,0.25);
-    align-items: center;
-  }
-  > div {
-    width: 100%;
-  }
-  .title {
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 12px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    line-height: 15px;
-    display: none;
-
-    &.collapse {
-      display: flex;
-    }
-  }
-  .layersBtn {
-    width: 15px;
-    height: 45px;
-    box-sizing: content-box;
-    margin-right: 5px;
-  }
-}
diff --git a/src/components/map/component.js b/src/components/map/component.js
index 66ddad95f..af421af77 100644
--- a/src/components/map/component.js
+++ b/src/components/map/component.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import LegendMobileControl from 'components/map-legend/mobile';
+import MobileLegendControl from 'components/map-legend/mobile';
 import classnames from 'classnames';
 import { breakpoints } from 'utils/responsive';
 import BasemapSelector from 'components/basemap-selector';
@@ -83,7 +83,7 @@ class Map extends PureComponent {
           { [styles.expanded]: !isCollapse })}
         >
           <MediaQuery maxWidth={breakpoints.md - 1}>
-            <LegendMobileControl />
+            <MobileLegendControl />
           </MediaQuery>
           <div className={styles.tooltip}>
             <Legend />
diff --git a/src/components/widget/templates/conservation-hotspots/component.js b/src/components/widget/templates/conservation-hotspots/component.js
deleted file mode 100644
index 449798111..000000000
--- a/src/components/widget/templates/conservation-hotspots/component.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { format } from 'd3-format';
-import Link from 'redux-first-router-link';
-import styles from './style.module.scss';
-
-const numberFormat = format(',.3r');
-
-const ConservationHotspots = ({ conservationHotspots, currentLocation }) => {
-  const { widgetData } = conservationHotspots;
-  return (
-    <div className={styles.hotspotsList}>
-      {widgetData.map(d => (
-        <div
-          key={d.id}
-          className={classnames(styles.card, { [styles.active]: d.id === currentLocation.id })}
-        >
-          <span className={styles.cardInfo}>
-            <h3 className="notranslate">{d.name}</h3>
-            <p><span className="notranslate">{numberFormat(d.length_coast_m / 1000)}</span> <span>km coastline</span></p>
-            {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}>View place</Link>}
-            {d.id === currentLocation.id && <Link to={{ type: 'PAGE/APP', payload: { id: 'global' } }}>Back to Worldwide</Link>}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-ConservationHotspots.propTypes = {
-  conservationHotspots: PropTypes.shape({
-    widgetData: PropTypes.arrayOf(PropTypes.shape({}))
-  }),
-  currentLocation: PropTypes.shape({})
-};
-
-ConservationHotspots.defaultProps = {
-  conservationHotspots: null,
-  currentLocation: null
-};
-
-export default ConservationHotspots;
diff --git a/src/components/widget/templates/highlighted-places/component.js b/src/components/widget/templates/highlighted-places/component.js
index cb6339580..7f554556a 100644
--- a/src/components/widget/templates/highlighted-places/component.js
+++ b/src/components/widget/templates/highlighted-places/component.js
@@ -11,10 +11,12 @@ const HighlightedPlaces = ({ data, currentLocation }) => (
         key={d.id}
         className={classnames(styles.card, { [styles.active]: d.id === currentLocation.id })}
       >
-        <h3 className="notranslate">{d.name}</h3>
-        <p><span className="notranslate">{d.coast_length_m}</span> <span className="notranslate">{d.unit}</span> <span>coastline</span></p>
-        {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}>View place</Link>}
-        {d.id === currentLocation.id && <Link to={{ type: 'PAGE/APP', payload: { id: 'worldwide' } }}>Back to Worldwide</Link>}
+        <span className={styles.cardInfo}>
+          <h3 className="notranslate">{d.name}</h3>
+          <p><span className="notranslate">{d.coast_length_m}</span> <span className="notranslate">{d.unit}</span> <span>coastline</span></p>
+        </span>
+        {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}><span className={styles.link}>View place</span></Link>}
+        {d.id === currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: 'worldwide' } }}><span className={styles.link}>Back to Worldwide</span></Link>}
       </div>
     ))}
   </div>
diff --git a/src/modules/pages/initial-state.js b/src/modules/pages/initial-state.js
index 6ddc48775..16f1d7e02 100644
--- a/src/modules/pages/initial-state.js
+++ b/src/modules/pages/initial-state.js
@@ -1,3 +1,3 @@
 export default {
-  current: 'APP',
+  current: 'APP'
 };