consolidate css files

app/src/frontend/map/borough-switcher.css

@@ -1,37 +0,0 @@
-.borough-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.borough-theme {
-    filter: none;
-}
-
-.borough-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 157px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.borough-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.borough-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.borough-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .borough-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/borough-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './borough-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const BoroughSwitcher: React.FC<{}> = () => {
     const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`borough-switcher ${darkLightTheme}`} onSubmit={boroughSwitch}>
+        <form className={`borough-switcher map-button ${darkLightTheme}`} onSubmit={boroughSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(borough === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}

app/src/frontend/map/conservation-switcher.css

@@ -1,37 +0,0 @@
-.conservation-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.conservation-theme {
-    filter: none;
-}
-
-.conservation-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 357px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.conservation-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.conservation-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.conservation-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .conservation-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/conservation-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './conservation-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
     const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`conservation-switcher ${darkLightTheme}`} onSubmit={conservationSwitch}>
+        <form className={`conservation-switcher map-button ${darkLightTheme}`} onSubmit={conservationSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(conservation === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}

app/src/frontend/map/creative-switcher.css

@@ -1,37 +0,0 @@
-.creative-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.creative-theme {
-    filter: none;
-}
-
-.creative-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 237px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.creative-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.creative-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.creative-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .creative-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/creative-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './creative-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const CreativeSwitcher: React.FC<{}> = () => {
     const { creative, creativeSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`creative-switcher ${darkLightTheme}`} onSubmit={creativeSwitch}>
+        <form className={`creative-switcher map-button ${darkLightTheme}`} onSubmit={creativeSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(creative === 'enabled')? 'Switch off Creative Enterprise Zones' : 'Switch on Creative Enterprise Zones'}

app/src/frontend/map/data-switcher.css

@@ -1,37 +0,0 @@
-.data-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.data-theme {
-    filter: none;
-}
-
-.data-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 117px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.data-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.data-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.data-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .data-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/data-switcher.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './data-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 interface DataLayerSwitcherProps {
@@ -11,7 +11,7 @@ interface DataLayerSwitcherProps {
 const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
     const { darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`data-switcher ${darkLightTheme}`} onSubmit={props.onSubmit}>
+        <form className={`data-switcher map-button ${darkLightTheme}`} onSubmit={props.onSubmit}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}

app/src/frontend/map/flood-switcher.css

@@ -1,37 +0,0 @@
-.flood-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.flood-theme {
-    filter: none;
-}
-
-.flood-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 277px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.flood-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.flood-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.flood-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .flood-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/flood-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './flood-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const FloodSwitcher: React.FC<{}> = () => {
     const { flood, floodSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`flood-switcher ${darkLightTheme}`} onSubmit={floodSwitch}>
+        <form className={`flood-switcher map-button ${darkLightTheme}`} onSubmit={floodSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(flood === 'enabled')? 'Switch off Flood Zones' : 'Switch on Flood Zones'}

app/src/frontend/map/historic-data-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './historic-data-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const HistoricDataSwitcher: React.FC<{}> = (props) => {
     const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`historic-data-switcher ${darkLightTheme}`} onSubmit={historicDataSwitch}>
+        <form className={`historic-data-switcher map-button ${darkLightTheme}`} onSubmit={historicDataSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(historicData === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}

app/src/frontend/map/housing-switcher.css

@@ -1,37 +0,0 @@
-.housing-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.housing-theme {
-    filter: none;
-}
-
-.housing-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 197px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.housing-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.housing-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.housing-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .housing-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/housing-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './housing-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const HousingSwitcher: React.FC<{}> = () => {
     const { housing, housingSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`housing-switcher ${darkLightTheme}`} onSubmit={housingSwitch}>
+    <form className={`housing-switcher map-button ${darkLightTheme}`} onSubmit={housingSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
             {(housing === 'enabled')? 'Switch off Housing Zones' : 'Switch on Housing Zones'}

app/src/frontend/map/map-button.css

@@ -1,37 +1,77 @@
-.historic-data-theme {
+
+.map-button-theme {
     filter: grayscale(100%) invert(1);
 }
 
-.historic-data-theme {
+.map-button-theme {
     filter: none;
 }
 
-.historic-data-switcher {
+.map-button {
     z-index: 1000;
     position: absolute;
-    top: 397px;
     right: 10px;
     float: right;
     background: white;
     border-radius: 4px;
 }
-.historic-data-switcher .btn {
+.map-button .btn {
     margin: 0;
     min-width: 280px;
 }
-.historic-data-switcher.night .btn {
+.map-button.night .btn {
     color: #fff;
     background-color: #343a40;
     border-color: #343a40;
 }
-.historic-data-switcher.night .btn:hover {
+.map-button.night .btn:hover {
     color: #343a40;
     background-color: transparent;
     background-image: none;
     border-color: #343a40;
 }
 @media (max-width: 990px){
-    .historic-data-switcher {
+    .map-button {
         visibility: hidden;
     }
 }
+
+.theme-switcher {
+    top: 77px;
+}
+
+.data-switcher {
+    top: 117px;
+}
+
+.borough-switcher {
+    top: 157px;
+}
+
+.housing-switcher {
+    top: 197px;
+}
+
+.creative-switcher {
+    top: 237px;
+}
+
+.flood-switcher {
+    top: 277px;
+}
+
+.vista-switcher {
+    top: 317px;
+}
+
+.conservation-switcher {
+    top: 357px;
+}
+
+.historic-data-switcher {
+    top: 397px;
+}
+
+.parcel-switcher {
+    top: 437px;
+}

app/src/frontend/map/parcel-switcher.css

@@ -1,37 +0,0 @@
-.parcel-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.parcel-theme {
-    filter: none;
-}
-
-.parcel-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 437px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.parcel-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.parcel-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.parcel-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .parcel-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/parcel-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './parcel-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const ParcelSwitcher: React.FC<{}> = () => {
     const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-        <form className={`parcel-switcher ${darkLightTheme}`} onSubmit={parcelSwitch}>
+        <form className={`parcel-switcher map-button ${darkLightTheme}`} onSubmit={parcelSwitch}>
             <button className="btn btn-outline btn-outline-dark"
                 type="submit">
                 {(parcel === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}

app/src/frontend/map/theme-switcher.css

@@ -1,37 +0,0 @@
-.night-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.light-theme {
-    filter: none;
-}
-
-.theme-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 77px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.theme-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.theme-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.theme-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .theme-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/theme-switcher.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './theme-switcher.css';
+import './map-button.css';
 
 interface ThemeSwitcherProps {
     currentTheme: string;
@@ -8,7 +8,7 @@ interface ThemeSwitcherProps {
 }
 
 const ThemeSwitcher: React.FC<ThemeSwitcherProps> = (props) => (
-    <form className={`theme-switcher ${props.currentTheme}`} onSubmit={props.onSubmit}>
+    <form className={`theme-switcher map-button ${props.currentTheme}`} onSubmit={props.onSubmit}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
             Switch theme ({(props.currentTheme === 'light')? 'Light' : 'Night'})

app/src/frontend/map/vista-switcher.css

@@ -1,37 +0,0 @@
-.vista-theme {
-    filter: grayscale(100%) invert(1);
-}
-
-.vista-theme {
-    filter: none;
-}
-
-.vista-switcher {
-    z-index: 1000;
-    position: absolute;
-    top: 317px;
-    right: 10px;
-    float: right;
-    background: white;
-    border-radius: 4px;
-}
-.vista-switcher .btn {
-    margin: 0;
-    min-width: 280px;
-}
-.vista-switcher.night .btn {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}
-.vista-switcher.night .btn:hover {
-    color: #343a40;
-    background-color: transparent;
-    background-image: none;
-    border-color: #343a40;
-}
-@media (max-width: 990px){
-    .vista-switcher {
-        visibility: hidden;
-    }
-}

app/src/frontend/map/vista-switcher.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import './vista-switcher.css';
+import './map-button.css';
 import { useDisplayPreferences } from '../displayPreferences-context';
 
 export const VistaSwitcher: React.FC<{}> = () => {
     const { vista, vistaSwitch, darkLightTheme } = useDisplayPreferences();
     return (
-    <form className={`vista-switcher ${darkLightTheme}`} onSubmit={vistaSwitch}>
+    <form className={`vista-switcher map-button ${darkLightTheme}`} onSubmit={vistaSwitch}>
         <button className="btn btn-outline btn-outline-dark"
             type="submit">
             {(vista === 'enabled')? 'Switch off Protected Vistas' : 'Switch on Protected Vistas'}