From a372a8c04c9d842a6c7de1b4562aefcbfd07d747 Mon Sep 17 00:00:00 2001
From: Mayur <mayurkaikadi@knovator.in>
Date: Tue, 19 Nov 2024 11:59:50 +0530
Subject: [PATCH] feat: Added camelCase strokeWidth to prevent react hydration
 issues

---
 .../illustrations/PlanCancelIllustration.tsx  | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/home/PlanDetails/illustrations/PlanCancelIllustration.tsx b/apps/web/components/home/PlanDetails/illustrations/PlanCancelIllustration.tsx
index d90ea3ff..83abb075 100644
--- a/apps/web/components/home/PlanDetails/illustrations/PlanCancelIllustration.tsx
+++ b/apps/web/components/home/PlanDetails/illustrations/PlanCancelIllustration.tsx
@@ -9,25 +9,25 @@ export const PlanCancelIllustration = () => {
         d="M55.7706 205.877C52.9677 205.874 50.2806 204.789 48.2987 202.86C46.3169 200.931 45.2022 198.316 45.1992 195.588V57.9063C45.1981 55.1744 46.3105 52.5535 48.2923 50.6188C50.2741 48.684 52.9635 47.5933 55.7706 47.5859H240.154C242.961 47.5933 245.651 48.684 247.632 50.6188C249.614 52.5535 250.727 55.1744 250.725 57.9063V195.588C250.722 198.316 249.608 200.931 247.626 202.86C245.644 204.789 242.957 205.874 240.154 205.877H55.7706Z"
         fill="white"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M240.155 47.9848C242.854 47.992 245.44 49.0408 247.345 50.9012C249.25 52.7615 250.32 55.2814 250.318 57.9081V195.591C250.316 198.213 249.244 200.728 247.339 202.582C245.433 204.437 242.85 205.48 240.155 205.483H55.7716C53.0769 205.48 50.4935 204.437 48.5882 202.582C46.6828 200.728 45.6111 198.213 45.6082 195.591V57.9081C45.6069 55.2814 46.6762 52.7615 48.5816 50.9012C50.4869 49.0408 53.0727 47.992 55.7716 47.9848H240.155ZM240.155 47.1914H55.7716C52.8557 47.1963 50.0612 48.3279 48.0025 50.3376C45.9437 52.3472 44.7893 55.0703 44.793 57.9081V195.591C44.7918 196.994 45.0749 198.384 45.6262 199.681C46.1775 200.978 46.9862 202.156 48.0058 203.149C49.0255 204.141 50.2363 204.928 51.5688 205.465C52.9013 206.002 54.3295 206.277 55.7716 206.276H240.155C241.597 206.277 243.025 206.002 244.358 205.465C245.69 204.928 246.901 204.141 247.921 203.149C248.941 202.156 249.749 200.978 250.3 199.681C250.852 198.384 251.135 196.994 251.134 195.591V57.9081C251.137 55.0703 249.983 52.3472 247.924 50.3376C245.865 48.3279 243.071 47.1963 240.155 47.1914Z"
         fill="#F8F4FF"
         stroke="#35008B"
-        stroke-width="4"
+        strokeWidth="4"
       />
       <path
         d="M45.1992 83.2523V57.9102C45.1981 55.1783 46.3105 52.5574 48.2923 50.6227C50.2741 48.6879 52.9635 47.5972 55.7706 47.5898H240.154C242.961 47.597 245.651 48.6877 247.633 50.6224C249.615 52.5572 250.727 55.1782 250.726 57.9102V83.253L45.1992 83.2523Z"
         fill="#F8F4FF"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M240.155 47.9848C242.854 47.992 245.44 49.0408 247.345 50.9012C249.25 52.7615 250.32 55.2814 250.318 57.9081V82.8539H45.6082V57.9081C45.6069 55.2814 46.6762 52.7615 48.5816 50.9012C50.4869 49.0408 53.0727 47.992 55.7716 47.9848H240.155ZM240.155 47.1914H55.7716C52.8557 47.1963 50.0612 48.3279 48.0025 50.3376C45.9437 52.3472 44.7893 55.0703 44.793 57.9081V83.6473H251.134V57.9081C251.137 55.0703 249.983 52.3472 247.924 50.3376C245.865 48.3279 243.071 47.1963 240.155 47.1914Z"
         fill="black"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M99.7566 70.8456C98.7911 70.8456 97.8473 70.567 97.0445 70.0449C96.2417 69.5229 95.6161 68.7809 95.2466 67.9128C94.8771 67.0447 94.7804 66.0894 94.9688 65.1678C95.1572 64.2462 95.6221 63.3997 96.3048 62.7353C96.9875 62.0708 97.8573 61.6184 98.8042 61.435C99.7511 61.2517 100.733 61.3458 101.625 61.7054C102.517 62.065 103.279 62.6739 103.815 63.4552C104.352 64.2365 104.638 65.155 104.638 66.0947C104.636 67.3542 104.121 68.5615 103.206 69.4521C102.291 70.3427 101.051 70.8438 99.7566 70.8456Z"
@@ -37,7 +37,7 @@ export const PlanCancelIllustration = () => {
         d="M99.7551 61.7348C100.64 61.7348 101.505 61.9902 102.241 62.4688C102.977 62.9474 103.551 63.6276 103.889 64.4234C104.228 65.2192 104.317 66.0949 104.144 66.9397C103.971 67.7846 103.545 68.5606 102.919 69.1697C102.294 69.7788 101.496 70.1936 100.628 70.3616C99.76 70.5297 98.8603 70.4434 98.0426 70.1138C97.2249 69.7841 96.526 69.2259 96.0342 68.5097C95.5425 67.7935 95.2801 66.9514 95.2801 66.0901C95.2815 64.9354 95.7535 63.8285 96.5924 63.012C97.4313 62.1956 98.5687 61.7362 99.7551 61.7348ZM99.7551 60.9414C98.7088 60.9414 97.6859 61.2434 96.816 61.8091C95.946 62.3749 95.2679 63.179 94.8675 64.1197C94.4671 65.0605 94.3624 66.0958 94.5665 67.0945C94.7706 68.0932 95.2745 69.0106 96.0143 69.7307C96.7542 70.4507 97.6968 70.9411 98.723 71.1398C99.7492 71.3384 100.813 71.2365 101.78 70.8468C102.746 70.4571 103.572 69.7972 104.154 68.9505C104.735 68.1038 105.045 67.1084 105.045 66.0901C105.045 64.7246 104.488 63.4151 103.496 62.4496C102.504 61.4841 101.158 60.9416 99.7551 60.9414Z"
         fill="black"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M83.698 70.8456C82.7325 70.8456 81.7887 70.567 80.9859 70.0449C80.1832 69.5229 79.5575 68.7809 79.188 67.9128C78.8185 67.0447 78.7219 66.0894 78.9102 65.1678C79.0986 64.2462 79.5635 63.3997 80.2462 62.7353C80.9289 62.0708 81.7987 61.6184 82.7456 61.435C83.6926 61.2517 84.6741 61.3458 85.5661 61.7054C86.458 62.065 87.2204 62.6739 87.7568 63.4552C88.2932 64.2365 88.5795 65.155 88.5795 66.0947C88.5777 67.3542 88.0628 68.5615 87.1477 69.4521C86.2326 70.3427 84.9921 70.8438 83.698 70.8456Z"
@@ -47,7 +47,7 @@ export const PlanCancelIllustration = () => {
         d="M83.6965 61.7348C84.5815 61.7348 85.4467 61.9902 86.1826 62.4688C86.9186 62.9474 87.4921 63.6276 87.8308 64.4234C88.1695 65.2192 88.2581 66.0949 88.0855 66.9397C87.9128 67.7846 87.4866 68.5606 86.8608 69.1697C86.2349 69.7788 85.4376 70.1936 84.5695 70.3616C83.7014 70.5297 82.8017 70.4434 81.984 70.1138C81.1663 69.7841 80.4674 69.2259 79.9756 68.5097C79.4839 67.7935 79.2215 66.9514 79.2215 66.0901C79.2229 64.9354 79.6949 63.8285 80.5338 63.012C81.3727 62.1956 82.5101 61.7362 83.6965 61.7348ZM83.6965 60.9414C82.6502 60.9414 81.6274 61.2434 80.7574 61.8091C79.8874 62.3749 79.2093 63.179 78.8089 64.1197C78.4085 65.0605 78.3038 66.0958 78.5079 67.0945C78.712 68.0932 79.2159 69.0106 79.9557 69.7307C80.6956 70.4507 81.6382 70.9411 82.6644 71.1398C83.6906 71.3384 84.7543 71.2365 85.7209 70.8468C86.6876 70.4571 87.5138 69.7972 88.0951 68.9505C88.6764 68.1038 88.9867 67.1084 88.9867 66.0901C88.9865 64.7246 88.4291 63.4151 87.437 62.4496C86.4449 61.4841 85.0995 60.9416 83.6965 60.9414Z"
         fill="black"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M67.6433 70.8456C66.6778 70.8456 65.734 70.567 64.9312 70.0449C64.1285 69.5229 63.5028 68.7809 63.1333 67.9128C62.7638 67.0447 62.6672 66.0894 62.8555 65.1678C63.0439 64.2462 63.5088 63.3997 64.1915 62.7353C64.8742 62.0708 65.744 61.6184 66.6909 61.435C67.6379 61.2517 68.6194 61.3458 69.5114 61.7054C70.4034 62.065 71.1658 62.6739 71.7021 63.4552C72.2385 64.2365 72.5248 65.155 72.5248 66.0947C72.523 67.3542 72.0081 68.5615 71.093 69.4521C70.178 70.3427 68.9374 70.8438 67.6433 70.8456Z"
@@ -57,42 +57,42 @@ export const PlanCancelIllustration = () => {
         d="M67.6418 61.7348C68.5268 61.7348 69.392 61.9902 70.128 62.4688C70.8639 62.9474 71.4374 63.6276 71.7761 64.4234C72.1148 65.2192 72.2035 66.0949 72.0308 66.9397C71.8581 67.7846 71.4319 68.5606 70.8061 69.1697C70.1802 69.7788 69.3829 70.1936 68.5148 70.3616C67.6467 70.5297 66.747 70.4434 65.9293 70.1138C65.1116 69.7841 64.4127 69.2259 63.921 68.5097C63.4292 67.7935 63.1668 66.9514 63.1668 66.0901C63.1683 64.9354 63.6402 63.8285 64.4791 63.012C65.318 62.1956 66.4554 61.7362 67.6418 61.7348ZM67.6418 60.9414C66.5955 60.9414 65.5727 61.2434 64.7027 61.8091C63.8327 62.3749 63.1547 63.179 62.7543 64.1197C62.3539 65.0605 62.2491 66.0958 62.4532 67.0945C62.6573 68.0932 63.1612 69.0106 63.901 69.7307C64.6409 70.4507 65.5835 70.9411 66.6097 71.1398C67.6359 71.3384 68.6996 71.2365 69.6663 70.8468C70.6329 70.4571 71.4591 69.7972 72.0404 68.9505C72.6217 68.1038 72.932 67.1084 72.932 66.0901C72.9318 64.7246 72.3744 63.4151 71.3823 62.4496C70.3903 61.4841 69.0448 60.9416 67.6418 60.9414Z"
         fill="black"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M223.054 72.5928L222.932 72.4523C216.075 64.5685 212.41 54.5199 212.626 44.1929C212.842 33.8659 216.924 23.9707 224.105 16.365C231.286 8.75926 241.073 3.96607 251.627 2.88522C262.182 1.80438 272.78 4.51022 281.43 10.4948C290.08 16.4793 296.189 25.331 298.608 35.3881C301.028 45.4452 299.593 56.0161 294.572 65.1162C289.551 74.2164 281.29 81.22 271.339 84.8122C261.388 88.4045 250.433 88.3383 240.528 84.6262L240.372 84.5686L219.499 93.3917L223.054 72.5928Z"
         fill="#F8F4FF"
         stroke="#35008B"
-        stroke-width="4"
+        strokeWidth="4"
       />
       <path
         d="M256.236 2.79341C262.59 2.79705 268.865 4.16171 274.616 6.79054C280.367 9.41937 285.453 13.2479 289.513 18.0045C293.573 22.7611 296.507 28.329 298.108 34.3133C299.709 40.2975 299.937 46.5514 298.776 52.6309C297.614 58.7105 295.092 64.4668 291.389 69.4912C287.685 74.5157 282.89 78.6852 277.345 81.7038C271.8 84.7224 265.64 86.5162 259.302 86.9578C252.965 87.3994 246.605 86.4779 240.674 84.2589L240.362 84.1422L240.056 84.2718L220.022 92.7427L223.425 72.8424L223.487 72.4793L223.242 72.199C217.891 66.0709 214.453 58.58 213.337 50.6113C212.22 42.6427 213.47 34.5295 216.94 27.2305C220.41 19.9314 225.954 13.7516 232.917 9.42122C239.881 5.09087 247.972 2.79101 256.236 2.79341ZM256.236 2C247.817 1.99858 239.574 4.34232 232.481 8.75434C225.387 13.1664 219.739 19.4623 216.205 26.8982C212.67 34.3342 211.396 42.5995 212.533 50.7175C213.671 58.8356 217.172 66.4672 222.623 72.7108L218.975 94.0492L240.384 84.9987C246.428 87.2638 252.91 88.206 259.369 87.7586C265.829 87.3111 272.109 85.4848 277.762 82.4094C283.415 79.3341 288.303 75.0851 292.078 69.9642C295.854 64.8434 298.425 58.9762 299.609 52.7794C300.792 46.5827 300.559 40.2083 298.926 34.109C297.294 28.0097 294.301 22.3351 290.161 17.4882C286.021 12.6412 280.835 8.74089 274.972 6.06411C269.109 3.38733 262.712 1.99978 256.236 2Z"
         fill="black"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M244.746 26.6296C247.86 24.5862 251.486 23.4059 255.237 23.215C258.987 23.0241 262.72 23.8299 266.036 25.5461C269.352 27.2622 272.125 29.824 274.059 32.957C275.993 36.09 277.015 39.6761 277.015 43.3311C277.015 44.8521 277.344 48.5626 277.015 49.9865"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
         stroke-miterlimit="10"
       />
       <path
         d="M268.273 59.7774C264.777 62.1799 260.602 63.4692 256.323 63.4678C252.043 63.4664 247.869 62.1745 244.375 59.7697C240.881 57.3649 238.239 53.9655 236.811 50.0391C235.383 46.1126 235.241 41.8522 236.403 37.8438"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
         stroke-miterlimit="10"
       />
       <path
         d="M269.488 42.5039L275.772 50.8784L284.104 43.8328"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
         stroke-miterlimit="10"
       />
       <path
         d="M228.371 43.1407L237.17 37.293L242.602 46.6441"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
         stroke-miterlimit="10"
       />
       <path
@@ -102,12 +102,12 @@ export const PlanCancelIllustration = () => {
       <path
         d="M25.5781 52.2147C26.5575 47.0665 29.0393 42.3017 32.727 38.4897C36.4148 34.6778 41.1524 31.98 46.3736 30.7188"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M25.5781 52.2147C26.5575 47.0665 29.0393 42.3017 32.727 38.4897C36.4148 34.6778 41.1524 31.98 46.3736 30.7188"
         stroke="#35008B"
-        stroke-width="4"
+        strokeWidth="4"
         stroke-miterlimit="10"
       />
       <path
@@ -117,23 +117,23 @@ export const PlanCancelIllustration = () => {
       <path
         d="M6.94922 49.2369C8.46875 40.8686 12.3607 33.08 18.186 26.7496C24.0114 20.4193 31.5383 15.7991 39.9179 13.4102"
         stroke="#35008B"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <path
         d="M6.94922 49.2369C8.46875 40.8686 12.3607 33.08 18.186 26.7496C24.0114 20.4193 31.5383 15.7991 39.9179 13.4102"
         stroke="#35008B"
-        stroke-width="4"
+        strokeWidth="4"
         stroke-miterlimit="10"
       />
       <path
         d="M185.07 120.217C186.097 120.217 187.101 120.513 187.954 121.069C188.808 121.624 189.473 122.413 189.866 123.336C190.259 124.259 190.361 125.274 190.161 126.254C189.961 127.234 189.467 128.134 188.741 128.841C188.015 129.547 187.09 130.028 186.083 130.223C185.076 130.418 184.033 130.318 183.084 129.936C182.136 129.554 181.325 128.906 180.755 128.075C180.184 127.245 179.88 126.268 179.88 125.269C179.882 123.93 180.429 122.646 181.402 121.699C182.375 120.752 183.694 120.219 185.07 120.217ZM185.07 119.297C183.857 119.297 182.67 119.647 181.661 120.303C180.652 120.96 179.865 121.893 179.401 122.984C178.936 124.075 178.815 125.276 179.052 126.435C179.288 127.593 179.873 128.657 180.731 129.493C181.589 130.328 182.683 130.897 183.873 131.127C185.064 131.358 186.298 131.239 187.419 130.787C188.54 130.335 189.499 129.57 190.173 128.588C190.847 127.605 191.207 126.451 191.207 125.269C191.207 124.485 191.048 123.708 190.74 122.984C190.432 122.259 189.98 121.601 189.41 121.046C188.84 120.492 188.163 120.052 187.419 119.752C186.674 119.451 185.876 119.297 185.07 119.297Z"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
       />
       <path
         d="M110.774 120.217C111.8 120.217 112.804 120.513 113.657 121.069C114.511 121.624 115.176 122.413 115.569 123.336C115.962 124.259 116.065 125.274 115.864 126.254C115.664 127.234 115.17 128.134 114.444 128.841C113.718 129.547 112.793 130.028 111.786 130.223C110.779 130.418 109.736 130.318 108.787 129.936C107.839 129.554 107.028 128.906 106.458 128.075C105.887 127.245 105.583 126.268 105.583 125.269C105.585 123.93 106.132 122.646 107.105 121.699C108.078 120.752 109.397 120.219 110.774 120.217ZM110.774 119.297C109.56 119.297 108.373 119.647 107.364 120.303C106.355 120.96 105.568 121.893 105.104 122.984C104.639 124.075 104.518 125.276 104.755 126.435C104.991 127.593 105.576 128.657 106.434 129.493C107.292 130.328 108.386 130.897 109.576 131.127C110.767 131.358 112.001 131.239 113.122 130.787C114.243 130.335 115.202 129.57 115.876 128.588C116.55 127.605 116.91 126.451 116.91 125.269C116.91 124.485 116.752 123.708 116.443 122.984C116.135 122.259 115.683 121.601 115.113 121.046C114.543 120.492 113.867 120.052 113.122 119.752C112.377 119.451 111.579 119.297 110.774 119.297Z"
         stroke="#35008B"
-        stroke-width="3"
+        strokeWidth="3"
       />
       <path
         d="M165.387 165.425C163.673 162.237 161.095 159.567 157.932 157.704C154.77 155.84 151.144 154.855 147.447 154.855C143.75 154.855 140.124 155.84 136.962 157.704C133.8 159.567 131.222 162.237 129.508 165.425"
@@ -142,7 +142,7 @@ export const PlanCancelIllustration = () => {
       <path
         d="M165.387 165.425C163.673 162.237 161.095 159.567 157.932 157.704C154.77 155.84 151.144 154.855 147.447 154.855C143.75 154.855 140.124 155.84 136.962 157.704C133.8 159.567 131.222 162.237 129.508 165.425"
         stroke="#35008B"
-        stroke-width="4"
+        strokeWidth="4"
       />
     </svg>
   );