Fix ThemeSwitcher style and map click

app/src/frontend/map.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Map, TileLayer, ZoomControl, AttributionControl } from 'react-leaflet-universal';
 
 import '../../node_modules/leaflet/dist/leaflet.css'
@@ -71,23 +71,25 @@ class ColouringMap extends Component {
         ) : null;
 
         return (
-            <Map
+            <Fragment>
-                center={position}
+                <Map
-                zoom={this.state.zoom}
+                    center={position}
-                minZoom={10}
+                    zoom={this.state.zoom}
-                maxZoom={18}
+                    minZoom={10}
-                doubleClickZoom={false}
+                    maxZoom={18}
-                zoomControl={false}
+                    doubleClickZoom={false}
-                attributionControl={false}
+                    zoomControl={false}
-                onClick={this.handleClick}
+                    attributionControl={false}
-                >
+                    onClick={this.handleClick}
-                <TileLayer url={url} attribution={attribution} />
+                    >
-                <TileLayer url={colour} />
+                    <TileLayer url={url} attribution={attribution} />
-                { highlightLayer }
+                    <TileLayer url={colour} />
-                <ZoomControl position="topright" />
+                    { highlightLayer }
-                <AttributionControl prefix="" />
+                    <ZoomControl position="topright" />
+                    <AttributionControl prefix="" />
+                </Map>
                 <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
-            </Map>
+            </Fragment>
         );
     }
 };

app/src/frontend/theme-switcher.css

@@ -1,10 +1,22 @@
 .theme-switcher {
     z-index: 1000;
     position: absolute;
-    bottom: 30px;
+    bottom: 55px;
     right: 10px;
     float: right;
     background: white;
+    border-radius: 4px;
+}
+
+@media (min-width: 380px){
+    .theme-switcher {
+        bottom: 40px;
+    }
+}
+@media (min-width: 1020px){
+    .theme-switcher {
+        bottom: 24px;
+    }
 }
 .theme-switcher .btn {
     margin: 0;

app/src/frontend/theme-switcher.js

@@ -4,7 +4,8 @@ import './theme-switcher.css';
 
 const ThemeSwitcher = (props) => (
     <form class={`theme-switcher ${props.currentTheme}`} onSubmit={props.onSubmit}>
-        <button class="btn btn-outline btn-outline-dark" type="submit">
+        <button class="btn btn-outline btn-outline-dark"
+                type="submit">
             Switch theme ({(props.currentTheme === 'light')? 'Light' : 'Night'})
         </button>
     </form>