Sharing Data screen with new layout implemented w/ a new component

3 years ago · cb0d8a3688
7 changed files with 109 additions and 90 deletions
--- a/src/app/assets/floodZonesAssets/floodZones-logo.svg
+++ b/src/app/assets/floodZonesAssets/floodZones-logo.svg
--- a/src/app/assets/pluviometer/pluviometer-logo.svg
+++ b/src/app/assets/pluviometer/pluviometer-logo.svg
--- a/src/app/assets/rain/rain-icon.svg
+++ b/src/app/assets/rain/rain-icon.svg
@ -1,46 +1 @@
 <svg width="93" height="106" viewBox="0 0 93 106" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="93" height="106" rx="6" fill="#006493"/>
 <path d="M35.2057 81.7598C35.1054 82.8216 34.7135 83.651 34.0299 84.248C33.3463 84.8405 32.4371 85.1367 31.3023 85.1367C30.5094 85.1367 29.8098 84.9499 29.2037 84.5762C28.6021 84.1979 28.1373 83.6624 27.8092 82.9697C27.4811 82.277 27.3102 81.4727 27.2965 80.5566V79.627C27.2965 78.6882 27.4628 77.861 27.7955 77.1455C28.1282 76.43 28.6044 75.8786 29.2242 75.4912C29.8486 75.1038 30.5686 74.9102 31.3844 74.9102C32.4827 74.9102 33.3668 75.2087 34.0367 75.8057C34.7066 76.4027 35.0963 77.2458 35.2057 78.335H33.483C33.401 77.6195 33.1913 77.1045 32.8541 76.79C32.5214 76.471 32.0315 76.3115 31.3844 76.3115C30.6324 76.3115 30.0536 76.5872 29.648 77.1387C29.247 77.6855 29.0419 78.4899 29.0328 79.5518V80.4336C29.0328 81.5091 29.2242 82.3294 29.607 82.8945C29.9944 83.4596 30.5595 83.7422 31.3023 83.7422C31.9814 83.7422 32.4918 83.5895 32.8336 83.2842C33.1754 82.9788 33.3919 82.4707 33.483 81.7598H35.2057ZM38.409 78.4102C38.9513 77.7812 39.6372 77.4668 40.4666 77.4668C42.0434 77.4668 42.8432 78.3669 42.866 80.167V85H41.2049V80.2285C41.2049 79.7181 41.0932 79.3581 40.8699 79.1484C40.6512 78.9342 40.3276 78.8271 39.8992 78.8271C39.2339 78.8271 38.7371 79.1234 38.409 79.7158V85H36.7479V74.5H38.409V78.4102ZM49.207 84.2754C48.7194 84.8496 48.0267 85.1367 47.1289 85.1367C46.3268 85.1367 45.7184 84.902 45.3037 84.4326C44.8936 83.9632 44.6885 83.2842 44.6885 82.3955V77.6035H46.3496V82.375C46.3496 83.3138 46.7393 83.7832 47.5186 83.7832C48.3252 83.7832 48.8698 83.4938 49.1523 82.915V77.6035H50.8135V85H49.248L49.207 84.2754ZM55.2883 82.8945L56.8537 77.6035H58.5695L56.0061 85H54.5637L51.9797 77.6035H53.7023L55.2883 82.8945ZM64.0971 85C64.0242 84.8587 63.9604 84.6286 63.9057 84.3096C63.377 84.861 62.7299 85.1367 61.9643 85.1367C61.2214 85.1367 60.6153 84.9248 60.1459 84.501C59.6765 84.0771 59.4418 83.5531 59.4418 82.9287C59.4418 82.1403 59.7335 81.5365 60.3168 81.1172C60.9047 80.6934 61.7432 80.4814 62.8324 80.4814H63.851V79.9961C63.851 79.6133 63.7439 79.3079 63.5297 79.0801C63.3155 78.8477 62.9896 78.7314 62.5521 78.7314C62.1739 78.7314 61.864 78.8271 61.6225 79.0186C61.3809 79.2054 61.2602 79.4447 61.2602 79.7363H59.599C59.599 79.3307 59.7335 78.9525 60.0023 78.6016C60.2712 78.2461 60.6358 77.9681 61.0961 77.7676C61.5609 77.5671 62.0782 77.4668 62.6479 77.4668C63.5137 77.4668 64.2042 77.6855 64.7191 78.123C65.2341 78.556 65.4984 79.1667 65.5121 79.9551V83.291C65.5121 83.9564 65.6055 84.4873 65.7924 84.8838V85H64.0971ZM62.2719 83.8037C62.6 83.8037 62.9076 83.724 63.1947 83.5645C63.4864 83.4049 63.7051 83.1908 63.851 82.9219V81.5273H62.9555C62.3402 81.5273 61.8777 81.6344 61.5678 81.8486C61.2579 82.0628 61.1029 82.3659 61.1029 82.7578C61.1029 83.0768 61.2077 83.332 61.4174 83.5234C61.6316 83.7103 61.9164 83.8037 62.2719 83.8037Z" fill="white"/>
 <mask id="path-3-outside-1" maskUnits="userSpaceOnUse" x="28.7733" y="45.0055" width="9" height="12" fill="black">
 <rect fill="white" x="28.7733" y="45.0055" width="9" height="12"/>
 <path d="M36.0525 46.0729C35.7338 45.9154 35.3475 46.0429 35.1875 46.3604L30.8412 55.0529C30.6825 55.3704 30.8112 55.7579 31.13 55.9179C31.2225 55.9641 31.3213 55.9868 31.4175 55.9868C31.655 55.9868 31.8825 55.8555 31.995 55.6305L36.3412 46.9367C36.5 46.6192 36.3713 46.2317 36.0525 46.073"/>
 </mask>
 <path d="M36.0525 46.0729C35.7338 45.9154 35.3475 46.0429 35.1875 46.3604L30.8412 55.0529C30.6825 55.3704 30.8112 55.7579 31.13 55.9179C31.2225 55.9641 31.3213 55.9868 31.4175 55.9868C31.655 55.9868 31.8825 55.8555 31.995 55.6305L36.3412 46.9367C36.5 46.6192 36.3713 46.2317 36.0525 46.073" fill="white"/>
 <path d="M35.1875 46.3604L34.2945 45.9104L34.2931 45.9132L35.1875 46.3604ZM30.8412 55.0529L31.7357 55.5001L30.8412 55.0529ZM31.13 55.9179L30.6814 56.8116L30.6832 56.8125L31.13 55.9179ZM31.995 55.6305L32.8894 56.0777L32.8894 56.0777L31.995 55.6305ZM36.3412 46.9367L35.4468 46.4895L35.4468 46.4895L36.3412 46.9367ZM36.4955 45.1764C35.6883 44.7776 34.7036 45.0985 34.2945 45.9104L36.0805 46.8104C35.9914 46.9873 35.7792 47.0533 35.6095 46.9695L36.4955 45.1764ZM34.2931 45.9132L29.9468 54.6057L31.7357 55.5001L36.0819 46.8076L34.2931 45.9132ZM29.9468 54.6057C29.5407 55.418 29.8709 56.4048 30.6814 56.8116L31.5786 55.0242C31.7516 55.111 31.8243 55.3229 31.7357 55.5001L29.9468 54.6057ZM30.6832 56.8125C30.9132 56.9274 31.1648 56.9868 31.4175 56.9868V54.9868C31.4777 54.9868 31.5318 55.0008 31.5768 55.0233L30.6832 56.8125ZM31.4175 56.9868C32.0195 56.9868 32.6012 56.654 32.8894 56.0777L31.1006 55.1833C31.1637 55.0569 31.2905 54.9868 31.4175 54.9868V56.9868ZM32.8894 56.0777L37.2357 47.3839L35.4468 46.4895L31.1005 55.1833L32.8894 56.0777ZM37.2357 47.3839C37.6413 46.5727 37.3128 45.5835 36.4983 45.1779L35.6067 46.9681C35.4297 46.88 35.3587 46.6657 35.4468 46.4895L37.2357 47.3839Z" fill="white" mask="url(#path-3-outside-1)"/>
 <mask id="path-5-outside-2" maskUnits="userSpaceOnUse" x="36.0224" y="45.0055" width="9" height="12" fill="black">
 <rect fill="white" x="36.0224" y="45.0055" width="9" height="12"/>
 <path d="M43.3016 46.0729C42.9829 45.9154 42.5966 46.0429 42.4366 46.3604L38.0904 55.0529C37.9316 55.3704 38.0604 55.7579 38.3791 55.9179C38.4716 55.9641 38.5691 55.9868 38.6666 55.9868C38.9029 55.9868 39.1304 55.8555 39.2441 55.6305L43.5891 46.9367C43.7491 46.6192 43.6204 46.2317 43.3016 46.073"/>
 </mask>
 <path d="M43.3016 46.0729C42.9829 45.9154 42.5966 46.0429 42.4366 46.3604L38.0904 55.0529C37.9316 55.3704 38.0604 55.7579 38.3791 55.9179C38.4716 55.9641 38.5691 55.9868 38.6666 55.9868C38.9029 55.9868 39.1304 55.8555 39.2441 55.6305L43.5891 46.9367C43.7491 46.6192 43.6204 46.2317 43.3016 46.073" fill="white"/>
 <path d="M42.4366 46.3604L41.5436 45.9104L41.5422 45.9132L42.4366 46.3604ZM38.0904 55.0529L38.9848 55.5001L38.9848 55.5001L38.0904 55.0529ZM38.3791 55.9179L37.9305 56.8116L37.9323 56.8125L38.3791 55.9179ZM39.2441 55.6305L40.1366 56.0817L40.1386 56.0775L39.2441 55.6305ZM43.5891 46.9367L42.6961 46.4867L42.6946 46.4896L43.5891 46.9367ZM43.7446 45.1764C42.9374 44.7776 41.9527 45.0985 41.5436 45.9104L43.3296 46.8104C43.2405 46.9873 43.0284 47.0533 42.8586 46.9695L43.7446 45.1764ZM41.5422 45.9132L37.196 54.6057L38.9848 55.5001L43.331 46.8076L41.5422 45.9132ZM37.196 54.6057C36.7899 55.4179 37.12 56.4048 37.9305 56.8116L38.8277 55.0242C39.0008 55.111 39.0734 55.3229 38.9848 55.5001L37.196 54.6057ZM37.9323 56.8125C38.1614 56.927 38.4117 56.9868 38.6666 56.9868V54.9868C38.7266 54.9868 38.7818 55.0012 38.8259 55.0233L37.9323 56.8125ZM38.6666 56.9868C39.2693 56.9868 39.8479 56.6528 40.1366 56.0817L38.3517 55.1793C38.4129 55.0582 38.5364 54.9868 38.6666 54.9868V56.9868ZM40.1386 56.0775L44.4836 47.3838L42.6946 46.4896L38.3496 55.1834L40.1386 56.0775ZM44.4822 47.3867C44.8917 46.5741 44.562 45.5835 43.7474 45.1778L42.8559 46.9682C42.6789 46.88 42.6066 46.6643 42.6961 46.4867L44.4822 47.3867Z" fill="white" mask="url(#path-5-outside-2)"/>
 <mask id="path-7-outside-3" maskUnits="userSpaceOnUse" x="43.2709" y="45.0055" width="9" height="12" fill="black">
 <rect fill="white" x="43.2709" y="45.0055" width="9" height="12"/>
 <path d="M50.5501 46.0729C50.2326 45.9154 49.8451 46.0429 49.6851 46.3604L45.3389 55.0529C45.1801 55.3704 45.3089 55.7579 45.6276 55.9179C45.7201 55.9641 45.8176 55.9868 45.9151 55.9868C46.1514 55.9868 46.3801 55.8555 46.4926 55.6305L50.8389 46.9367C50.9976 46.6192 50.8689 46.2317 50.5501 46.073"/>
 </mask>
 <path d="M50.5501 46.0729C50.2326 45.9154 49.8451 46.0429 49.6851 46.3604L45.3389 55.0529C45.1801 55.3704 45.3089 55.7579 45.6276 55.9179C45.7201 55.9641 45.8176 55.9868 45.9151 55.9868C46.1514 55.9868 46.3801 55.8555 46.4926 55.6305L50.8389 46.9367C50.9976 46.6192 50.8689 46.2317 50.5501 46.073" fill="white"/>
 <path d="M49.6851 46.3604L48.7921 45.9104L48.7907 45.9132L49.6851 46.3604ZM45.3389 55.0529L46.2333 55.5001H46.2333L45.3389 55.0529ZM45.6276 55.9179L45.179 56.8116L45.1808 56.8125L45.6276 55.9179ZM46.4926 55.6305L47.3871 56.0777L47.3871 56.0777L46.4926 55.6305ZM50.8389 46.9367L49.9445 46.4895L49.9444 46.4895L50.8389 46.9367ZM50.9945 45.1771C50.1876 44.7768 49.2011 45.0988 48.7921 45.9104L50.5782 46.8104C50.4892 46.987 50.2777 47.0541 50.1057 46.9688L50.9945 45.1771ZM48.7907 45.9132L44.4445 54.6057L46.2333 55.5001L50.5796 46.8076L48.7907 45.9132ZM44.4445 54.6057C44.0384 55.4179 44.3685 56.4048 45.179 56.8116L46.0762 55.0242C46.2493 55.111 46.3219 55.3229 46.2333 55.5001L44.4445 54.6057ZM45.1808 56.8125C45.4099 56.927 45.6602 56.9868 45.9151 56.9868V54.9868C45.9751 54.9868 46.0303 55.0012 46.0744 55.0233L45.1808 56.8125ZM45.9151 56.9868C46.5148 56.9868 47.0984 56.655 47.3871 56.0777L45.5982 55.1833C45.6619 55.056 45.788 54.9868 45.9151 54.9868V56.9868ZM47.3871 56.0777L51.7333 47.3839L49.9444 46.4895L45.5982 55.1833L47.3871 56.0777ZM51.7333 47.3839C52.139 46.5727 51.8104 45.5835 50.9959 45.1779L50.1043 46.9681C49.9274 46.88 49.8563 46.6657 49.9445 46.4895L51.7333 47.3839Z" fill="white" mask="url(#path-7-outside-3)"/>
 <mask id="path-9-outside-4" maskUnits="userSpaceOnUse" x="50.5189" y="45.0055" width="9" height="12" fill="black">
 <rect fill="white" x="50.5189" y="45.0055" width="9" height="12"/>
 <path d="M57.7986 46.0729C57.4799 45.9154 57.0936 46.0429 56.9336 46.3604L52.5874 55.0529C52.4274 55.3704 52.5574 55.7579 52.8761 55.9179C52.9686 55.9641 53.0661 55.9868 53.1636 55.9868C53.3999 55.9868 53.6274 55.8555 53.7411 55.6305L58.0861 46.9367C58.2461 46.6192 58.1174 46.2317 57.7986 46.073"/>
 </mask>
 <path d="M57.7986 46.0729C57.4799 45.9154 57.0936 46.0429 56.9336 46.3604L52.5874 55.0529C52.4274 55.3704 52.5574 55.7579 52.8761 55.9179C52.9686 55.9641 53.0661 55.9868 53.1636 55.9868C53.3999 55.9868 53.6274 55.8555 53.7411 55.6305L58.0861 46.9367C58.2461 46.6192 58.1174 46.2317 57.7986 46.073" fill="white"/>
 <path d="M56.9336 46.3604L56.0406 45.9104L56.0392 45.9132L56.9336 46.3604ZM52.5874 55.0529L53.4804 55.5029L53.4818 55.5001L52.5874 55.0529ZM52.8761 55.9179L52.4275 56.8116L52.4293 56.8125L52.8761 55.9179ZM53.7411 55.6305L54.6336 56.0817L54.6356 56.0775L53.7411 55.6305ZM58.0861 46.9367L57.1931 46.4867L57.1916 46.4896L58.0861 46.9367ZM58.2416 45.1764C57.4344 44.7775 56.4497 45.0985 56.0406 45.9104L57.8266 46.8104C57.7375 46.9873 57.5253 47.0533 57.3556 46.9695L58.2416 45.1764ZM56.0392 45.9132L51.6929 54.6057L53.4818 55.5001L57.828 46.8076L56.0392 45.9132ZM51.6943 54.6029C51.2828 55.4196 51.6201 56.4064 52.4275 56.8116L53.3247 55.0242C53.4946 55.1094 53.572 55.3212 53.4804 55.5029L51.6943 54.6029ZM52.4293 56.8125C52.6584 56.927 52.9087 56.9868 53.1636 56.9868V54.9868C53.2236 54.9868 53.2788 55.0012 53.3229 55.0233L52.4293 56.8125ZM53.1636 56.9868C53.7664 56.9868 54.3448 56.6527 54.6335 56.0817L52.8487 55.1793C52.9099 55.0583 53.0334 54.9868 53.1636 54.9868V56.9868ZM54.6356 56.0775L58.9806 47.3838L57.1916 46.4896L52.8466 55.1834L54.6356 56.0775ZM58.9791 47.3867C59.3886 46.5741 59.059 45.5835 58.2444 45.1778L57.3529 46.9682C57.1759 46.88 57.1036 46.6643 57.1931 46.4867L58.9791 47.3867Z" fill="white" mask="url(#path-9-outside-4)"/>
 <mask id="path-11-outside-5" maskUnits="userSpaceOnUse" x="57.7675" y="45.0055" width="9" height="12" fill="black">
 <rect fill="white" x="57.7675" y="45.0055" width="9" height="12"/>
 <path d="M65.0467 46.0729C64.7279 45.9154 64.3417 46.0429 64.1817 46.3604L59.8354 55.0529C59.6767 55.3704 59.8054 55.7579 60.1242 55.9179C60.2167 55.9641 60.3141 55.9868 60.4116 55.9868C60.6479 55.9868 60.8767 55.8555 60.9892 55.6305L65.3354 46.9367C65.4942 46.6192 65.3654 46.2317 65.0467 46.073"/>
 </mask>
 <path d="M65.0467 46.0729C64.7279 45.9154 64.3417 46.0429 64.1817 46.3604L59.8354 55.0529C59.6767 55.3704 59.8054 55.7579 60.1242 55.9179C60.2167 55.9641 60.3141 55.9868 60.4116 55.9868C60.6479 55.9868 60.8767 55.8555 60.9892 55.6305L65.3354 46.9367C65.4942 46.6192 65.3654 46.2317 65.0467 46.073" fill="white"/>
 <path d="M64.1817 46.3604L63.2886 45.9104L63.2872 45.9132L64.1817 46.3604ZM59.8354 55.0529L60.7298 55.5001L59.8354 55.0529ZM60.1242 55.9179L59.6756 56.8116L59.6773 56.8125L60.1242 55.9179ZM60.9892 55.6305L61.8836 56.0777L61.8836 56.0777L60.9892 55.6305ZM65.3354 46.9367L64.441 46.4895L64.441 46.4895L65.3354 46.9367ZM65.4896 45.1764C64.6824 44.7775 63.6978 45.0985 63.2886 45.9104L65.0747 46.8104C64.9856 46.9873 64.7734 47.0533 64.6037 46.9695L65.4896 45.1764ZM63.2872 45.9132L58.941 54.6057L60.7298 55.5001L65.0761 46.8076L63.2872 45.9132ZM58.941 54.6057C58.5348 55.418 58.8651 56.4048 59.6756 56.8116L60.5728 55.0242C60.7457 55.111 60.8185 55.3229 60.7298 55.5001L58.941 54.6057ZM59.6773 56.8125C59.9065 56.927 60.1567 56.9868 60.4116 56.9868V54.9868C60.4716 54.9868 60.5269 55.0013 60.571 55.0233L59.6773 56.8125ZM60.4116 56.9868C61.0113 56.9868 61.5949 56.655 61.8836 56.0777L60.0947 55.1833C60.1584 55.056 60.2845 54.9868 60.4116 54.9868V56.9868ZM61.8836 56.0777L66.2299 47.3839L64.441 46.4895L60.0947 55.1833L61.8836 56.0777ZM66.2298 47.3839C66.6355 46.5727 66.3069 45.5835 65.4925 45.1779L64.6008 46.9681C64.4239 46.88 64.3529 46.6657 64.441 46.4895L66.2298 47.3839Z" fill="white" mask="url(#path-11-outside-5)"/>
 <mask id="path-13-outside-6" maskUnits="userSpaceOnUse" x="31.1982" y="17.3457" width="40" height="27" fill="black">
 <rect fill="white" x="31.1982" y="17.3457" width="40" height="27"/>
 <path d="M38.7591 41.1682H60.9354C61.0829 41.1682 61.2366 41.1682 61.3804 41.1844V41.1682C65.0029 41.1682 67.9492 38.2219 67.9492 34.5981C67.9492 30.9769 65.0029 28.0294 61.3804 28.0294C60.8679 28.0294 60.3354 28.0969 59.7953 28.2294C59.6203 28.2744 59.4354 28.2419 59.2829 28.1419C59.1329 28.0419 59.0316 27.8832 59.0029 27.7044C58.2691 23.0294 54.3029 19.6357 49.5716 19.6357C44.3016 19.6357 40.0129 23.9244 40.0129 29.1957C40.0129 29.4557 40.0304 29.7107 40.0517 29.9644C40.0679 30.1557 39.9979 30.3457 39.8592 30.4794C39.7217 30.6144 39.5304 30.6782 39.3392 30.6594C39.1492 30.6381 38.9554 30.6257 38.7592 30.6257C35.8529 30.6257 33.4892 32.9907 33.4892 35.897C33.4892 38.8032 35.8529 41.1682 38.7592 41.1682L38.7591 41.1682ZM38.7242 29.3357C38.7232 29.2895 38.7232 29.2432 38.7232 29.1957C38.7232 23.2145 43.5907 18.3457 49.5719 18.3457C54.7169 18.3457 59.0644 21.8795 60.1532 26.842C60.5682 26.7732 60.9782 26.7395 61.3807 26.7395C65.7132 26.7395 69.2394 30.2645 69.2394 34.5982C69.2394 38.932 65.7132 42.457 61.377 42.457H55.5157H38.7594C35.1419 42.457 32.1982 39.5145 32.1982 35.897C32.1982 32.2907 35.1232 29.3544 38.7244 29.3357"/>
 </mask>
 <path d="M38.7591 41.1682H60.9354C61.0829 41.1682 61.2366 41.1682 61.3804 41.1844V41.1682C65.0029 41.1682 67.9492 38.2219 67.9492 34.5981C67.9492 30.9769 65.0029 28.0294 61.3804 28.0294C60.8679 28.0294 60.3354 28.0969 59.7953 28.2294C59.6203 28.2744 59.4354 28.2419 59.2829 28.1419C59.1329 28.0419 59.0316 27.8832 59.0029 27.7044C58.2691 23.0294 54.3029 19.6357 49.5716 19.6357C44.3016 19.6357 40.0129 23.9244 40.0129 29.1957C40.0129 29.4557 40.0304 29.7107 40.0517 29.9644C40.0679 30.1557 39.9979 30.3457 39.8592 30.4794C39.7217 30.6144 39.5304 30.6782 39.3392 30.6594C39.1492 30.6381 38.9554 30.6257 38.7592 30.6257C35.8529 30.6257 33.4892 32.9907 33.4892 35.897C33.4892 38.8032 35.8529 41.1682 38.7592 41.1682L38.7591 41.1682ZM38.7242 29.3357C38.7232 29.2895 38.7232 29.2432 38.7232 29.1957C38.7232 23.2145 43.5907 18.3457 49.5719 18.3457C54.7169 18.3457 59.0644 21.8795 60.1532 26.842C60.5682 26.7732 60.9782 26.7395 61.3807 26.7395C65.7132 26.7395 69.2394 30.2645 69.2394 34.5982C69.2394 38.932 65.7132 42.457 61.377 42.457H55.5157H38.7594C35.1419 42.457 32.1982 39.5145 32.1982 35.897C32.1982 32.2907 35.1232 29.3544 38.7244 29.3357" fill="white"/>
 <path d="M38.7591 41.1682V40.1682H36.3449L38.052 41.8753L38.7591 41.1682ZM61.3804 41.1844L61.2684 42.1781L62.3804 42.3034V41.1844H61.3804ZM61.3804 41.1682V40.1682H60.3804V41.1682H61.3804ZM59.7953 28.2294L59.557 27.2582L59.5463 27.2609L59.7953 28.2294ZM59.2829 28.1419L58.7282 28.974L58.7345 28.9782L59.2829 28.1419ZM59.0029 27.7044L58.015 27.8595L58.0156 27.8632L59.0029 27.7044ZM40.0517 29.9644L39.0552 30.0481L39.0552 30.0488L40.0517 29.9644ZM39.8592 30.4794L39.165 29.7596L39.1586 29.7659L39.8592 30.4794ZM39.3392 30.6594L39.2278 31.6533L39.2416 31.6547L39.3392 30.6594ZM38.7592 41.1682V42.1682H41.1734L39.4663 40.4611L38.7592 41.1682ZM60.1532 26.842L59.1764 27.0563L59.3799 27.9838L60.3167 27.8285L60.1532 26.842ZM38.7591 42.1682H60.9354V40.1682H38.7591V42.1682ZM60.9354 42.1682C61.0941 42.1682 61.1903 42.1693 61.2684 42.1781L61.4924 40.1907C61.2829 40.1671 61.0717 40.1682 60.9354 40.1682V42.1682ZM62.3804 41.1844V41.1682H60.3804V41.1844H62.3804ZM61.3804 42.1682C65.5553 42.1682 68.9492 38.7741 68.9492 34.5981H66.9492C66.9492 37.6697 64.4505 40.1682 61.3804 40.1682V42.1682ZM68.9492 34.5981C68.9492 30.4247 65.5553 27.0294 61.3804 27.0294V29.0294C64.4505 29.0294 66.9492 31.5291 66.9492 34.5981H68.9492ZM61.3804 27.0294C60.7805 27.0294 60.1679 27.1084 59.557 27.2582L60.0337 29.2006C60.5028 29.0855 60.9552 29.0294 61.3804 29.0294V27.0294ZM59.5463 27.2609C59.6524 27.2336 59.7559 27.2563 59.8313 27.3057L58.7345 28.9782C59.1149 29.2276 59.5883 29.3152 60.0444 29.1979L59.5463 27.2609ZM59.8376 27.3099C59.9218 27.366 59.9752 27.4526 59.9902 27.5456L58.0156 27.8632C58.088 28.3137 58.344 28.7178 58.7282 28.974L59.8376 27.3099ZM59.9908 27.5494C59.1807 22.3882 54.7956 18.6357 49.5716 18.6357V20.6357C53.8102 20.6357 57.3575 23.6706 58.015 27.8595L59.9908 27.5494ZM49.5716 18.6357C43.7493 18.6357 39.0129 23.3722 39.0129 29.1957H41.0129C41.0129 24.4766 44.854 20.6357 49.5716 20.6357V18.6357ZM39.0129 29.1957C39.0129 29.4983 39.0332 29.7865 39.0552 30.0481L41.0482 29.8808C41.0275 29.6348 41.0129 29.4131 41.0129 29.1957H39.0129ZM39.0552 30.0488C39.0464 29.9448 39.0837 29.838 39.165 29.7596L40.5533 31.1993C40.9121 30.8534 41.0893 30.3665 41.0481 29.88L39.0552 30.0488ZM39.1586 29.7659C39.2418 29.6842 39.3469 29.6554 39.4367 29.6642L39.2416 31.6547C39.714 31.701 40.2016 31.5447 40.5598 31.193L39.1586 29.7659ZM39.4506 29.6656C39.2286 29.6408 38.9974 29.6257 38.7592 29.6257V31.6257C38.9135 31.6257 39.0697 31.6355 39.2278 31.6532L39.4506 29.6656ZM38.7592 29.6257C35.3003 29.6257 32.4892 32.4387 32.4892 35.897H34.4892C34.4892 33.5427 36.4055 31.6257 38.7592 31.6257V29.6257ZM32.4892 35.897C32.4892 39.3552 35.3003 42.1682 38.7592 42.1682V40.1682C36.4055 40.1682 34.4892 38.2512 34.4892 35.897H32.4892ZM39.4663 40.4611L39.4662 40.461L38.052 41.8753L38.0521 41.8753L39.4663 40.4611ZM39.7239 29.3141C39.7232 29.2805 39.7232 29.245 39.7232 29.1957H37.7232C37.7232 29.2415 37.7231 29.2985 37.7244 29.3573L39.7239 29.3141ZM39.7232 29.1957C39.7232 23.7666 44.1431 19.3457 49.5719 19.3457V17.3457C43.0382 17.3457 37.7232 22.6624 37.7232 29.1957H39.7232ZM49.5719 19.3457C54.2457 19.3457 58.188 22.5511 59.1764 27.0563L61.13 26.6277C59.9409 21.2078 55.1881 17.3457 49.5719 17.3457V19.3457ZM60.3167 27.8285C60.6788 27.7685 61.0341 27.7395 61.3807 27.7395V25.7395C60.9223 25.7395 60.4576 25.7779 59.9896 25.8554L60.3167 27.8285ZM61.3807 27.7395C65.161 27.7395 68.2394 30.8169 68.2394 34.5982H70.2394C70.2394 29.7121 66.2653 25.7395 61.3807 25.7395V27.7395ZM68.2394 34.5982C68.2394 38.3793 65.1613 41.457 61.377 41.457V43.457C66.2651 43.457 70.2394 39.4846 70.2394 34.5982H68.2394ZM61.377 41.457H55.5157V43.457H61.377V41.457ZM55.5157 41.457H38.7594V43.457H55.5157V41.457ZM38.7594 41.457C35.694 41.457 33.1982 38.9619 33.1982 35.897H31.1982C31.1982 40.067 34.5899 43.457 38.7594 43.457V41.457ZM33.1982 35.897C33.1982 32.8413 35.6783 30.3516 38.7296 30.3357L38.7192 28.3357C34.568 28.3573 31.1982 31.7402 31.1982 35.897H33.1982Z" fill="white" mask="url(#path-13-outside-6)"/>
 <mask id="path-15-outside-7" maskUnits="userSpaceOnUse" x="22" y="13" width="29" height="27" fill="black">
 <rect fill="white" x="22" y="13" width="29" height="27"/>
 <path d="M30.86 22.3937C31.2625 22.3937 31.6725 22.4274 32.0862 22.495C33.1762 17.5325 37.5238 14 42.6675 14C44.9088 14 47.0575 14.6762 48.885 15.9587C49.1775 16.1625 49.2475 16.5637 49.0438 16.855C48.8388 17.1475 48.4375 17.2175 48.145 17.0137C46.5362 15.8862 44.6413 15.2888 42.6675 15.2888C37.9375 15.2888 33.97 18.6825 33.2362 23.3575C33.2087 23.5362 33.1075 23.695 32.9562 23.795C32.8062 23.895 32.6213 23.9262 32.445 23.8838C31.9063 23.7513 31.3737 23.6838 30.86 23.6838C27.2375 23.6838 24.2913 26.6313 24.2913 30.2526C24.2913 33.6313 26.8212 36.4401 30.1762 36.7863C30.5312 36.8225 30.7888 37.14 30.7525 37.4938C30.7175 37.8263 30.4375 38.0726 30.1112 38.0726C30.0887 38.0726 30.0663 38.0716 30.0438 38.0706C26.0288 37.6556 23 34.2956 23 30.2531C23 25.9193 26.5262 22.3943 30.86 22.3943"/>
 </mask>
 <path d="M30.86 22.3937C31.2625 22.3937 31.6725 22.4274 32.0862 22.495C33.1762 17.5325 37.5238 14 42.6675 14C44.9088 14 47.0575 14.6762 48.885 15.9587C49.1775 16.1625 49.2475 16.5637 49.0438 16.855C48.8388 17.1475 48.4375 17.2175 48.145 17.0137C46.5362 15.8862 44.6413 15.2888 42.6675 15.2888C37.9375 15.2888 33.97 18.6825 33.2362 23.3575C33.2087 23.5362 33.1075 23.695 32.9562 23.795C32.8062 23.895 32.6213 23.9262 32.445 23.8838C31.9063 23.7513 31.3737 23.6838 30.86 23.6838C27.2375 23.6838 24.2913 26.6313 24.2913 30.2526C24.2913 33.6313 26.8212 36.4401 30.1762 36.7863C30.5312 36.8225 30.7888 37.14 30.7525 37.4938C30.7175 37.8263 30.4375 38.0726 30.1112 38.0726C30.0887 38.0726 30.0663 38.0716 30.0438 38.0706C26.0288 37.6556 23 34.2956 23 30.2531C23 25.9193 26.5262 22.3943 30.86 22.3943" fill="white"/>
 <path d="M32.0862 22.495L31.9251 23.4819L32.8598 23.6345L33.063 22.7095L32.0862 22.495ZM48.885 15.9587L48.3106 16.7773L48.3134 16.7793L48.885 15.9587ZM49.0438 16.855L49.8627 17.4289L49.8632 17.4282L49.0438 16.855ZM48.145 17.0137L47.5711 17.8326L47.5734 17.8343L48.145 17.0137ZM33.2362 23.3575L32.2483 23.2024L32.2479 23.2054L33.2362 23.3575ZM32.9562 23.795L32.4047 22.9608L32.4015 22.9629L32.9562 23.795ZM32.445 23.8838L32.2062 24.8549L32.2109 24.856L32.445 23.8838ZM30.1762 36.7863L30.0736 37.781L30.0748 37.7812L30.1762 36.7863ZM30.7525 37.4938L31.747 37.5985L31.7473 37.5957L30.7525 37.4938ZM30.0438 38.0706L29.9409 39.0653L29.9701 39.0683L29.9994 39.0696L30.0438 38.0706ZM30.86 23.3937C31.2067 23.3937 31.5628 23.4228 31.9251 23.4819L32.2474 21.5081C31.7822 21.4321 31.3183 21.3937 30.86 21.3937V23.3937ZM33.063 22.7095C34.0525 18.2042 37.9949 15 42.6675 15V13C37.0526 13 32.2999 16.8608 31.1095 22.2805L33.063 22.7095ZM42.6675 15C44.7044 15 46.6523 15.6136 48.3106 16.7773L49.4594 15.1402C47.4627 13.7389 45.1132 13 42.6675 13V15ZM48.3134 16.7793C48.1499 16.6654 48.1127 16.4414 48.2244 16.2818L49.8632 17.4282C50.3824 16.686 50.2052 15.6596 49.4566 15.1382L48.3134 16.7793ZM48.2249 16.281C48.3377 16.1201 48.5589 16.0834 48.7166 16.1932L47.5734 17.8343C48.3161 18.3516 49.3399 18.1749 49.8627 17.4289L48.2249 16.281ZM48.7189 16.1948C46.9415 14.9491 44.846 14.2888 42.6675 14.2888V16.2888C44.4366 16.2888 46.131 16.8234 47.5711 17.8326L48.7189 16.1948ZM42.6675 14.2888C37.4449 14.2888 33.0584 18.0412 32.2483 23.2024L34.2241 23.5125C34.8816 19.3238 38.4301 16.2888 42.6675 16.2888V14.2888ZM32.2479 23.2054C32.2631 23.1064 32.3198 23.017 32.4047 22.9608L33.5078 24.6291C33.8952 24.373 34.1544 23.966 34.2246 23.5095L32.2479 23.2054ZM32.4015 22.9629C32.4895 22.9043 32.5916 22.8905 32.6792 22.9116L32.2109 24.856C32.6509 24.962 33.1229 24.8857 33.5109 24.627L32.4015 22.9629ZM32.6838 22.9127C32.0737 22.7627 31.4609 22.6838 30.86 22.6838V24.6838C31.2866 24.6838 31.7388 24.7399 32.2062 24.8549L32.6838 22.9127ZM30.86 22.6838C26.6851 22.6838 23.2913 26.0792 23.2913 30.2526H25.2913C25.2913 27.1835 27.7899 24.6838 30.86 24.6838V22.6838ZM23.2913 30.2526C23.2913 34.1425 26.2074 37.382 30.0736 37.781L30.2789 35.7916C27.4351 35.4981 25.2913 33.1202 25.2913 30.2526H23.2913ZM30.0748 37.7812C29.879 37.7612 29.7378 37.5865 29.7577 37.3918L31.7473 37.5957C31.8397 36.6935 31.1835 35.8838 30.2777 35.7915L30.0748 37.7812ZM29.758 37.3891C29.7771 37.208 29.9304 37.0726 30.1112 37.0726V39.0726C30.9446 39.0726 31.6579 38.4445 31.747 37.5985L29.758 37.3891ZM30.1112 37.0726C30.1147 37.0726 30.1153 37.0726 30.1111 37.0725C30.1091 37.0724 30.1064 37.0723 30.1025 37.0722C30.0984 37.072 30.0942 37.0718 30.0882 37.0715L29.9994 39.0696C30.0175 39.0704 30.0626 39.0726 30.1112 39.0726V37.0726ZM30.1466 37.0759C26.6421 36.7136 24 33.7839 24 30.2531H22C22 34.8072 25.4154 38.5975 29.9409 39.0653L30.1466 37.0759ZM24 30.2531C24 26.4718 27.0783 23.3943 30.86 23.3943V21.3943C25.9742 21.3943 22 25.3668 22 30.2531H24Z" fill="white" mask="url(#path-15-outside-7)"/>
 </svg>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="f817185d-370e-4e96-a1e6-422cebaa6c80" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="f31556a3-2e8c-4c6d-b9ee-ad9bb4bcd49d" data-name="Camada 1"><path d="M133.24,76a21.77,21.77,0,0,1-21.76,21.77H40.53A21.77,21.77,0,0,1,28.35,57.94a3.58,3.58,0,0,0,1.22-4.51,20.16,20.16,0,0,1-2-8.83,20.53,20.53,0,0,1,20.5-20.51,20.23,20.23,0,0,1,9.07,2.11A3.58,3.58,0,0,0,61,25.75,34.11,34.11,0,0,1,116.76,52.1v.13a3.58,3.58,0,0,0,2.33,3.35A21.87,21.87,0,0,1,133.24,76Z" fill="#3b7097" opacity="0.2"/><path d="M34.76,75.64a25.34,25.34,0,0,1,7.43-17.93,25.62,25.62,0,0,1,3.74-3.08A24.1,24.1,0,0,1,57.3,22.49c.47-.23.94-.44,1.43-.63A24.1,24.1,0,0,0,28,54.63,25.35,25.35,0,0,0,42.22,101H56.11l.06-.31A25.37,25.37,0,0,1,34.76,75.64Z" fill="#fff"/><path d="M140.4,76v0a28.91,28.91,0,0,1-28.92,28.9H40.53A28.92,28.92,0,0,1,20.08,55.53c.6-.6,1.24-1.18,1.9-1.74A27.67,27.67,0,0,1,48.07,16.94a27.26,27.26,0,0,1,10.14,1.92,41.26,41.26,0,0,1,65.64,31A29.07,29.07,0,0,1,140.4,76ZM126.87,91.37A21.61,21.61,0,0,0,133.24,76a21.87,21.87,0,0,0-14.15-20.4,3.58,3.58,0,0,1-2.33-3.35V52.1A34.11,34.11,0,0,0,61,25.75a3.58,3.58,0,0,1-3.86.45,20.23,20.23,0,0,0-9.07-2.11A20.53,20.53,0,0,0,27.57,44.6a20.16,20.16,0,0,0,2,8.83,3.58,3.58,0,0,1-1.22,4.51A21.77,21.77,0,0,0,40.53,97.75h71A21.62,21.62,0,0,0,126.87,91.37Z" fill="#3b7097"/><path d="M120.07,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63,0,0a3.58,3.58,0,0,1-5-5.08l3.62-3.63,0,0A3.58,3.58,0,0,1,120.07,113.05Z" fill="#3b7097"/><path d="M105.2,131a3.57,3.57,0,0,1-1,3.48l-3.62,3.62,0,0a3.58,3.58,0,1,1-5-5.08l3.62-3.62a3.58,3.58,0,0,1,6,1.58Z" fill="#3b7097"/><path d="M97.58,113.05a3.58,3.58,0,0,1,0,5.06L94,121.74a3.58,3.58,0,0,1-5.06-5.06l3.63-3.63A3.58,3.58,0,0,1,97.58,113.05Z" fill="#3b7097"/><path d="M81.77,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62a3.57,3.57,0,1,1-5-5.06l3.62-3.62A3.57,3.57,0,0,1,81.77,129.38Z" fill="#3b7097"/><path d="M75.12,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,75.12,113.05Z" fill="#3b7097"/><path d="M59.3,129.38a3.57,3.57,0,0,1,0,5.06l-3.62,3.62A3.58,3.58,0,0,1,50.62,133l3.62-3.62A3.57,3.57,0,0,1,59.3,129.38Z" fill="#3b7097"/><path d="M52.65,113.05a3.57,3.57,0,0,1,0,5.06L49,121.74l-.05,0a3.57,3.57,0,1,1-5-5.1l3.63-3.63A3.58,3.58,0,0,1,52.65,113.05Z" fill="#3b7097"/><path d="M36.84,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62A3.57,3.57,0,1,1,28.16,133l3.62-3.62A3.57,3.57,0,0,1,36.84,129.38Z" fill="#3b7097"/><path d="M30.19,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,30.19,113.05Z" fill="#3b7097"/></g></svg>
--- a/src/app/assets/river/river-logo.svg
+++ b/src/app/assets/river/river-logo.svg
--- a/src/app/components/SvgLabeledButton.js
+++ b/src/app/components/SvgLabeledButton.js
@ -0,0 +1,78 @@
 import React, { useEffect, useState } from "react";
 import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight } from "react-native";
 import colors from "../config/colors";
 import { scaleDimsFromWidth } from "../config/dimensions";
 import {Shadow} from "react-native-shadow-2";
 export default function SvgLabeledButton({
  SvgImage,
  label,
  onPress,
  style = {},
  width = 95,
  height = 95,
  isToggle = false,
  normalBgcolor = colors.white,
  toggledBgColor = colors.toggle,
 }) {
  const dims = scaleDimsFromWidth(width, height, 16);
  return (   
    <Shadow
      viewStyle={[{width: 125, height: 125}, style]}
        offset={[0, 4]}
        distance={4}
        radius={4}
        startColor="rgba(0, 0, 0, 0.25)"
        paintInside={true}
      >
    <TouchableHighlight onPress={onPress}>
      <View style={styles.container}>
        <View
          style={[
            styles.innerContainer,
            {
              backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
              borderColor: isToggle ? toggledBgColor : normalBgcolor,
            },
          ]}
        >
          <SvgImage {...dims} />
          <Text style={styles.label}>{label}</Text>
        </View>
      </View>
    </TouchableHighlight>
    </Shadow>
  );
 }
 const styles = StyleSheet.create({
  container: {
    overflow: "hidden",
    borderColor: colors.primary,
    backgroundColor: colors.primary,
    borderWidth: 6,
    borderRadius: 6,
    width: 125,
    height: 125,
  },
  innerContainer: {
    overflow: "hidden",
    flex: 1,
    borderWidth: 6,
    borderRadius: 6,
    alignItems: "center",
    justifyContent: "center",
  },
  label: {
    paddingTop: 5,
    textAlign: "center",
    color: colors.primary,
    backgroundColor: "transparent",
    fontSize: 14,
    fontWeight: "bold",
  },
 });
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@ -12,5 +12,6 @@ export default {
  lightestGray: "#F0F0F0",
  lightBlue: "#1976D2",
  gold: "#ffd700",
  toggle: "#e5eff4",
 };
--- a/src/app/screens/SharingDataScreen.js
+++ b/src/app/screens/SharingDataScreen.js
@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useState } from "react";
 import React, { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
 import { TouchableOpacity, ScrollView } from "react-native";
 import assets from "../config/assets";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 //1/3
 function SharingDataScreen({ navigation }) {
@ -18,43 +17,45 @@ function SharingDataScreen({ navigation }) {
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-around",
            justifyContent: "center",
            alignItems: "center",
            marginTop: 30,
          }}
        >
          <TouchableOpacity
            style={{ alignItems: "center" }}
          <SvgLabeledButton
            label={"ÁREA DE \nALAGAMENTO"}
            style={{  marginRight: 24, }}
            SvgImage={assets.floodZones.FloodZonesIcon}
            onPress={() => navigation.navigate("FloodSharingData")}
          >
            <assets.floodZones.FloodZonesIcon {...dims} />
          </TouchableOpacity>
          />
          <TouchableOpacity
            style={{ alignItems: "center" }}
          <SvgLabeledButton
            label={"CHUVA"}
            onPress={() => navigation.navigate("RainSharingData")}
          >
            <assets.rainLevel.RainIcon {...dims} />
          </TouchableOpacity>
            SvgImage={assets.rainLevel.RainIcon}
          />
        </View>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-around",
            marginTop: 30,
            justifyContent: "center",
            flex: 1,
            marginVertical: 24,
          }}
        >
          <TouchableOpacity
          <SvgLabeledButton
            style={{ marginRight: 24, }}
            label={"DIÁRIO DO\nPLUVIÔMETRO"}
            onPress={() => navigation.navigate("PluviometerSharingData")}
          >
            <assets.PluviometerIcon {...dims} />
          </TouchableOpacity>
            SvgImage={assets.PluviometerIcon}/>
          <TouchableOpacity
          <SvgLabeledButton
            label={"NÍVEL ÁGUA\nNO RIO"}
            onPress={() => navigation.navigate("RiverFloodData")}
          >
            <assets.riverLevel.RiverIcon {...dims} />
          </TouchableOpacity>
            SvgImage={assets.riverLevel.RiverIcon}/>
        </View>
      </ScrollView>
    </View>