Change switch icon

frontend/src/components/Dialogs/F2fMap.tsx

@@ -10,7 +10,7 @@ import {
   Tooltip,
   Grid,
 } from '@mui/material';
-import { WifiTetheringError } from '@mui/icons-material';
+import { PhotoSizeSelectActual } from '@mui/icons-material';
 import Map from '../Map';
 import { LatLng } from 'leaflet';
 
@@ -35,7 +35,7 @@ const F2fMapDialog = ({
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const [position, setPosition] = useState<LatLng>();
-  const [lowQuality, setLowQuality] = useState<boolean>(true);
+  const [useTiles, setUseTiles] = useState<boolean>(false);
 
   const onSave = () => {
     onClose(position);
@@ -75,10 +75,10 @@ const F2fMapDialog = ({
               >
                 <Switch
                   size='small'
-                  checked={lowQuality}
-                  onChange={() => setLowQuality((value) => !value)}
+                  checked={useTiles}
+                  onChange={() => setUseTiles((value) => !value)}
                 />
-                <WifiTetheringError sx={{ color: 'text.secondary' }} />
+                <PhotoSizeSelectActual sx={{ color: 'text.secondary' }} />
               </div>
             </Tooltip>
           </Grid>
@@ -87,7 +87,7 @@ const F2fMapDialog = ({
       <DialogContent style={{ height: '100vh', width: '80vw' }}>
         <Map
           orderType={orderType}
-          lowQuality={lowQuality}
+          useTiles={useTiles}
           position={position}
           setPosition={setPosition}
           zoom={zoom}

frontend/src/components/Map/index.tsx

@@ -10,7 +10,7 @@ import OrderTooltip from '../Charts/helpers/OrderTooltip';
 
 interface Props {
   orderType?: number;
-  lowQuality: boolean;
+  useTiles: boolean;
   position?: LatLng | undefined;
   setPosition?: (position: LatLng) => void;
   orders?: PublicOrder[];
@@ -25,7 +25,7 @@ const Map = ({
   zoom,
   orders = [],
   setPosition = () => {},
-  lowQuality = true,
+  useTiles = false,
   onOrderClicked = () => null,
   center,
 }: Props): JSX.Element => {
@@ -86,9 +86,8 @@ const Map = ({
       zoom={zoom ? zoom : 2}
       style={{ height: '100%', width: '100%' }}
     >
-      {lowQuality && !worldmap && <LinearProgress />}
-      <>{}</>
-      {lowQuality && worldmap && (
+      {!useTiles && !worldmap && <LinearProgress />}
+      {!useTiles && worldmap && (
         <>
           <GeoJSON
             data={worldmap}
@@ -101,7 +100,7 @@ const Map = ({
           {getOrderMarkers()}
         </>
       )}
-      {!lowQuality && (
+      {useTiles && (
         <>
           <TileLayer
             attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'