Add broken heart to health progress

components/Layers/Houses/CardContent/CardContent.tsx

@@ -101,7 +101,7 @@ export function HousesCardContent() {
             result.push({
                 name: 'Износ',
                 text: `${placemark?.attributes?.WearAndTear}%`,
-                content: <HealthProgress percent={placemark?.attributes?.WearAndTear} />,
+                content: <HealthProgress percent={placemark?.attributes?.WearAndTear} isEmergency={isEmergency} />,
             });
         }
 
@@ -120,12 +120,7 @@ export function HousesCardContent() {
         }
 
         return result;
-    }, [
-        placemark?.attributes?.Management_company,
-        placemark?.attributes?.WearAndTear,
-        placemark?.attributes?.Series,
-        placemark?.attributes?.Floors,
-    ]);
+    }, [placemark?.attributes?.Management_company, placemark?.attributes?.WearAndTear, placemark?.attributes?.Series, placemark?.attributes?.Floors, isEmergency]);
 
     if (loading) {
         return (

components/Layers/Houses/HealthProgress/HealthProgress.module.css

@@ -4,16 +4,17 @@
 }
 
 .health_progress__track {
-    position: relative;
     width: 289px;
     display: grid;
     background-color: #38465f;
     border-radius: 5px;
 }
 .health_progress__thumb {
-    border-radius: 10px 0 0 10px;
+    position: relative;
+    border-radius: 10px;
 }
 .health_progressbar__icon {
     position: absolute;
-    top: -6px;
+    top: -7px;
+    right: -10px
 }

components/Layers/Houses/HealthProgress/HealthProgress.tsx

@@ -1,13 +1,15 @@
 import { useMemo } from 'react';
+import BrokenHeart from 'components/UI/Icons/BrokenHeart';
 import Heart from 'components/UI/Icons/Heart';
 import { WEAR_TEAR_FILTERS_DATA } from '../Houses.constants';
 import styles from './HealthProgress.module.css';
 
 type Props = {
     percent: number;
+    isEmergency: boolean
 };
 
-function HealthProgress({ percent }: Props) {
+function HealthProgress({ percent, isEmergency }: Props) {
     const healthColor = useMemo(() => WEAR_TEAR_FILTERS_DATA.find(({ from, to }) => percent >= from && percent <= to).color, [percent]);
 
     return (
@@ -20,14 +22,12 @@ function HealthProgress({ percent }: Props) {
                     backgroundColor: healthColor,
                     width: `${100 - percent}%`,
                 }}
-            />
-            <div
-                className={styles.health_progressbar__icon}
-                style={{
-                    right: `${percent - 6}%`,
-                }}
             >
-                <Heart color={healthColor} />
+                <div
+                    className={styles.health_progressbar__icon}
+                >
+                    {isEmergency ? <BrokenHeart color={healthColor} /> : <Heart color={healthColor} />}
+                </div>
             </div>
         </div>
     );

components/UI/Icons/BrokenHeart.tsx

@@ -4,9 +4,9 @@ type Props = {
 
 function BrokenHeart({ color }: Props) {
     return (
-        <svg width="23" height="23" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="21" height="21" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M17.2293 8.30273L13.3943 12.4864L12.526 13.4336L13.3287 14.437L20.7922 23.7664L17.2612 33.0014C17.14 32.8925 17.0189 32.7835 16.898 32.6743C16.5378 32.3483 16.1772 32.0227 15.8164 31.697C14.6395 30.6345 13.462 29.5713 12.2977 28.4947C10.6145 26.9376 8.98474 25.3254 7.53116 23.5521C6.42491 22.2039 5.4322 20.7792 4.77262 19.1571C4.08966 17.4768 3.81498 15.7437 4.12974 13.9417C4.50795 11.7746 5.57914 10.0161 7.35165 8.68183C8.55392 7.77834 9.91649 7.24068 11.4218 7.07379C13.5839 6.83476 15.512 7.26834 17.2293 8.30273ZM16.474 13.5664L23.6713 22.563L24.2078 23.2336L23.9011 24.0357L19.8156 34.7208C20.3083 34.2783 20.801 33.8361 21.2937 33.394C22.5955 32.2258 23.8968 31.0581 25.1945 29.8857C27.0856 28.1781 28.9357 26.4295 30.6306 24.5288C31.7836 23.2364 32.8439 21.8775 33.6613 20.3492C34.7475 18.3211 35.2693 16.186 34.8619 13.8882C34.5012 11.8486 33.5144 10.1493 31.8738 8.85694C29.88 7.28589 27.5898 6.73344 25.0726 7.11736C21.167 7.71447 18.9746 10.8384 16.474 13.5664Z" fill={color} stroke="#1E2841" strokeWidth="2" />
+        <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.53 9.35444L1.52922 9.35267C1.0399 8.23724 0.885252 7.00876 1.08468 5.80981C1.32246 4.34578 2.14041 3.03845 3.3521 2.16128C4.18076 1.5457 5.165 1.16435 6.19702 1.05542C7.14136 0.94332 8.10004 1.04086 9.00086 1.34131C9.73257 1.58537 10.4116 1.95848 11.0039 2.44171C11.8835 1.72596 12.9476 1.25735 14.0811 1.08675C14.9087 0.944892 15.7582 0.977281 16.5722 1.18196C17.3875 1.38696 18.1496 1.7604 18.806 2.27859C19.9316 3.1425 20.6881 4.39055 20.9148 5.77983L1.53 9.35444ZM1.53 9.35444C1.97174 10.3561 2.56577 11.2867 3.2915 12.1155C4.17421 13.1488 5.12895 14.1219 6.14891 15.0281C6.82913 15.6464 7.51825 16.258 8.20181 16.8647C8.4104 17.0498 8.61848 17.2345 8.82563 17.4188L8.8263 17.4194M1.53 9.35444L8.8263 17.4194M8.8263 17.4194C9.13071 17.6897 9.44087 17.9615 9.74999 18.2324C9.9476 18.4056 10.1448 18.5785 10.3398 18.7503L10.987 19.3206M8.8263 17.4194L10.987 19.3206M10.987 19.3206L11.6419 18.7676M10.987 19.3206L11.6419 18.7676M11.6419 18.7676C11.643 18.7667 11.6446 18.7654 11.6469 18.7637M11.6419 18.7676L11.6469 18.7637M11.6469 18.7637C11.6515 18.76 11.6637 18.7505 11.6776 18.7391M11.6469 18.7637L11.6776 18.7391M11.6776 18.7391C11.689 18.7297 11.704 18.7171 11.721 18.7017M11.6776 18.7391L11.721 18.7017M11.721 18.7017C12.8048 17.7445 13.8878 16.7875 14.97 15.8308C16.1041 14.8449 17.1825 13.8002 18.2005 12.7014C18.9341 11.9209 19.5705 11.0587 20.0961 10.1324C20.8704 8.81671 21.1606 7.28118 20.9148 5.78007L11.721 18.7017Z" fill="#1E2841" stroke="#1E2841" strokeWidth={2} />
+            <path fillRule="evenodd" clipRule="evenodd" d="M9.68153 2.75191L7.45476 5.16666L6.95058 5.71337L7.41667 6.29252L11.7503 11.6773L9.70006 17.0076C9.62968 16.9447 9.55937 16.8818 9.48917 16.8188C9.28002 16.6306 9.07064 16.4427 8.86114 16.2547C8.17778 15.6415 7.49407 15.0278 6.81802 14.4064C5.84068 13.5077 4.89437 12.5771 4.05035 11.5536C3.40801 10.7754 2.8316 9.95313 2.44862 9.01688C2.05206 8.04704 1.89257 7.04672 2.07533 6.00664C2.29494 4.75582 2.91692 3.74084 3.94612 2.97072C4.64421 2.44924 5.43538 2.13892 6.30943 2.04259C7.56485 1.90463 8.68439 2.15488 9.68153 2.75191ZM9.24297 5.79002L13.4221 10.9827L13.7336 11.3698L13.5555 11.8327L11.1833 18C11.4693 17.7446 11.7554 17.4894 12.0415 17.2342C12.7974 16.5599 13.553 15.8859 14.3065 15.2093C15.4045 14.2237 16.4788 13.2144 17.4629 12.1173C18.1324 11.3714 18.7481 10.5871 19.2227 9.70494C19.8534 8.53436 20.1564 7.30201 19.9198 5.97576C19.7104 4.79853 19.1374 3.81772 18.1848 3.0718C17.0271 2.16501 15.6973 1.84615 14.2357 2.06774C11.9679 2.41238 10.6949 4.21546 9.24297 5.79002Z" fill={color} stroke="#1E2841" strokeWidth={2} />
         </svg>
     );
 }

components/UI/Icons/Heart.tsx

@@ -4,10 +4,8 @@ type Props = {
 
 function Heart({ color }: Props) {
     return (
-        <svg width="26" height="26" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g filter="url(#filter0_d_9906_8273)">
-                <path d="M21.2368 3.94148C21.059 2.80638 20.463 1.78036 19.5675 1.06772C19.043 0.635773 18.4319 0.323289 17.776 0.151769C17.1201 -0.0197501 16.4352 -0.0462488 15.7682 0.0741001C14.7277 0.234917 13.7622 0.716391 13.0047 1.45228C12.8834 1.56827 12.7607 1.68332 12.6385 1.7993C12.5546 1.71008 12.4702 1.60818 12.3736 1.51708C11.826 0.964064 11.1601 0.544338 10.4268 0.28994C9.69345 0.0355426 8.91208 -0.046788 8.14233 0.0492231C7.3149 0.138897 6.5281 0.45672 5.86857 0.967696C4.90163 1.69379 4.25554 2.77221 4.06869 3.972C3.90725 4.97922 4.03174 6.01186 4.42783 6.95094C4.81359 7.86077 5.33307 8.70701 5.96885 9.46126C6.79103 10.4627 7.68072 11.4059 8.6316 12.2843C9.4814 13.0877 10.3438 13.878 11.2015 14.6716C11.681 15.1144 12.1651 15.552 12.6539 16C12.6759 15.9807 12.6912 15.9699 12.7043 15.9573C13.7491 14.9975 14.793 14.038 15.8363 13.0788C16.9026 12.1148 17.9164 11.0934 18.8731 10.0191C19.5292 9.29353 20.0975 8.49217 20.5661 7.63182C21.2004 6.51443 21.437 5.21259 21.2368 3.94148Z" fill={color} stroke="#1E2841" strokeWidth="2" />
-            </g>
+        <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.50643 9.33957L1.50716 9.3413C1.93102 10.341 2.50162 11.2712 3.20003 12.1008C4.04893 13.1343 4.96734 14.1079 5.94877 15.0149C6.60281 15.6332 7.26543 16.2449 7.92259 16.8515C8.12317 17.0367 8.32324 17.2214 8.5224 17.4056L8.52307 17.4062C8.81583 17.6766 9.11422 17.9486 9.41154 18.2197C9.60147 18.3928 9.79097 18.5656 9.97829 18.7372L10.6397 19.3434L11.3094 18.7553C11.3104 18.7544 11.3119 18.7532 11.3137 18.7517C11.3182 18.7481 11.3302 18.7383 11.3438 18.7267C11.3551 18.7171 11.3698 18.7042 11.3865 18.6885C12.4284 17.7313 13.4696 16.7744 14.51 15.8178C15.601 14.8313 16.6383 13.7861 17.6173 12.687C18.3235 11.9057 18.9353 11.0433 19.4402 10.1177C20.1831 8.80493 20.4595 7.27726 20.2247 5.78591C20.0084 4.4074 19.2854 3.15953 18.1969 2.29053C17.5622 1.76938 16.8228 1.39189 16.029 1.18431C15.2366 0.977088 14.4092 0.944162 13.603 1.08776C12.5163 1.25802 11.4992 1.72029 10.6569 2.42112C10.0938 1.95139 9.44963 1.58631 8.75453 1.34518C7.87895 1.04143 6.94595 0.94248 6.02652 1.05592C5.02024 1.16649 4.06404 1.553 3.26209 2.17257C2.08968 3.0554 1.30778 4.36314 1.08095 5.8159C0.890422 7.00715 1.0378 8.22848 1.50643 9.33957Z" fill={color} stroke="#1E2841" strokeWidth="2" />
         </svg>
 
     );