From c6fd912aee87b74b9e09e63e15288cb02265eab5 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 12 Apr 2024 17:45:01 +0500
Subject: [PATCH] styles fix

---
 .../InfrastructureFilters.tsx                 |  3 +-
 src/components/Mark.tsx                       | 12 ++---
 src/components/TransportMark.tsx              |  4 +-
 src/components/icons/EducationIcon.tsx        |  2 +-
 src/components/icons/SportIcon.tsx            | 22 ++------
 .../icons/marks/MarkEducationIcon.tsx         | 50 ++++++++-----------
 src/components/icons/marks/MarkHeathyIcon.tsx | 14 +++---
 src/components/icons/marks/MarkSportIcon.tsx  | 29 +++++------
 src/marks.json                                | 26 ++--------
 9 files changed, 62 insertions(+), 100 deletions(-)

diff --git a/src/components/InfrastructurePage/InfrastructureFilters.tsx b/src/components/InfrastructurePage/InfrastructureFilters.tsx
index bed445f..739a707 100644
--- a/src/components/InfrastructurePage/InfrastructureFilters.tsx
+++ b/src/components/InfrastructurePage/InfrastructureFilters.tsx
@@ -39,7 +39,8 @@ const InfrastructureFilters = ({
 
   useEffect(() => {
     const filteredMarks = marks.filter(
-      (mark) => mark.icon === filter && mark.distance <= selectedRange
+      (mark) =>
+        mark.icon === filter && mark.distance && mark.distance <= selectedRange
     );
     const filteredTransportMarks = transportMarks.filter(
       (mark) => mark.icon === filter && mark.distance <= selectedRange
diff --git a/src/components/Mark.tsx b/src/components/Mark.tsx
index fafff78..920b0b2 100644
--- a/src/components/Mark.tsx
+++ b/src/components/Mark.tsx
@@ -42,8 +42,10 @@ const Mark = ({
     <svg
       onMouseEnter={handleOnMouseEnter}
       onMouseLeave={handleOnMouseLeave}
-      className={`transition-all absolute ease-in-out cursor-pointer duration-300 group ${
-        isFiltered ? "opacity-100" : "opacity-0 pointer-events-none"
+      className={`transition-all absolute ease-in-out  duration-300 group ${
+        isFiltered
+          ? "opacity-100 cursor-pointer"
+          : "opacity-0 pointer-events-none"
       } `}
       x={mark.x - 150 + 50}
       y={mark.y}
@@ -69,12 +71,10 @@ const Mark = ({
             x={width / 2}
             y="0"
             rx={32}
-            width="100"
+            width={textWidth + 64}
             height="64"
             fill="white"
-            className={`transition-all duration-300 ease-in-out w-0 group-hover:w-[${
-              textWidth + 84
-            }]`}
+            className={`transition-all duration-300 ease-in-out w-0 `}
             style={{
               width: `${hoveredMark === mark.id ? `${textWidth + 64}` : 0}`,
             }}
diff --git a/src/components/TransportMark.tsx b/src/components/TransportMark.tsx
index 919ec40..f919412 100644
--- a/src/components/TransportMark.tsx
+++ b/src/components/TransportMark.tsx
@@ -60,7 +60,7 @@ const TransportMark = ({
     <svg
       x={transportMark.x}
       y={transportMark.y}
-      className={`transition-all z-50 absolute duration-300 ease-in-out cursor-pointer group ${
+      className={`transition-all z-50 absolute duration-300 ease-in-out group ${
         isFiltered ? "opacity-100" : "opacity-0 pointer-events-none"
       }`}
       xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +86,7 @@ const TransportMark = ({
         const offset = textOffset[textLength];
 
         return (
-          <svg x={`${32.023 + index * 26}`} y="24">
+          <svg x={`${32.023 + index * 26}`} y="24" key={transport}>
             <rect width="24" height="20" fill={mainColor} rx="4"></rect>
             <text fill="#fff" fontSize={10} y={14} x={offset} fontWeight={500}>
               {transport}
diff --git a/src/components/icons/EducationIcon.tsx b/src/components/icons/EducationIcon.tsx
index a6fa3cf..e1209df 100644
--- a/src/components/icons/EducationIcon.tsx
+++ b/src/components/icons/EducationIcon.tsx
@@ -7,7 +7,7 @@ const EducationIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_133_6227)">
+      <g clipPath="url(#clip0_133_6227)">
         <path
           d="M4.66667 7.1875H2L10 2.5L18 7.1875H15.3333M4.66667 7.1875V14.6875M4.66667 7.1875H8.22222M4.66667 14.6875H3.33333L2 17.5H18L16.6667 14.6875H15.3333M4.66667 14.6875H8.22222M15.3333 7.1875V14.6875M15.3333 7.1875H11.7778M15.3333 14.6875H11.7778M11.7778 7.1875V14.6875M11.7778 7.1875H8.22222M11.7778 14.6875H8.22222M8.22222 7.1875V14.6875"
           stroke="currentColor"
diff --git a/src/components/icons/SportIcon.tsx b/src/components/icons/SportIcon.tsx
index 283df7a..73abcee 100644
--- a/src/components/icons/SportIcon.tsx
+++ b/src/components/icons/SportIcon.tsx
@@ -7,29 +7,17 @@ const SportIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_133_6248)">
+      <g clipPath="url(#clip0_35_7027)">
         <path
-          d="M11.4085 10.6583C11.704 11.1701 11.8957 11.7351 11.9729 12.321C12.05 12.9069 12.011 13.5022 11.858 14.073C11.7051 14.6438 11.4412 15.1789 11.0815 15.6478C10.7217 16.1166 10.2731 16.51 9.76137 16.8055C9.2496 17.1009 8.68463 17.2927 8.09874 17.3698C7.51285 17.447 6.9175 17.408 6.34669 17.255C5.77587 17.1021 5.24078 16.8382 4.77195 16.4784C4.30311 16.1187 3.90973 15.6701 3.61426 15.1583C3.31878 14.6466 3.127 14.0816 3.04987 13.4957C2.97274 12.9098 3.01176 12.3145 3.16471 11.7437C3.31765 11.1728 3.58154 10.6377 3.94128 10.1689C4.30103 9.70009 4.7496 9.3067 5.26137 9.01123C5.77315 8.71576 6.33811 8.52398 6.924 8.44684C7.5099 8.36971 8.10525 8.40873 8.67606 8.56168C9.24687 8.71463 9.78197 8.97851 10.2508 9.33825C10.7196 9.698 11.113 10.1466 11.4085 10.6583L11.4085 10.6583Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-        <path
-          d="M5.37646 8.94482L11.0056 5.69482L11.5056 6.56085L14.1037 5.06085L13.6037 4.19482L16.6348 2.44482L18.3848 5.47591L12.1576 13.69"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-        <path
-          d="M3.79597 15.8419L3.24805 16.1582"
-          stroke="currentColor"
+          d="M8.23213 11.7678L11.7677 8.23229M15.3916 4.60837L16.2755 3.72448M3.72433 16.2756L4.60821 15.3917M8.2321 3.98961L11.0606 1.16122L18.8387 8.93939L16.0103 11.7678L8.2321 3.98961ZM1.16106 11.0607L3.98949 8.23228L11.7677 16.0105L8.93924 18.8389L1.16106 11.0607Z"
+          stroke="white"
           strokeWidth="1.5"
           strokeLinecap="square"
         />
       </g>
       <defs>
-        <clipPath id="clip0_133_6248">
-          <rect width="20" height="20" fill="currentColor" />
+        <clipPath id="clip0_35_7027">
+          <rect width="20" height="20" fill="white" />
         </clipPath>
       </defs>
     </svg>
diff --git a/src/components/icons/marks/MarkEducationIcon.tsx b/src/components/icons/marks/MarkEducationIcon.tsx
index d7f47b6..885a7d3 100644
--- a/src/components/icons/marks/MarkEducationIcon.tsx
+++ b/src/components/icons/marks/MarkEducationIcon.tsx
@@ -1,35 +1,25 @@
 const MarkEducationIcon = () => {
   return (
-    <svg
-      x={9.5}
-      y={9.5}
-      width="45"
-      height="45"
-      viewBox="0 0 45 45"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M40.4998 18.5L22.4998 27L4.49976 18.5L22.4998 9L40.4998 18.5Z"
-        stroke="white"
-        strokeWidth="2.8125"
-        strokeLinecap="square"
-      />
-      <ellipse cx="22.5002" cy="18" rx="4.5" ry="3.375" fill="white" />
-      <path
-        d="M21.3748 19.125L15.7498 22.4719V38.25"
-        stroke="white"
-        strokeWidth="2.8125"
-        strokeLinecap="square"
-      />
-      <circle cx="15.1877" cy="39.9375" r="2.8125" fill="white" />
-      <path
-        d="M34.8748 22.5V29.6827C34.8748 30.0393 34.7425 30.5214 34.2594 31.1121C33.7646 31.717 32.955 32.3622 31.7895 32.9524C30.6331 33.538 29.2144 34.0244 27.6049 34.362C25.9987 34.6989 24.2625 34.875 22.4998 34.875C20.7371 34.875 19.0008 34.6989 17.3946 34.362C15.7851 34.0244 14.3664 33.538 13.21 32.9524C12.0445 32.3622 11.2349 31.717 10.7401 31.1121C10.257 30.5214 10.1248 30.0393 10.1248 29.6827L10.1248 22.5"
-        stroke="white"
-        strokeWidth="2.8125"
-        strokeLinecap="square"
-      />
-    </svg>
+    <>
+      <g clipPath="url(#clip0_217_13219)">
+        <path
+          d="M22.8999 27.4375H18.0999L32.4999 19L46.8999 27.4375H42.0999M22.8999 27.4375V40.9375M22.8999 27.4375H29.2999M22.8999 40.9375H20.4999L18.0999 46H46.8999L44.4999 40.9375H42.0999M22.8999 40.9375H29.2999M42.0999 27.4375V40.9375M42.0999 27.4375H35.6999M42.0999 40.9375H35.6999M35.6999 27.4375V40.9375M35.6999 27.4375H29.2999M35.6999 40.9375H29.2999M29.2999 27.4375V40.9375"
+          stroke="white"
+          strokeWidth="3"
+          strokeLinecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_217_13219">
+          <rect
+            width="36"
+            height="36"
+            fill="white"
+            transform="translate(14.5 14.5)"
+          />
+        </clipPath>
+      </defs>
+    </>
   );
 };
 
diff --git a/src/components/icons/marks/MarkHeathyIcon.tsx b/src/components/icons/marks/MarkHeathyIcon.tsx
index 8366b20..2c7315e 100644
--- a/src/components/icons/marks/MarkHeathyIcon.tsx
+++ b/src/components/icons/marks/MarkHeathyIcon.tsx
@@ -1,11 +1,13 @@
 function MarkHeathyIcon() {
   return (
-    <path
-      d="M37.8339 18.2764H27.1659V27.1664H18.2759V37.8344H27.1659V46.7244H37.8339V37.8344H46.7239V27.1664H37.8339V18.2764Z"
-      stroke="white"
-      stroke-width="2.2225"
-      stroke-linecap="square"
-    />
+    <>
+      <path
+        d="M37.8999 17.6006H27.0999V26.6006H18.0999V37.4006H27.0999V46.4006H37.8999V37.4006H46.8999V26.6006H37.8999V17.6006Z"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="square"
+      />
+    </>
   );
 }
 
diff --git a/src/components/icons/marks/MarkSportIcon.tsx b/src/components/icons/marks/MarkSportIcon.tsx
index 58e6b3b..61308f2 100644
--- a/src/components/icons/marks/MarkSportIcon.tsx
+++ b/src/components/icons/marks/MarkSportIcon.tsx
@@ -1,28 +1,25 @@
 const MarkSportIcon = () => {
   return (
-    <svg
-      x={9.5}
-      y={9.5}
-      width="45"
-      height="45"
-      viewBox="0 0 45 45"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_177_12572)">
+    <>
+      <g clipPath="url(#clip0_341_12782)">
         <path
-          d="M18.5222 26.4775L26.4772 18.5226M34.631 10.3688L36.6198 8.38002M8.37968 36.6201L10.3684 34.6314M18.5222 8.97656L24.8862 2.61267L42.3871 20.1136L36.0231 26.4775L18.5222 8.97656ZM2.61233 24.8865L8.97629 18.5226L26.4772 36.0235L20.1132 42.3874L2.61233 24.8865Z"
+          d="M29.8183 35.6823L36.1823 29.3183M42.7053 22.7952L44.2963 21.2043M21.7043 43.7963L23.2953 42.2053M29.8183 21.6815L34.9095 16.5904L48.9102 30.5911L43.819 35.6823L29.8183 21.6815ZM17.0904 34.4095L22.1816 29.3183L36.1823 43.319L31.0911 48.4102L17.0904 34.4095Z"
           stroke="white"
-          stroke-width="2.8125"
-          stroke-linecap="square"
+          strokeWidth="3"
+          strokeLinecap="square"
         />
       </g>
       <defs>
-        <clipPath id="clip0_177_12572">
-          <rect width="45" height="45" fill="white" />
+        <clipPath id="clip0_341_12782">
+          <rect
+            width="36"
+            height="36"
+            fill="white"
+            transform="translate(15 14.5)"
+          />
         </clipPath>
       </defs>
-    </svg>
+    </>
   );
 };
 export { MarkSportIcon };
diff --git a/src/marks.json b/src/marks.json
index baf9cf8..753450b 100644
--- a/src/marks.json
+++ b/src/marks.json
@@ -246,7 +246,7 @@
     "x": 1010,
     "y": 1340,
     "icon": "heathy",
-    "distance": 400
+    "distance": 450
   },
   {
     "id": "heathy_2",
@@ -262,7 +262,7 @@
     "x": 780,
     "y": 1170,
     "icon": "heathy",
-    "distance": 450
+    "distance": 500
   },
   {
     "id": "heathy_4",
@@ -287,15 +287,7 @@
     "x": 1520,
     "y": 810,
     "icon": "heathy",
-    "distance": 750
-  },
-  {
-    "id": "heathy_6",
-    "label": "Детская поликлиника",
-    "x": 1480,
-    "y": 850,
-    "icon": "heathy",
-    "distance": 650
+    "distance": 700
   },
   {
     "id": "heathy_6",
@@ -311,7 +303,7 @@
     "x": 1360,
     "y": 1330,
     "icon": "heathy",
-    "distance": 600
+    "distance": 500
   },
   {
     "id": "heathy_9",
@@ -321,14 +313,6 @@
     "icon": "heathy",
     "distance": 700
   },
-  {
-    "id": "education_8",
-    "label": "Империя",
-    "x": 1320,
-    "y": 1280,
-    "icon": "education",
-    "distance": 500
-  },
   {
     "id": "education_1",
     "label": "Детский сад №9",
@@ -340,7 +324,7 @@
   {
     "id": "education_2",
     "label": "Детский сад №582",
-    "x": 1280,
+    "x": 1300,
     "y": 1020,
     "icon": "education",
     "distance": 350