From eb741006100743b0a276c51120c7f20954b0b681 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 12 Apr 2024 13:44:31 +0500
Subject: [PATCH] mark style fixed

---
 src/components/Mark.tsx                       | 19 +++++++++-------
 src/components/icons/marks/MarkFoodIcon.tsx   |  4 ++--
 src/components/icons/marks/MarkHeathyIcon.tsx | 22 +++++--------------
 src/marks.json                                |  2 +-
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/Mark.tsx b/src/components/Mark.tsx
index 95ca67c..fafff78 100644
--- a/src/components/Mark.tsx
+++ b/src/components/Mark.tsx
@@ -42,7 +42,7 @@ const Mark = ({
     <svg
       onMouseEnter={handleOnMouseEnter}
       onMouseLeave={handleOnMouseLeave}
-      className={`transition-all absolute duration-300 ease-in-out cursor-pointer group ${
+      className={`transition-all absolute ease-in-out cursor-pointer duration-300 group ${
         isFiltered ? "opacity-100" : "opacity-0 pointer-events-none"
       } `}
       x={mark.x - 150 + 50}
@@ -56,12 +56,14 @@ const Mark = ({
       <svg xmlns="http://www.w3.org/2000/svg">
         <g>
           <rect
-            x={width / 2}
+            x={width / 2 + 1}
             y="0"
             width="32"
-            height="64"
+            height="63.5"
             fill="white"
-            className="transition-all duration-150 ease-in-out w-0 group-hover:w-8"
+            className={`transition-all duration-150 ${
+              hoveredMark === mark.id ? "delay-100" : ""
+            }  ease-in-out w-0 group-hover:w-8`}
           ></rect>
           <rect
             x={width / 2}
@@ -74,13 +76,14 @@ const Mark = ({
               textWidth + 84
             }]`}
             style={{
-              // width: `${true ? `${textWidth + 84}` : 0}`,
-              width: `${hoveredMark === mark.id ? `${textWidth + 84}` : 0}`,
+              width: `${hoveredMark === mark.id ? `${textWidth + 64}` : 0}`,
             }}
           ></rect>
           <text
-            className={`opacity-0 group-hover:opacity-100  pointer-events-none           
-               transition-opacity duration-300 ease-in-out`}
+            className={`${
+              hoveredMark === mark.id ? "" : "delay-150"
+            }  opacity-0 group-hover:opacity-100 duration-200 pointer-events-none           
+               transition-opacity ease-in-out`}
             ref={textRef}
             x="70"
             y="38"
diff --git a/src/components/icons/marks/MarkFoodIcon.tsx b/src/components/icons/marks/MarkFoodIcon.tsx
index b845908..85b3035 100644
--- a/src/components/icons/marks/MarkFoodIcon.tsx
+++ b/src/components/icons/marks/MarkFoodIcon.tsx
@@ -2,13 +2,13 @@ function MarkFoodIcon() {
   return (
     <>
       <path
-        d="M43.8371 46.5041V37.6141M43.8371 37.6141V18.0561C42.0591 16.8708 36.7251 24.8125 36.7251 37.6141H43.8371Z"
+        d="M42.3371 47.0041V38.1141M42.3371 38.1141V18.5561C40.5591 17.3708 35.2251 25.3125 35.2251 38.1141H42.3371Z"
         stroke="white"
         strokeWidth="2.2225"
         strokeLinecap="square"
       />
       <path
-        d="M24.9457 46.5043V47.6156H27.1682V46.5043H24.9457ZM27.1682 18.9453C27.1682 18.3316 26.6706 17.8341 26.0569 17.8341C25.4432 17.8341 24.9457 18.3316 24.9457 18.9453H27.1682ZM32.5022 18.9453C32.5022 18.3316 32.0046 17.8341 31.3909 17.8341C30.7772 17.8341 30.2797 18.3316 30.2797 18.9453H32.5022ZM21.8342 18.9453C21.8342 18.3316 21.3366 17.8341 20.7229 17.8341C20.1092 17.8341 19.6117 18.3316 19.6117 18.9453H21.8342ZM27.1682 46.5043V28.7243H24.9457V46.5043H27.1682ZM27.1682 28.7243V18.9453H24.9457V28.7243H27.1682ZM26.0569 29.8356H28.7239V27.6131H26.0569V29.8356ZM28.7239 28.7243C28.7239 29.8356 28.7259 29.8356 28.7279 29.8356C28.7286 29.8356 28.7306 29.8355 28.732 29.8355C28.7348 29.8355 28.7376 29.8355 28.7404 29.8354C28.7461 29.8354 28.752 29.8352 28.7582 29.8351C28.7704 29.8347 28.7834 29.8341 28.7972 29.8333C28.8247 29.8317 28.8553 29.829 28.8887 29.825C28.9555 29.8168 29.0333 29.8029 29.12 29.7802C29.2949 29.7344 29.4998 29.6543 29.7201 29.5197C30.1651 29.2478 30.6239 28.784 31.033 28.0341C31.8328 26.5676 32.5022 23.8995 32.5022 18.9453H30.2797C30.2797 23.7702 29.6155 25.9915 29.0818 26.9698C28.8241 27.4423 28.6162 27.5897 28.5612 27.6233C28.5314 27.6415 28.528 27.6378 28.557 27.6302C28.5708 27.6266 28.5913 27.6223 28.619 27.6189C28.6329 27.6172 28.6485 27.6157 28.6659 27.6147C28.6747 27.6142 28.6839 27.6138 28.6935 27.6135C28.6983 27.6134 28.7033 27.6132 28.7083 27.6132C28.7109 27.6131 28.7134 27.6131 28.716 27.6131C28.7173 27.6131 28.7193 27.6131 28.7199 27.6131C28.7219 27.6131 28.7239 27.6131 28.7239 28.7243ZM26.0569 27.6131H23.3899V29.8356H26.0569V27.6131ZM23.3899 28.7243C23.3899 27.6131 23.3919 27.6131 23.3939 27.6131C23.3945 27.6131 23.3965 27.6131 23.3978 27.6131C23.4004 27.6131 23.4029 27.6131 23.4055 27.6132C23.4105 27.6132 23.4155 27.6134 23.4203 27.6135C23.4299 27.6138 23.4391 27.6142 23.4479 27.6147C23.4653 27.6157 23.4809 27.6172 23.4948 27.6189C23.5225 27.6223 23.543 27.6266 23.5568 27.6302C23.5858 27.6378 23.5824 27.6415 23.5526 27.6233C23.4976 27.5897 23.2897 27.4423 23.032 26.9698C22.4983 25.9915 21.8342 23.7702 21.8342 18.9453H19.6117C19.6117 23.8995 20.281 26.5676 21.0808 28.0341C21.4899 28.784 21.9487 29.2478 22.3937 29.5197C22.614 29.6543 22.8189 29.7344 22.9938 29.7802C23.0805 29.8029 23.1583 29.8168 23.2251 29.825C23.2585 29.829 23.2891 29.8317 23.3166 29.8333C23.3304 29.8341 23.3434 29.8347 23.3556 29.8351C23.3618 29.8352 23.3677 29.8354 23.3734 29.8354C23.3762 29.8355 23.379 29.8355 23.3818 29.8355C23.3832 29.8355 23.3852 29.8356 23.3859 29.8356C23.3879 29.8356 23.3899 29.8356 23.3899 28.7243ZM23.3899 29.8356C23.3899 29.8356 23.3899 28.7243 23.3899 27.6131C23.3899 27.6131 23.3899 27.6131 23.3899 28.7243C23.3899 29.8356 23.3899 29.8356 23.3899 29.8356C23.3899 28.7243 23.3899 27.6131 23.3899 27.6131V29.8356ZM28.7239 27.6131C28.7239 27.6131 28.7239 28.7243 28.7239 29.8356C28.7239 29.8356 28.7239 29.8356 28.7239 28.7243C28.7239 27.6131 28.7239 27.6131 28.7239 27.6131C28.7239 28.7243 28.7239 29.8356 28.7239 29.8356V27.6131Z"
+        d="M23.4457 47.0043V48.1156H25.6682V47.0043H23.4457ZM25.6682 19.4453C25.6682 18.8316 25.1706 18.3341 24.5569 18.3341C23.9432 18.3341 23.4457 18.8316 23.4457 19.4453H25.6682ZM31.0022 19.4453C31.0022 18.8316 30.5046 18.3341 29.8909 18.3341C29.2772 18.3341 28.7797 18.8316 28.7797 19.4453H31.0022ZM20.3342 19.4453C20.3342 18.8316 19.8366 18.3341 19.2229 18.3341C18.6092 18.3341 18.1117 18.8316 18.1117 19.4453H20.3342ZM25.6682 47.0043V29.2243H23.4457V47.0043H25.6682ZM25.6682 29.2243V19.4453H23.4457V29.2243H25.6682ZM24.5569 30.3356H27.2239V28.1131H24.5569V30.3356ZM27.2239 29.2243C27.2239 30.3356 27.2259 30.3356 27.2279 30.3356C27.2286 30.3356 27.2306 30.3355 27.232 30.3355C27.2348 30.3355 27.2376 30.3355 27.2404 30.3354C27.2461 30.3354 27.252 30.3352 27.2582 30.3351C27.2704 30.3347 27.2834 30.3341 27.2972 30.3333C27.3247 30.3317 27.3553 30.329 27.3887 30.325C27.4555 30.3168 27.5333 30.3029 27.62 30.2802C27.7949 30.2344 27.9998 30.1543 28.2201 30.0197C28.6651 29.7478 29.1239 29.284 29.533 28.5341C30.3328 27.0676 31.0022 24.3995 31.0022 19.4453H28.7797C28.7797 24.2702 28.1155 26.4915 27.5818 27.4698C27.3241 27.9423 27.1162 28.0897 27.0612 28.1233C27.0314 28.1415 27.028 28.1378 27.057 28.1302C27.0708 28.1266 27.0913 28.1223 27.119 28.1189C27.1329 28.1172 27.1485 28.1157 27.1659 28.1147C27.1747 28.1142 27.1839 28.1138 27.1935 28.1135C27.1983 28.1134 27.2033 28.1132 27.2083 28.1132C27.2109 28.1131 27.2134 28.1131 27.216 28.1131C27.2173 28.1131 27.2193 28.1131 27.2199 28.1131C27.2219 28.1131 27.2239 28.1131 27.2239 29.2243ZM24.5569 28.1131H21.8899V30.3356H24.5569V28.1131ZM21.8899 29.2243C21.8899 28.1131 21.8919 28.1131 21.8939 28.1131C21.8945 28.1131 21.8965 28.1131 21.8978 28.1131C21.9004 28.1131 21.9029 28.1131 21.9055 28.1132C21.9105 28.1132 21.9155 28.1134 21.9203 28.1135C21.9299 28.1138 21.9391 28.1142 21.9479 28.1147C21.9653 28.1157 21.9809 28.1172 21.9948 28.1189C22.0225 28.1223 22.043 28.1266 22.0568 28.1302C22.0858 28.1378 22.0824 28.1415 22.0526 28.1233C21.9976 28.0897 21.7897 27.9423 21.532 27.4698C20.9983 26.4915 20.3342 24.2702 20.3342 19.4453H18.1117C18.1117 24.3995 18.781 27.0676 19.5808 28.5341C19.9899 29.284 20.4487 29.7478 20.8937 30.0197C21.114 30.1543 21.3189 30.2344 21.4938 30.2802C21.5805 30.3029 21.6583 30.3168 21.7251 30.325C21.7585 30.329 21.7891 30.3317 21.8166 30.3333C21.8304 30.3341 21.8434 30.3347 21.8556 30.3351C21.8618 30.3352 21.8677 30.3354 21.8734 30.3354C21.8762 30.3355 21.879 30.3355 21.8818 30.3355C21.8832 30.3355 21.8852 30.3356 21.8859 30.3356C21.8879 30.3356 21.8899 30.3356 21.8899 29.2243ZM21.8899 30.3356C21.8899 30.3356 21.8899 29.2243 21.8899 28.1131C21.8899 28.1131 21.8899 28.1131 21.8899 29.2243C21.8899 30.3356 21.8899 30.3356 21.8899 30.3356C21.8899 29.2243 21.8899 28.1131 21.8899 28.1131V30.3356ZM27.2239 28.1131C27.2239 28.1131 27.2239 29.2243 27.2239 30.3356C27.2239 30.3356 27.2239 30.3356 27.2239 29.2243C27.2239 28.1131 27.2239 28.1131 27.2239 28.1131C27.2239 29.2243 27.2239 30.3356 27.2239 30.3356V28.1131Z"
         fill="white"
       />
     </>
diff --git a/src/components/icons/marks/MarkHeathyIcon.tsx b/src/components/icons/marks/MarkHeathyIcon.tsx
index d2c017b..8366b20 100644
--- a/src/components/icons/marks/MarkHeathyIcon.tsx
+++ b/src/components/icons/marks/MarkHeathyIcon.tsx
@@ -1,21 +1,11 @@
 function MarkHeathyIcon() {
   return (
-    <svg
-      x={9.5}
-      y={9.5}
-      width="64"
-      height="64"
-      viewBox="0 0 64 64"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M29.25 4.5H15.75V15.75H4.5V29.25H15.75V40.5H29.25V29.25H40.5V15.75H29.25V4.5Z"
-        stroke="white"
-        strokeWidth="3.375"
-        strokeLinecap="square"
-      />
-    </svg>
+    <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"
+    />
   );
 }
 
diff --git a/src/marks.json b/src/marks.json
index 2d58fcb..baf9cf8 100644
--- a/src/marks.json
+++ b/src/marks.json
@@ -417,7 +417,7 @@
     "x": 760,
     "y": 1120,
     "icon": "education",
-    "distance": 400
+    "distance": 450
   },
   {
     "id": "education_12",