use colours for the button state

proof of concept for #1039 (tweaking clicked/hover colours may be needed)

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -29,6 +29,44 @@
     background-image: none;
     border-color: #343a40;
 }
+.map-button.disabled-state,
+.map-button.disabled-state .btn{
+    background-color: #df7474;
+}
+.map-button.night.disabled-state,
+.map-button.night.disabled-state .btn{
+    background-color: #b03f3f;
+}
+.map-button.disabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.night.disabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.enabled-state {
+    color: #61ef61;
+    background-color: #61ef61;
+}
+.map-button.enabled-state .btn{
+    background-color: #61ef61;
+}
+.map-button.night.enabled-state {
+    color: #448844;
+    background-color: #448844;
+}
+.map-button.night.enabled-state .btn{
+    background-color: #448844;
+}
+.map-button.enabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
+.map-button.night.enabled .btn:hover {
+    background-color: transparent;
+    background-image: none;
+}
 @media (max-width: 990px){
     .map-button {
         visibility: hidden;

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

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

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

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