Improve f2f pin icons (#900)

* Add SVG icons for map pins

* Improve f2f pin icons

---------

Co-authored-by: Reckless_Satoshi <reckless.satoshi@protonmail.com>

frontend/src/components/Icons/MapPin.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function MapPin(color: 'Blue' | 'Lilac') {
+  const lightHex = color === 'Blue' ? '#bde4f8;' : '#c55fcc';
+
+  return `<svg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.66 29.68'><defs><style>.cls-1{fill:${lightHex};}.cls-2{fill:#fff;}</style></defs><path class='cls-1' d='M18,8A9.13,9.13,0,0,0,10.89.62,10.88,10.88,0,0,0,9.33.49,10.88,10.88,0,0,0,7.77.62,9.13,9.13,0,0,0,.66,8a12.92,12.92,0,0,0,1.19,8.25C2.68,18.09,7.47,27.6,9.07,29c0,.12.11.19.19.19l.07,0,.07,0c.08,0,.15-.07.19-.19,1.6-1.41,6.39-10.92,7.22-12.8A12.92,12.92,0,0,0,18,8Z'/><path d='M9.23,29.6a.57.57,0,0,1-.5-.35C7,27.57,2.24,18.09,1.48,16.38A13.57,13.57,0,0,1,.26,7.87C1.18,3.78,4,.92,7.7.23h0A8.38,8.38,0,0,1,11,.24h0c3.74.69,6.52,3.55,7.44,7.64a13.57,13.57,0,0,1-1.22,8.51c-.76,1.71-5.5,11.19-7.25,12.87a.57.57,0,0,1-.55.35H9.23ZM8,1,7.85,1a8.68,8.68,0,0,0-6.8,7C.5,10.52.86,13,2.22,16.05c.9,2,5.62,11.32,7.11,12.65,1.49-1.33,6.21-10.63,7.11-12.65,1.36-3.07,1.72-5.53,1.17-8h0a8.68,8.68,0,0,0-6.8-7l-.12,0A10.47,10.47,0,0,0,9.33.89,10.3,10.3,0,0,0,8,1Z'/><rect x='3.12' y='6.34' width='12.53' height='7.76' rx='3.88'/><rect class='cls-2' x='5.02' y='7.82' width='2.16' height='2.34' rx='1.02'/><rect class='cls-2' x='11.25' y='7.82' width='2.16' height='2.34' rx='1.02'/><path class='cls-2' d='M9.24,12.76A3.57,3.57,0,0,1,7,12a.4.4,0,1,1,.53-.61,2.78,2.78,0,0,0,3.49,0,.4.4,0,0,1,.48.65A3.71,3.71,0,0,1,9.24,12.76Z'/></svg>`;
+}

frontend/src/components/Icons/index.ts

@@ -17,6 +17,7 @@ export { default as UserNinjaIcon } from './UserNinja';
 export { default as TorIcon } from './Tor';
 export { default as SimplexIcon } from './Simplex';
 export { default as NostrIcon } from './Nostr';
+export { default as MapPin } from './MapPin';
 
 // Flags with props
 export { default as FlagWithProps } from './WorldFlags';

frontend/src/components/Map/index.tsx

@@ -4,11 +4,12 @@ import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from
 import { useTheme, LinearProgress } from '@mui/material';
 import { UseAppStoreType, AppContext } from '../../contexts/AppContext';
 import { GeoJsonObject } from 'geojson';
-import { Icon, LeafletMouseEvent } from 'leaflet';
+import { DivIcon, LeafletMouseEvent } from 'leaflet';
 import { PublicOrder } from '../../models';
 import OrderTooltip from '../Charts/helpers/OrderTooltip';
 import getWorldmapGeojson from '../../geo/Web';
 import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
+import { MapPin } from '../Icons';
 
 interface Props {
   orderType?: number;
@@ -50,20 +51,17 @@ const Map = ({
     order?: PublicOrder,
   ) => {
     const color = orderType == 1 ? 'Blue' : 'Lilac';
-    const path =
-      window.NativeRobosats === undefined
-        ? '/static/assets'
-        : 'file:///android_asset/Web.bundle/assets';
 
     return (
       <Marker
         key={key}
         position={position}
         icon={
-          new Icon({
-            iconUrl: `${path}/vector/Location_robot_${color}.svg`,
-            iconAnchor: [18, 32],
-            iconSize: [32, 32],
+          new DivIcon({
+            html: MapPin(color),
+            iconAnchor: [14, 38],
+            iconSize: [24, 24],
+            className: '',
           })
         }
         eventHandlers={{

frontend/static/assets/vector/Location_Blue.svg

@@ -1 +0,0 @@
-<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.67 29.99"><defs><style>.cls-1{fill:#00a2f9;}</style></defs><rect x="9.95" y="10.67" width="1.77" height="19.33" rx="0.88"/><path d="M10.84,21.67A10.84,10.84,0,1,1,21.67,10.84,10.85,10.85,0,0,1,10.84,21.67ZM10.84,2a8.84,8.84,0,1,0,8.83,8.84A8.84,8.84,0,0,0,10.84,2Z"/><rect class="cls-1" x="1" y="1" width="19.67" height="19.67" rx="9.84"/></svg>

frontend/static/assets/vector/Location_Lilac.svg

@@ -1 +0,0 @@
-<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.67 29.99"><defs><style>.cls-1{fill:#c360c9;}</style></defs><rect x="9.95" y="10.67" width="1.77" height="19.33" rx="0.88"/><path d="M10.84,21.67A10.84,10.84,0,1,1,21.67,10.84,10.85,10.85,0,0,1,10.84,21.67ZM10.84,2a8.84,8.84,0,1,0,8.83,8.84A8.84,8.84,0,0,0,10.84,2Z"/><rect class="cls-1" x="1" y="1" width="19.67" height="19.67" rx="9.84"/></svg>

frontend/static/assets/vector/Location_robot_Blue.svg

@@ -1 +0,0 @@
-<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.66 29.68"><defs><style>.cls-1{fill:#00a4fb;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M18,8A9.13,9.13,0,0,0,10.89.62,10.88,10.88,0,0,0,9.33.49,10.88,10.88,0,0,0,7.77.62,9.13,9.13,0,0,0,.66,8a12.92,12.92,0,0,0,1.19,8.25C2.68,18.09,7.47,27.6,9.07,29c0,.12.11.19.19.19l.07,0,.07,0c.08,0,.15-.07.19-.19,1.6-1.41,6.39-10.92,7.22-12.8A12.92,12.92,0,0,0,18,8Z"/><path d="M9.23,29.6a.57.57,0,0,1-.5-.35C7,27.57,2.24,18.09,1.48,16.38A13.57,13.57,0,0,1,.26,7.87C1.18,3.78,4,.92,7.7.23h0A8.38,8.38,0,0,1,11,.24h0c3.74.69,6.52,3.55,7.44,7.64a13.57,13.57,0,0,1-1.22,8.51c-.76,1.71-5.5,11.19-7.25,12.87a.57.57,0,0,1-.55.35H9.23ZM8,1,7.85,1a8.68,8.68,0,0,0-6.8,7C.5,10.52.86,13,2.22,16.05c.9,2,5.62,11.32,7.11,12.65,1.49-1.33,6.21-10.63,7.11-12.65,1.36-3.07,1.72-5.53,1.17-8h0a8.68,8.68,0,0,0-6.8-7l-.12,0A10.47,10.47,0,0,0,9.33.89,10.3,10.3,0,0,0,8,1Z"/><rect x="3.12" y="6.34" width="12.53" height="7.76" rx="3.88"/><rect class="cls-2" x="5.02" y="7.82" width="2.16" height="2.34" rx="1.02"/><rect class="cls-2" x="11.25" y="7.82" width="2.16" height="2.34" rx="1.02"/><path class="cls-2" d="M9.24,12.76A3.57,3.57,0,0,1,7,12a.4.4,0,1,1,.53-.61,2.78,2.78,0,0,0,3.49,0,.4.4,0,0,1,.48.65A3.71,3.71,0,0,1,9.24,12.76Z"/></svg>

frontend/static/assets/vector/Location_robot_Lilac.svg

@@ -1 +0,0 @@
-<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.66 29.68"><defs><style>.cls-1{fill:#c55fcc;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M18,7.88A9.1,9.1,0,0,0,10.89.54a9.42,9.42,0,0,0-3.12,0A9.1,9.1,0,0,0,.66,7.88a12.92,12.92,0,0,0,1.19,8.25C2.68,18,7.47,27.51,9.07,28.93c0,.12.11.19.19.18l.07,0,.07,0c.08,0,.15-.06.19-.18C11.19,27.51,16,18,16.81,16.13A12.92,12.92,0,0,0,18,7.88Z"/><path d="M9.23,29.52a.57.57,0,0,1-.5-.35C7,27.49,2.24,18,1.48,16.29A13.54,13.54,0,0,1,.26,7.79C1.18,3.69,4,.84,7.7.14v0A7.63,7.63,0,0,1,9.33,0,7.53,7.53,0,0,1,11,.16v0c3.74.7,6.52,3.55,7.44,7.65a13.54,13.54,0,0,1-1.22,8.5c-.76,1.71-5.5,11.2-7.25,12.88a.58.58,0,0,1-.55.35H9.23ZM8,.92l-.12,0C4.44,1.57,1.9,4.2,1.05,8,.5,10.43.86,12.9,2.22,16c.9,2,5.62,11.33,7.11,12.66C10.82,27.29,15.54,18,16.44,16c1.36-3.06,1.72-5.53,1.17-8h0c-.85-3.77-3.39-6.4-6.8-7l-.12,0A8.46,8.46,0,0,0,8,.92Z"/><path d="M12.58,14H6.19c-2.13,0-3.07-1.75-3.07-3.88h0c0-2.13.94-3.88,3.07-3.88h6.39c2.14,0,3.07,1.75,3.07,3.88h0C15.65,12.27,14.72,14,12.58,14Z"/><rect class="cls-2" x="5.02" y="7.73" width="2.16" height="2.34" rx="1.02"/><rect class="cls-2" x="11.25" y="7.73" width="2.16" height="2.34" rx="1.02"/><path class="cls-2" d="M9.24,12.67A3.57,3.57,0,0,1,7,11.87a.4.4,0,0,1,0-.57.41.41,0,0,1,.57-.05,2.76,2.76,0,0,0,3.49,0,.39.39,0,0,1,.56.08.4.4,0,0,1-.08.57A3.7,3.7,0,0,1,9.24,12.67Z"/></svg>

frontend/webpack.config.ts

@@ -167,10 +167,6 @@ const configMobile: Configuration = {
           from: path.resolve(__dirname, 'static/assets/sounds'),
           to: path.resolve(__dirname, '../mobile/html/Web.bundle/assets/sounds'),
         },
-        {
-          from: path.resolve(__dirname, 'static/assets/vector'),
-          to: path.resolve(__dirname, '../mobile/html/Web.bundle/assets/vector'),
-        },
       ],
     }),
   ],