From b12dac1e359a28bdf244fc7f6f7f51c446b55110 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 9 Jan 2019 20:30:59 +0100
Subject: [PATCH] Improved map modal title

---
 src/visits/helpers/MapModal.js       |  7 +++++--
 src/visits/helpers/MapModal.scss     | 16 +++++++++++++++-
 test/visits/helpers/MapModal.test.js |  8 ++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js
index 3f8407fa..a79cb672 100644
--- a/src/visits/helpers/MapModal.js
+++ b/src/visits/helpers/MapModal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
 import * as PropTypes from 'prop-types';
 import './MapModal.scss';
@@ -27,8 +27,11 @@ const OpenStreetMapTile = () => (
 
 const MapModal = ({ toggle, isOpen, title, locations }) => (
   <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
-    <ModalHeader toggle={toggle}>{title}</ModalHeader>
     <ModalBody className="map-modal__modal-body">
+      <h3 className="map-modal__modal-title">
+        {title}
+        <button type="button" className="close" onClick={toggle}>&times;</button>
+      </h3>
       <Map center={[ 0, 0 ]} zoom="3">
         <OpenStreetMapTile />
         {locations.map(({ cityName, latLong, count }, index) => (
diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss
index 1a23bae4..d37029c6 100644
--- a/src/visits/helpers/MapModal.scss
+++ b/src/visits/helpers/MapModal.scss
@@ -19,6 +19,16 @@
   height: 100%;
 }
 
+.map-modal__modal-title {
+  position: absolute;
+  width: 100%;
+  z-index: 1001;
+  padding: .5rem 1rem 1rem;
+  margin: 0;
+  color: #fff;
+  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+}
+
 .map-modal__modal-body {
   padding: 0;
   display: flex;
@@ -27,5 +37,9 @@
 
 .map-modal__modal .leaflet-container {
   flex: 1 1 auto;
-  border-radius: 0 0 .3rem .3rem;
+  border-radius: .3rem;
+}
+
+.map-modal__modal .leaflet-top .leaflet-control {
+  margin-top: 60px;
 }
diff --git a/test/visits/helpers/MapModal.test.js b/test/visits/helpers/MapModal.test.js
index 050a4f02..41a6a370 100644
--- a/test/visits/helpers/MapModal.test.js
+++ b/test/visits/helpers/MapModal.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Modal, ModalHeader } from 'reactstrap';
+import { Modal } from 'reactstrap';
 import { Marker, Popup } from 'react-leaflet';
 import MapModal from '../../../src/visits/helpers/MapModal';
 
@@ -34,12 +34,12 @@ describe('<MapModal />', () => {
 
   it('renders modal with provided props', () => {
     const modal = wrapper.find(Modal);
-    const headerheader = wrapper.find(ModalHeader);
+    const headerheader = wrapper.find('.map-modal__modal-title');
 
     expect(modal.prop('toggle')).toEqual(toggle);
     expect(modal.prop('isOpen')).toEqual(isOpen);
-    expect(headerheader.prop('toggle')).toEqual(toggle);
-    expect(headerheader.prop('children')).toEqual(title);
+    expect(headerheader.find('.close').prop('onClick')).toEqual(toggle);
+    expect(headerheader.text()).toContain(title);
   });
 
   it('renders open street map tile', () => {