From c172b3cfa351d077bf7af02f9a80c614aac44394 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= <maluenarod@gmail.com>
Date: Tue, 13 Aug 2019 16:49:34 +0200
Subject: [PATCH] Fix/fixed header (#45)

* react responsive and main layout

* view map btn component

* media queries and mobile view styles

* media queries adjusted in header

* mobile condition to redux, btn and header styles adapted

* action bar in header

* hotspots widget mobile

* typo error

* indentation

* background, widgets arrow

* desktop styles fixed

* view map btn and active layers

* desktop layout component

* mobile layout component

* layers collapsed in map view

* mediaqueries added

* unused dependencies removed

* mediaqueries fix

* map btn functionality

* legend collapse

* import styles using SASS_PATH

* legend item back

* map legend

* conflict and legend styles

* PR changes

* modal styles

* PR - changes

* header and modal fix
---
 src/components/header/style.module.scss                |  9 ++-------
 src/components/location-modal/component.js             |  4 ++--
 src/components/map/component.js                        |  4 ++--
 .../widget/templates/highlighted-places/component.js   | 10 ++++++----
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss
index 451673fa4..839755886 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,6 +76,7 @@
     border: 0;
     border-radius: 100%;
     background: white;
+    text-align: center;
     cursor: pointer;
     box-shadow: $box-shadow;
 
@@ -94,10 +95,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/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/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>