EditDialog: Add icons

public/icons-climbing/readme.md

@@ -12,3 +12,9 @@ docker run --platform linux/amd64 -it -e FOLDER=icons -e THEME=climbing -v ${PWD
 mv sprites/icons ./
 
 ```
+
+All in one command:
+
+```bash
+rm -r sprites && mkdir sprites && mv icons sprites/ && docker run --platform linux/amd64 -it -e FOLDER=icons -e THEME=climbing -v ${PWD}:/data dolomate/spritezero && mv sprites/icons ./
+```

public/icons-climbing/sprites/climbing.json

@@ -4,27 +4,41 @@
     "pixelRatio": 1,
     "width": 32,
     "x": 0,
-    "y": 0
+    "y": 36
   },
   "area-gray": {
     "height": 32,
     "pixelRatio": 1,
     "width": 32,
     "x": 32,
+    "y": 36
+  },
+  "climbing-gym-gray": {
+    "height": 22,
+    "pixelRatio": 1,
+    "width": 39,
+    "x": 29,
     "y": 0
   },
   "crag-gray": {
     "height": 24,
     "pixelRatio": 1,
     "width": 24,
-    "x": 0,
-    "y": 32
+    "x": 64,
+    "y": 36
   },
   "crag-red": {
     "height": 24,
     "pixelRatio": 1,
     "width": 24,
-    "x": 24,
-    "y": 32
+    "x": 88,
+    "y": 36
+  },
+  "via-ferrata-gray": {
+    "height": 36,
+    "pixelRatio": 1,
+    "width": 29,
+    "x": 0,
+    "y": 0
   }
 }

public/icons-climbing/sprites/climbing@2x.json

@@ -4,27 +4,41 @@
     "pixelRatio": 2,
     "width": 64,
     "x": 0,
-    "y": 0
+    "y": 72
   },
   "area-gray": {
     "height": 64,
     "pixelRatio": 2,
     "width": 64,
     "x": 64,
+    "y": 72
+  },
+  "climbing-gym-gray": {
+    "height": 44,
+    "pixelRatio": 2,
+    "width": 78,
+    "x": 58,
     "y": 0
   },
   "crag-gray": {
     "height": 48,
     "pixelRatio": 2,
     "width": 48,
-    "x": 0,
-    "y": 64
+    "x": 128,
+    "y": 72
   },
   "crag-red": {
     "height": 48,
     "pixelRatio": 2,
     "width": 48,
-    "x": 48,
-    "y": 64
+    "x": 176,
+    "y": 72
+  },
+  "via-ferrata-gray": {
+    "height": 72,
+    "pixelRatio": 2,
+    "width": 58,
+    "x": 0,
+    "y": 0
   }
 }

public/icons-climbing/sprites/climbing@3x.json

@@ -4,27 +4,41 @@
     "pixelRatio": 3,
     "width": 96,
     "x": 0,
-    "y": 0
+    "y": 108
   },
   "area-gray": {
     "height": 96,
     "pixelRatio": 3,
     "width": 96,
     "x": 96,
+    "y": 108
+  },
+  "climbing-gym-gray": {
+    "height": 66,
+    "pixelRatio": 3,
+    "width": 117,
+    "x": 87,
     "y": 0
   },
   "crag-gray": {
     "height": 72,
     "pixelRatio": 3,
     "width": 72,
-    "x": 0,
-    "y": 96
+    "x": 192,
+    "y": 108
   },
   "crag-red": {
     "height": 72,
     "pixelRatio": 3,
     "width": 72,
-    "x": 72,
-    "y": 96
+    "x": 264,
+    "y": 108
+  },
+  "via-ferrata-gray": {
+    "height": 108,
+    "pixelRatio": 3,
+    "width": 87,
+    "x": 0,
+    "y": 0
   }
 }

src/components/FeaturePanel/Climbing/AreaIcon.tsx

@@ -0,0 +1,35 @@
+type AreaIconProps = {
+  fill: string;
+  stroke: string;
+  height?: number;
+  width?: number;
+};
+
+export const AreaIcon = ({ fill, stroke, height, width }: AreaIconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask id="path-1-inside-1_1773_242" fill="white">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.3192 14.5187L13.516 2L1 29H12.7073L12.7068 29.001H30.9995L21.8532 8.96875L19.3192 14.5187Z"
+      />
+    </mask>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.3192 14.5187L13.516 2L1 29H12.7073L12.7068 29.001H30.9995L21.8532 8.96875L19.3192 14.5187Z"
+      fill={fill}
+    />
+    <path
+      d="M13.516 2L14.8769 1.36915L13.516 -1.56661L12.1551 1.36915L13.516 2ZM19.3192 14.5187L17.9583 15.1496L19.3295 18.1076L20.6837 15.1417L19.3192 14.5187ZM1 29L-0.360892 28.3691L-1.34866 30.5H1V29ZM12.7073 29L14.0719 29.6228L15.0408 27.5H12.7073V29ZM12.7068 29.001L11.3423 28.3782L10.3733 30.501H12.7068V29.001ZM30.9995 29.001V30.501H33.3333L32.364 28.378L30.9995 29.001ZM21.8532 8.96875L23.2177 8.34575L21.8532 5.35722L20.4887 8.34575L21.8532 8.96875ZM12.1551 2.63085L17.9583 15.1496L20.6801 13.8878L14.8769 1.36915L12.1551 2.63085ZM2.36089 29.6309L14.8769 2.63085L12.1551 1.36915L-0.360892 28.3691L2.36089 29.6309ZM12.7073 27.5H1V30.5H12.7073V27.5ZM14.0714 29.6239L14.0719 29.6228L11.3427 28.3772L11.3423 28.3782L14.0714 29.6239ZM30.9995 27.501H12.7068V30.501H30.9995V27.501ZM20.4887 9.59175L29.635 29.624L32.364 28.378L23.2177 8.34575L20.4887 9.59175ZM20.6837 15.1417L23.2177 9.59175L20.4887 8.34575L17.9547 13.8957L20.6837 15.1417Z"
+      fill={stroke}
+      mask="url(#path-1-inside-1_1773_242)"
+    />
+  </svg>
+);

src/components/FeaturePanel/Climbing/CragIcon.tsx

@@ -0,0 +1,31 @@
+type CragIconProps = {
+  fill: string;
+  stroke: string;
+  height?: number;
+  width?: number;
+};
+
+export const CragIcon = ({
+  fill,
+  stroke,
+  height = 24,
+  width = 24,
+}: CragIconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask id="path-1-inside-1_1773_247" fill="white">
+      <path d="M12.1463 2L21.2927 22.0323H3L12.1463 2Z" />
+    </mask>
+    <path d="M12.1463 2L21.2927 22.0323H3L12.1463 2Z" fill={fill} />
+    <path
+      d="M12.1463 2L13.5108 1.377L12.1463 -1.61153L10.7818 1.377L12.1463 2ZM21.2927 22.0323V23.5323H23.6265L22.6572 21.4093L21.2927 22.0323ZM3 22.0323L1.6355 21.4093L0.666176 23.5323H3V22.0323ZM10.7818 2.623L19.9282 22.6553L22.6572 21.4093L13.5108 1.377L10.7818 2.623ZM21.2927 20.5323H3V23.5323H21.2927V20.5323ZM4.3645 22.6553L13.5108 2.623L10.7818 1.377L1.6355 21.4093L4.3645 22.6553Z"
+      fill={stroke}
+      mask="url(#path-1-inside-1_1773_247)"
+    />
+  </svg>
+);

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/LocationEditor/LocationEditor.tsx

@@ -4,6 +4,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Stack,
   Typography,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -12,6 +13,7 @@ import { useCurrentItem } from '../CurrentContext';
 import { getApiId } from '../../../../../../services/helpers';
 import { fetchWays } from '../../../../../../services/osm/fetchWays';
 import { OsmId } from '../../../../../../services/types';
+import PlaceIcon from '@mui/icons-material/Place';
 
 const EditFeatureMapDynamic = dynamic(() => import('./EditFeatureMap'), {
   ssr: false,
@@ -76,7 +78,10 @@ export const LocationEditor = () => {
       onChange={() => setExpanded(!expanded)}
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography variant="button">{t('editdialog.location')}</Typography>
+        <Stack direction="row" gap={1} alignItems="center">
+          <PlaceIcon />
+          <Typography variant="button">{t('editdialog.location')}</Typography>
+        </Stack>
       </AccordionSummary>
       <AccordionDetails>{content}</AccordionDetails>
     </Accordion>

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/MembersEditor.tsx

@@ -5,6 +5,7 @@ import {
   AccordionDetails,
   AccordionSummary,
   Chip,
+  Icon,
   List,
   Stack,
   Typography,
@@ -15,6 +16,8 @@ import { FeatureRow } from '../FeatureRow';
 import { t } from '../../../../../services/intl';
 import { useGetHandleClick } from '../helpers';
 import { AddMemberForm } from './AddMemberForm';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import { CragIcon } from '../../../Climbing/CragIcon';
 
 export const MembersEditor = () => {
   const { members, tags, nodeLonLat } = useCurrentItem();
@@ -23,15 +26,41 @@ export const MembersEditor = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const handleClick = useGetHandleClick({ setIsExpanded });
 
-  const getSectionName = () => {
+  const SectionName = () => {
     const isClimbingArea = tags.climbing === 'area';
+
     if (isClimbingArea) {
-      return t('editdialog.climbing_crags');
+      return (
+        <Stack direction="row" gap={1}>
+          <CragIcon
+            fill={theme.palette.text.primary}
+            stroke={theme.palette.text.primary}
+            height={24}
+            width={24}
+          />
+          <Typography variant="button">
+            {t('editdialog.climbing_crags')}{' '}
+            <Typography variant="caption" color="secondary">
+              ({t('editdialog.members')})
+            </Typography>
+          </Typography>
+        </Stack>
+      );
     }
     if (isClimbingCrag) {
-      return t('editdialog.climbing_routes');
+      return (
+        <Stack direction="row" gap={1}>
+          <ShowChartIcon />
+          <Typography variant="button">
+            {t('editdialog.climbing_routes')}{' '}
+            <Typography variant="caption" color="secondary">
+              ({t('editdialog.members')})
+            </Typography>
+          </Typography>
+        </Stack>
+      );
     }
-    return t('editdialog.members');
+    return <Typography variant="button">{t('editdialog.members')}</Typography>;
   };
 
   const AccordionComponent = ({
@@ -49,7 +78,7 @@ export const MembersEditor = () => {
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="button">{getSectionName()}</Typography>
+          <SectionName />
           {membersLength && (
             <Chip size="small" label={membersLength} variant="outlined" />
           )}