colour inline map switch mockup

app/src/frontend/building/data-containers/map-switcher-inline.css

@@ -0,0 +1,33 @@
+.map-theme {
+    filter: grayscale(100%) invert(1);
+}
+
+.map-theme {
+    filter: none;
+}
+
+.map-switcher-inline {
+    border-radius: 4px;
+}
+.map-switcher-inline .btn {
+    background: #FFC0CB;
+    margin: 0;
+    min-width: 280px;
+}
+.map-switcher-inline.night .btn {
+    background: #FFC0CB;
+    color: #fff;
+    background-color: #343a40;
+    border-color: #ff6065;
+}
+.map-switcher-inline.night .btn:hover {
+    color: #343a40;
+    background-color: transparent;
+    background-image: none;
+    border-color: #ff6065;
+}
+@media (max-width: 990px){
+    .map-switcher-inline {
+        visibility: hidden;
+    }
+}

app/src/frontend/building/data-containers/planning.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 
+import './map-switcher-inline.css'; // import in a proper place
 import { Link } from 'react-router-dom';
 import InfoBox from '../../components/info-box';
 import CheckboxDataEntry from '../data-components/checkbox-data-entry';
@@ -118,7 +119,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 />
             </DataEntryGroup>
             <DataEntryGroup name="Possible future applications (crowdsourced data)" collapsed={true} >
-                <form className={`flood-switcher-inline`}>
+                <form className={`map-switcher-inline`}>
                     <button className="btn btn-outline btn-outline-dark"
                         type="submit">
                         Click to see the data mapped