From 47014c19953eabd122d9271e3aae2fda8c8313e1 Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <matkoniecz@gmail.com>
Date: Tue, 29 Nov 2022 12:08:12 +0100
Subject: [PATCH] colour inline map switch mockup

---
 .../data-containers/map-switcher-inline.css   | 33 +++++++++++++++++++
 .../building/data-containers/planning.tsx     |  3 +-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 app/src/frontend/building/data-containers/map-switcher-inline.css

diff --git a/app/src/frontend/building/data-containers/map-switcher-inline.css b/app/src/frontend/building/data-containers/map-switcher-inline.css
new file mode 100644
index 00000000..7e7da579
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/app/src/frontend/building/data-containers/planning.tsx b/app/src/frontend/building/data-containers/planning.tsx
index 95112882..6398b52c 100644
--- a/app/src/frontend/building/data-containers/planning.tsx
+++ b/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