fix(minimap): disable minimap for ArcGIS base map

src/components/debug-panel/debug-panel.tsx

@@ -24,6 +24,7 @@ import {
   setDebugOptions,
   selectDebugOptions,
 } from "../../redux/slices/debug-options-slice";
+import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
 
 const CloseButtonWrapper = styled.div`
   position: absolute;
@@ -64,6 +65,11 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => {
   const layout = useAppLayout();
   const dispatch = useAppDispatch();
   const debugOptions = useAppSelector(selectDebugOptions);
+  const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
+  const minimapDisabled = selectedBaseMapId === "ArcGis";
+  if (minimapDisabled && debugOptions.minimap) {
+    dispatch(setDebugOptions({ minimap: false }));
+  }
 
   return (
     <PanelContainer layout={layout}>
@@ -84,6 +90,7 @@ export const DebugPanel = ({ onClose }: DebugPanelProps) => {
           <ToggleSwitch
             id={"toggle-minimap"}
             checked={debugOptions.minimap}
+            disabled={minimapDisabled}
             onChange={() =>
               dispatch(setDebugOptions({ minimap: !debugOptions.minimap }))
             }

src/components/toogle-switch/toggle-switch.tsx

@@ -1,5 +1,8 @@
-import styled from "styled-components";
-import { color_canvas_primary_inverted } from "../../constants/colors";
+import styled, { css } from "styled-components";
+import {
+  color_canvas_primary_inverted,
+  dim_canvas_tertiary,
+} from "../../constants/colors";
 
 const Switch = styled.div`
   position: relative;
@@ -17,22 +20,26 @@ const Input = styled.input`
 const Label = styled.label<{
   title?: string;
   htmlFor?: string;
+  disabled: boolean;
 }>`
   font-size: 6px;
   width: 28px;
   height: 18px;
   border-radius: 8px;
-  cursor: pointer;
+  ${({ disabled }) =>
+    !disabled &&
+    css`
+      cursor: pointer;
+    `}
   ${Input} {
     opacity: 0;
     width: 0;
     height: 0;
   }
 `;
 
-const Slider = styled.span`
+const Slider = styled.span<{ disabled: boolean }>`
   position: absolute;
-  cursor: pointer;
   top: 1px;
   left: 0;
   right: 0;
@@ -54,47 +61,68 @@ const Slider = styled.span`
     transition: 0.4s;
     border-radius: 8px;
   }
-  &:hover {
-    background-color: ${({ theme }) =>
-      theme.colors.switchDisabledBackgroundHovered};
-  }
+  ${({ disabled }) =>
+    !disabled &&
+    css`
+      &:hover {
+        background-color: ${({ theme }) =>
+          theme.colors.switchDisabledBackgroundHovered};
+      }
+    `}
 
   ${Input}:checked + & {
     background: ${({ theme }) => theme.colors.switchCheckedBackground};
-    &:hover {
-      background: ${({ theme }) => theme.colors.switchCheckedBackgroundHovered};
-    }
+    ${({ disabled }) =>
+      !disabled &&
+      css`
+        &:hover {
+          background: ${({ theme }) =>
+            theme.colors.switchCheckedBackgroundHovered};
+        }
+      `}
   }
 
   ${Input}:checked + &::before {
     -webkit-transform: translateX(11px);
     -ms-transform: translateX(11px);
     transform: translateX(11px);
   }
+
+  ${Input}:disabled + &::before {
+    background-color: ${dim_canvas_tertiary};
+  }
 `;
 
-/**
- * TODO: Add types to component
- */
+type ToggleSwitchProps = {
+  checked: boolean;
+  onChange: () => void;
+  name?: string;
+  id?: string;
+  title?: string;
+  disabled?: boolean;
+};
+
 export const ToggleSwitch = ({
   checked,
   onChange,
   name = "",
   id = "",
   title = "",
-}) => {
+  disabled = false,
+}: ToggleSwitchProps) => {
   return (
     <Switch>
-      <Label htmlFor={id} title={title}>
+      <Label htmlFor={id} title={title} disabled={disabled}>
         <Input
           id={id}
           type="checkbox"
           name={name}
           checked={checked}
+          disabled={disabled}
           title={title}
           onChange={onChange}
         />
-        <Slider />
+        <Slider disabled={disabled} />
       </Label>
     </Switch>
   );

src/constants/colors.ts

@@ -29,6 +29,7 @@ export const color_accent_tertiary = "#FDCECE";
 
 export const dim_canvas_primary = "#616678";
 export const dim_canvas_secondary = "#CDCFD6";
+export const dim_canvas_tertiary = "#808080";
 
 export const COLORS_BY_ATTRIBUTE: {
   min: {

src/pages/debug-app/debug-app.tsx

@@ -236,7 +236,7 @@ export const DebugApp = () => {
     setColoredTilesMap({});
     setSelectedTile(null);
     dispatch(resetDebugOptions());
-    dispatch(setDebugOptions({ minimap: true }));
+    dispatch(setDebugOptions({ minimap: !(selectedBaseMapId === "ArcGis") }));
     dispatch(clearBSLStatisitcsSummary());
     dispatch(setFiltersByAttrubute({ filter: null }));
   }, [activeLayers, buildingExplorerOpened]);