upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-02-03 20:40:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

[MM-67081] [MM-62584] Updates to illustrations and loading screen (#34855)

Browse source 
* remove illustrations no longer used

* fix paths without fills

* fixes to illustrations

* svg fixes

* update preparing workspace illustrations and fix some styles

* remove unused

* updated ip filtering

* updated search hint image, remove old one

* update threads search hint

* remove unused wrench illustration

* update initial loading screen

* fix to invite illustration

* removed comments to disable the redirect

* change to use media queries for dark mode

* fixed issue with shortcut not being visible on light themes in search hint

* remove unneeded js for darkmode since we use css

* fix linter issue

* remove unused css

* updated snapshot

* update access problem illustration

* remove access denied svg and replace with access problem (since it's the same)

* remove access denied happy and replace with access problem svg

* Update access_problem_svg.tsx

* rename man_with_mailbox to email_inbox

* fixed colors of access_problem

* rename illustrations to have consistent _svg suffix
This commit is contained in:
Matthew Birtch 2026-01-13 13:41:26 -05:00 committed by GitHub
parent a18b80ba4c
commit 7ea7b3384f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
51 changed files with 5777 additions and 11542 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webapp/channels/src/components/access_problem/index.tsx
View file

@ -34,7 +34,10 @@ const AccessProblem = ({
return (
<div className='AccessProblem__body'>
<AccessProblemSVG/>
<AccessProblemSVG
width={320}
height={190}
/>
<div className='AccessProblem__title'>
{formatMessage({id: 'login.contact_admin.title', defaultMessage: 'Contact your workspace admin'})}
</div>

60
webapp/channels/src/components/admin_console/feature_discovery/features/images/auto_translate_svg.tsx
View file

@ -21,13 +21,13 @@ const AutoTranslationSVG = (props: SvgProps) => (
cx={89.0743}
cy={80.0743}
r={59.5743}
fill='white'
fill='var(--center-channel-bg)'
/>
<circle
cx={89.0743}
cy={80.0743}
r={60.3243}
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity={0.75}
strokeWidth={1.5}
/>
@ -35,147 +35,147 @@ const AutoTranslationSVG = (props: SvgProps) => (
cx={91}
cy={82}
r={57}
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.08}
/>
<path
d='M92.3795 39.1628C96.2331 40.3948 96.0752 37.9623 98.5073 40.7949C99.9077 42.4271 102.435 45.3967 105.435 46.1338C105.857 46.2391 106.794 45.3335 106.794 44.6174C106.794 43.9014 104.688 42.385 103.53 42.0691C102.371 41.7532 104.003 39.5208 102.414 38.8363C100.824 38.1519 99.0654 35.614 98.4336 33.6238C97.8019 31.6336 95.0012 33.3079 94.0431 32.9078C93.085 32.5076 91.9373 32.7498 90.8844 34.2662C89.8315 35.7825 91.3898 38.8469 92.3795 39.1628Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M113.249 94.8888C113.249 94.0569 105.626 89.9079 104.699 89.8553C103.183 89.7605 101.119 89.0023 99.7293 89.8553C99.1423 90.1886 98.644 90.6581 98.2763 91.2242C98.0131 91.7192 96.5286 90.803 95.96 91.1084C94.5912 91.835 93.8542 89.4657 94.2016 88.5601C95.1597 86.3382 91.7799 87.7387 91.4325 87.1279C91.8431 87.8545 91.3167 80.8098 90.1375 84.7797C89.2425 87.7914 85.7364 84.3479 86.1575 82.1576C86.8103 78.7774 91.9063 78.2825 93.0224 78.8827C93.5909 79.1881 95.6651 82.1893 95.9284 82.105C96.4969 81.926 95.5915 78.5668 95.4756 78.1246C95.0755 76.4818 98.2132 75.9343 98.4343 74.2178C98.6238 72.7647 99.6135 73.2701 100.54 72.5014C101.961 71.3747 100.845 69.2686 102.646 68.1945C103.267 67.826 105.594 67.5627 105.899 66.9098C106.205 66.2569 103.941 64.6879 105.899 64.2246C107.626 63.8034 109.384 64.551 109.858 62.0553C110.279 59.7913 107.752 59.2754 107.026 57.5168C106.794 56.9903 106.51 53.9576 105.436 54.5157C104.12 55.2107 103.33 56.885 102.214 54.8948C100.266 51.3039 95.444 49.756 97.7078 55.4002C98.866 58.3171 94.5491 67.1941 93.8858 58.991C93.6646 56.1373 85.1362 55.2844 88.0001 52.1253C90.864 48.9662 94.8755 48.8188 95.9495 43.9011C97.4446 37.0775 92.717 42.8481 90.3059 41.5634C86.705 39.5943 89.7584 40.6578 87.8948 43.2061C87.1893 44.1749 84.873 42.5954 83.8412 42.7533C82.8093 42.9113 80.4403 45.0068 79.7769 43.6905C78.5766 41.2791 70.1219 39.7943 67.8371 40.6473C63.0675 42.4374 61.4145 40.0155 56.6554 39.0783C55.0024 38.7518 46.8845 38.5202 47.4109 41.3318C47.7901 42.3623 48.2332 43.3681 48.7376 44.3434C49.2535 45.8913 46.9266 44.7014 46.3897 45.07C47.3376 45.9107 48.3287 46.7016 49.3588 47.4393C50.138 48.2396 46.3791 49.2084 46.0001 50.5352C45.2525 53.231 51.1698 52.4623 50.0853 55.7056C49.7484 56.6849 46.3686 58.296 46.0422 61.6131C45.979 62.2449 50.2538 57.5063 53.0124 58.454C55.4445 59.3385 55.234 52.7255 58.2768 52.7255C63.9204 52.7255 65.0154 58.2223 67.9846 61.9079C69.3744 63.6244 70.4904 64.3404 70.7431 66.5834C70.9958 68.8263 70.522 71.2167 71.2801 73.2069C72.0382 75.1971 73.4701 75.2393 74.4388 76.7767C75.597 78.5774 76.2498 80.3359 77.8186 81.9049C80.0928 84.19 83.9675 87.6861 87.5473 87.1701C88.2527 87.0648 90.9166 88.5811 91.5167 89.0339C92.3482 89.8154 93.058 90.717 93.6225 91.7086C94.2543 92.551 96.2548 92.0245 97.1287 92.4247C98.0026 92.8248 95.0966 98.7429 96.1495 100.259C97.2024 101.776 97.2971 103.892 99.0134 105.24C100.73 106.588 101.119 106.619 101.34 108.841C101.667 112.443 100.614 116.086 99.7504 119.445C99.2976 121.162 100.203 123.068 99.5293 124.711C98.6869 126.764 98.1184 128.533 98.8555 130.818C100.129 134.788 107.279 135.43 103.067 131.966C101.267 130.492 105.015 126.932 103.846 126.595C101.835 125.753 104.215 124.995 104.478 124.121C105.015 122.383 112.985 115.191 113.575 114.001C114.07 113.001 113.754 111.969 114.565 111.105C115.375 110.242 116.67 110.484 117.723 109.81C119.829 108.399 119.071 106.009 119.945 104.061C121.672 100.196 122.398 101.723 120.029 98.7007C119.134 97.6056 113.406 98.0057 113.249 94.8888Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M70.6054 36.4156C72.0584 37.9319 73.5008 35.6258 73.7641 36.4156C74.0273 37.2053 74.0483 38.7217 75.7751 38.8376C77.5018 38.9534 74.1642 40.0801 75.2802 40.554C76.3963 41.0279 78.7863 42.5442 79.6602 41.9124C80.5341 41.2806 81.5765 40.7962 81.9661 41.2701C82.3556 41.7439 84.7562 41.1963 84.0719 40.396C83.3875 39.5957 81.566 37.7108 81.6397 36.6262C81.7134 35.5416 83.7455 32.751 81.4818 32.9932C80.9356 33.0619 80.438 33.3417 80.0956 33.7727C79.7532 34.2038 79.5931 34.7518 79.6497 35.2994C79.6497 36.0997 77.5439 34.1094 77.1017 34.141C76.6595 34.1726 75.1855 31.7191 74.6274 31.7191C74.0694 31.7191 70.3316 30.5186 70.6475 31.7191C70.9633 32.9195 69.1524 34.8992 70.6054 36.4156Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M104.025 47.8094C102.898 47.1671 100.761 44.2291 99.8133 45.1769C98.8657 46.1246 100.055 48.336 100.866 49.2416C101.677 50.1472 105.015 52.2743 104.53 51.3476C104.046 50.421 106.236 49.0836 104.025 47.8094Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M72.806 27.5488C73.3851 27.4961 74.2906 29.5074 75.1435 29.7286C75.9963 29.9497 76.4175 30.9501 76.7333 31.1817C77.0492 31.4134 80.6185 30.0445 81.4608 29.7286C82.3032 29.4127 80.408 27.4435 79.7025 26.064C78.9971 24.6846 79.5445 28.3491 78.5443 27.7489C77.544 27.1486 77.6914 26.3273 76.4385 26.3273C75.1856 26.3273 76.0594 23.8316 74.5222 24.3581C72.985 24.8846 72.2269 27.6014 72.806 27.5488Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M85.6092 32.3296C84.5563 32.5402 84.7563 33.2246 84.1667 33.8143C83.8915 34.0957 83.7373 34.4737 83.7373 34.8674C83.7373 35.261 83.8915 35.639 84.1667 35.9204C84.7037 36.6048 85.546 37.8264 86.1882 36.6575C86.8305 35.4887 86.1882 34.5515 86.1882 33.7933C86.1882 33.0351 86.1251 32.2243 85.6092 32.3296Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M87.726 36.0461C87.9892 36.6779 88.4736 34.9299 89.5054 34.0243C90.5372 33.1187 89 30.8652 88.0419 32.013C87.3996 32.8028 87.4628 35.4038 87.726 36.0461Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M87.5367 36.8363C86.9892 37.6155 86.5469 39.7005 87.5367 39.869C87.7535 39.894 87.9729 39.8584 88.1707 39.7661C88.3685 39.6738 88.5367 39.5284 88.6568 39.3462C88.7768 39.1639 88.8439 38.9518 88.8507 38.7337C88.8574 38.5155 88.8034 38.2998 88.6948 38.1104C88.2315 37.3207 87.7683 36.5204 87.5367 36.8363Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M91.5479 23.3994C90.6003 23.8311 92.9377 24.6209 91.3373 25.0527C89.7369 25.4844 89.6948 26.8007 88.3155 25.6844C86.9362 24.5682 85.4306 26.0635 86.4729 26.7375C87.5153 27.4114 89.2631 29.0752 89.2104 29.9808C89.1578 30.8864 90.8635 31.3076 92.4534 31.2023C94.0433 31.097 95.9595 31.5709 96.0122 30.8864C96.0648 30.2019 96.2543 29.9071 96.0648 29.3911C95.7911 28.6435 95.1066 27.9063 93.4641 28.5487C91.8216 29.191 90.7477 28.8646 90.516 28.0643C90.2844 27.264 93.7379 25.7266 95.2646 26.7901C96.7913 27.8537 98.2443 26.211 97.1282 25.4633C96.0122 24.7157 96.7597 23.9259 97.5283 23.8206C98.0864 23.7469 98.5812 22.3358 99.0024 21.2407C96.6604 20.8618 94.2976 20.6262 91.9269 20.5352C91.9375 22.041 92.4955 22.9677 91.5479 23.3994Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M77.4286 22.0725C78.4815 22.5253 80.2294 22.0725 79.903 21.2617C78.9448 21.4302 77.9867 21.6092 77.0391 21.8093C77.1444 21.9287 77.2785 22.0193 77.4286 22.0725Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M78.081 22.9679C76.5859 22.1992 76.6702 24.0841 77.3545 24.8318C78.0389 25.5794 80.0184 23.9156 78.081 22.9679Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M87.1787 20.5355C87.6381 20.6185 88.0676 20.8207 88.4243 21.122C88.7809 21.4232 89.0522 21.8129 89.2108 22.252C89.4108 22.9259 91.0218 21.4622 91.0428 20.5039H89.5056C88.7265 20.4934 87.9579 20.5039 87.1787 20.5355Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M84.0189 22.7474C83.345 23.674 83.9241 24.7902 84.7243 23.8636C85.5245 22.9369 84.8822 20.5887 85.514 21.5996C86.1457 22.6105 87.325 24.2111 88.1146 24.2848C88.9043 24.3585 88.2199 23.3476 88.1146 22.5051C88.0094 21.6627 86.1247 20.8624 86.3353 20.5781C85.156 20.6413 83.9873 20.7361 82.8291 20.8624C83.6609 21.41 84.5348 22.084 84.0189 22.7474Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M87.5363 30.7302C88.4734 31.1093 87.5363 28.8242 87.5363 28.8242C86.5571 29.4034 86.6098 30.3406 87.5363 30.7302Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M84.1672 29.2868C84.3252 29.9292 85.3359 30.1398 85.8729 29.2868C86.4099 28.4339 85.8729 25.338 85.1148 26.3173C84.3567 27.2966 83.4828 26.8438 81.9561 26.3173C80.4294 25.7908 84.0198 28.6129 84.1672 29.2868Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M94.5484 83.5378C95.854 83.3799 96.6542 84.9699 98.1282 84.8962C99.6023 84.8225 101.834 87.0549 103.108 85.7281C104.161 84.6751 98.5599 83.78 96.7911 82.8218C95.0222 81.8635 93.2533 83.6958 94.5484 83.5378Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M101.055 23.6614C102.887 24.546 102.571 24.5144 101.455 25.3673C100.339 26.2203 100.739 28.0736 103.203 27.9473C105.667 27.8209 107.193 25.3673 108.309 28.8213C109.425 32.2752 108.625 36.045 110.057 37.1086C111.489 38.1721 110.299 38.8882 110.057 39.8781C109.815 40.8679 110.457 41.584 111.573 41.2681C112.689 40.9521 112.374 43.0266 111.573 43.9006C110.773 44.7746 109.826 46.4489 112.289 49.4817C114.753 52.5144 115.079 52.1037 115.869 53.1462C116.659 54.1887 117.312 52.7566 117.543 51.5561C117.775 50.3557 116.985 46.133 119.818 46.133C120.7 46.1235 121.555 45.8308 122.259 45.2981C122.962 44.7653 123.476 44.0208 123.724 43.174C124.04 42.458 126.272 42.5317 127.462 41.4997C128.651 40.4678 129.704 39.8043 129.736 36.2346C121.553 28.6393 111.379 23.5266 100.402 21.4922C100.139 22.3135 100.149 23.2402 101.055 23.6614Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity={0.16}
/>
<path
d='M142.451 38.2923C138.342 33.1335 133.362 28.4715 127.513 24.3033C122.837 21.2256 118.091 18.7411 113.278 16.8493C101.552 12.2416 89.4221 11.1511 76.9029 13.575M150.425 51.1571C152.788 56.2284 154.513 61.6648 155.598 67.468C156.902 74.488 157.146 81.3507 156.329 88.0551M101.705 146.163C87.0488 148.79 72.9854 146.894 59.5458 140.431C56.7297 139.077 53.9409 137.522 51.1799 135.766C43.8518 130.36 37.8926 124.268 33.2968 117.486M23.0099 92.2702C21.3844 83.519 21.4382 74.9345 23.1714 66.5165C24.9228 58.0096 28.3892 49.6728 33.5706 41.5062M146.678 44.2577C147.338 45.3128 147.967 46.3861 148.564 47.4775'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity={0.48}
strokeWidth={1.5}
/>
<path
d='M78.288 131.22L62 147.306V64.4189C62 62.7621 63.3431 61.4189 65 61.4189H143.677C145.334 61.4189 146.677 62.7621 146.677 64.4189V127.355C146.677 129.011 145.334 130.355 143.677 130.355H80.396C79.6069 130.355 78.8495 130.666 78.288 131.22Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity={0.08}
/>
<path
d='M83.1266 128.801L66.8386 144.887V62C66.8386 60.3431 68.1818 59 69.8386 59H148.516C150.173 59 151.516 60.3431 151.516 62V124.936C151.516 126.593 150.173 127.936 148.516 127.936H85.2346C84.4455 127.936 83.6881 128.247 83.1266 128.801Z'
fill='white'
fill='var(--center-channel-bg)'
/>
<path
d='M69.8386 59.75H148.516C149.759 59.7502 150.766 60.7575 150.766 62V124.936C150.766 126.178 149.759 127.185 148.516 127.186H85.2351C84.2487 127.186 83.3012 127.574 82.5994 128.268L67.5886 143.092V62C67.5886 60.7574 68.596 59.75 69.8386 59.75Z'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity={0.8}
strokeWidth={1.5}
/>
<path
d='M90.2258 80.0834H109.581M128.936 80.0834H121.677M109.581 80.0834V71.7012M109.581 80.0834H121.677M121.677 80.0834C121.677 80.0834 119.258 93.2554 110.79 100.44C102.323 107.625 92.6452 111.217 92.6452 111.217'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth={1.5}
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M125.71 111.218C125.71 111.218 118.25 106.456 111.193 100.503C104.137 94.5511 99.0967 86.2178 99.0967 86.2178'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth={1.5}
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M68.4217 77.8334L84.7097 93.9193V11.0322C84.7097 9.37537 83.3666 8.03223 81.7097 8.03223H3.0323C1.37544 8.03223 0.0322952 9.37537 0.0322952 11.0322V73.9679C0.0322952 75.6248 1.37543 76.9679 3.03229 76.9679H66.3137C67.1029 76.9679 67.8602 77.2789 68.4217 77.8334Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity={0.08}
/>
<path
d='M68.3895 70.1889L84.6775 86.2748V3.3877C84.6775 1.73084 83.3343 0.387695 81.6775 0.387695H3.00007C1.34322 0.387695 6.86646e-05 1.73084 6.86646e-05 3.38769V66.3234C6.86646e-05 67.9802 1.34321 69.3234 3.00006 69.3234H66.2815C67.0706 69.3234 67.828 69.6343 68.3895 70.1889Z'
fill='white'
fill='var(--center-channel-bg)'
/>
<path
d='M81.6775 1.1377H2.99976C1.75726 1.13786 0.749756 2.14516 0.749756 3.3877V66.3232C0.749756 67.5658 1.75726 68.5731 2.99976 68.5732H66.281C67.2675 68.5732 68.2149 68.9621 68.9167 69.6553L83.9275 84.4795V3.3877C83.9275 2.14505 82.9201 1.1377 81.6775 1.1377Z'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity={0.8}
strokeWidth={1.5}
/>
<path
d='M26.6128 51.1938L31.2344 40.3067M57.258 51.1938L52.477 40.3067M52.477 40.3067L41.6757 15.71L34.1442 33.4519L31.2344 40.3067M52.477 40.3067H31.2344'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth={1.5}
strokeLinecap='round'
strokeLinejoin='round'

132
webapp/channels/src/components/admin_console/feature_discovery/features/images/intune_mam_svg.tsx
View file

@ -18,7 +18,7 @@ const IntuneMAMSvg = (props: SvgProps) => (
>
<path
d='M18.03 4.94443L18.03 25.5L214.53 25.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeWidth='1.5'
strokeLinecap='round'
@ -29,12 +29,12 @@ const IntuneMAMSvg = (props: SvgProps) => (
rx='3'
ry='3'
transform='matrix(1 8.74228e-08 8.74228e-08 -1 15.03 6)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M278.655 55.8479L278.655 19.4004L242.882 19.4004'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeWidth='1.5'
strokeLinecap='round'
@ -44,118 +44,118 @@ const IntuneMAMSvg = (props: SvgProps) => (
cy='59.2227'
r='3.37477'
transform='rotate(180 278.655 59.2227)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M164.345 66.9186H230.528'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M174.202 75.3676H240.386'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M167.161 85.2247H233.345'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M179.835 102.123H210.814'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M158.711 58.6563H179.834'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M184.058 58.6563H215.038'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M219.262 58.6563H246.018'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M199.549 110.572H226.304'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M179.835 110.572H195.325'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M169.977 93.2667H200.957'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M205.181 93.2665H231.937'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M164.344 50.7246H199.549'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M205.181 50.7246H240.385'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M217.677 75.5825C219.143 75.5826 220.327 76.7619 220.327 78.2231V89.8784C220.327 99.8294 215.863 107.898 205.888 107.898H197.791C187.816 107.898 183.352 99.8294 183.352 89.8784V78.2231C183.352 76.7669 184.541 75.5826 186.002 75.5825H217.677ZM199.852 82.3871V91.5024L201.718 93.3676L199.852 95.2319V97.6948H204.955V87.5463L203.529 86.1205L204.955 84.6938V82.3871H199.852Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
d='M202.962 57.1323C210.145 57.1325 215.029 63.2033 215.029 70.6616V75.6411C215.029 77.5321 210.561 77.5346 210.561 75.6411V70.6616C210.561 65.5868 207.636 61.7212 203.619 61.7212H199.253C195.486 61.7214 192.311 65.5869 192.311 70.6616V75.6411C192.311 77.5357 187.852 77.5344 187.852 75.6411V70.6616C187.852 63.2032 192.736 57.1323 199.92 57.1323H202.962Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
d='M99.1957 12H200.804L207 151.5H93L99.1957 12Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
width='138'
height='7.5'
transform='matrix(1 0 0 -1 81 159)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<rect
@ -164,13 +164,13 @@ const IntuneMAMSvg = (props: SvgProps) => (
width='196.5'
height='129'
rx='6'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='6'
/>
<path
d='M40.53 159H108.03V61.53C108.03 57.3713 104.659 54 100.5 54H48.06C43.9013 54 40.53 57.3713 40.53 61.53V159Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -178,7 +178,7 @@ const IntuneMAMSvg = (props: SvgProps) => (
height='55.5'
rx='7.53'
transform='matrix(1 0 0 -1 219.03 135)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -187,133 +187,133 @@ const IntuneMAMSvg = (props: SvgProps) => (
width='49.9482'
height='94.0884'
rx='8.71189'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3.48476'
/>
<path
d='M229.5 84.875C229.5 81.3466 232.36 78.4862 235.889 78.4862H269.575C273.103 78.4862 275.963 81.3466 275.963 84.875V86.6173H229.5V84.875Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<path
d='M237 117H268.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M238.5 121.5H266.927'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M237 126L270 126'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M237 144L270 144'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M238.5 135L267.005 135'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M234 112.5H241.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M244.5 112.5H257.806'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M245.5 148.5H258.806'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M261 112.5H272.492'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M251.54 139.5H263.032'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M241.647 139.5H248.3'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M238.5 130.5H251.806'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M255 130.5H266.492'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M237 108H250.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M253.5 108H268.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M262.27 121.46C263.153 121.46 263.866 122.17 263.867 123.05V130.071C263.867 136.065 261.177 140.924 255.169 140.924H250.292C244.285 140.924 241.596 136.064 241.596 130.071V123.05C241.596 122.173 242.312 121.461 243.192 121.46H262.27ZM251.535 125.559V131.049L252.658 132.172L251.535 133.295V134.779H254.608V128.667L253.749 127.808L254.608 126.949V125.559H251.535Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
d='M253.407 110.348C257.734 110.348 260.675 114.004 260.675 118.496V121.495C260.675 122.634 257.984 122.636 257.984 121.495V118.496C257.984 115.44 256.222 113.111 253.803 113.111H251.174C248.905 113.111 246.992 115.44 246.992 118.496C246.992 118.496 246.992 120.354 246.992 121.495C246.992 122.637 244.307 122.636 244.307 121.495V118.496C244.307 114.004 247.249 110.348 251.575 110.348H253.407Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<circle
cx='150'
cy='67.5'
r='52.5'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity='0.04'
/>
<g clipPath='url(#clip0_3753_1225)'>
@ -376,124 +376,124 @@ const IntuneMAMSvg = (props: SvgProps) => (
height='97.5'
rx='5.63698'
transform='rotate(90 99.75 42.75)'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4.5'
/>
<path
d='M4.5 46.4559C4.5 45.6518 5.15182 45 5.95588 45H96.0441C96.8482 45 97.5 45.6518 97.5 46.4559V54H4.5V46.4559Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<path
d='M61.4471 101.888C62.3956 101.888 63.1618 102.651 63.162 103.596V111.138C63.162 117.577 60.2733 122.798 53.8192 122.798H48.58C42.1259 122.798 39.2372 117.577 39.2372 111.138V103.596C39.2374 102.654 40.0068 101.888 40.952 101.888H61.4471ZM49.9139 106.291V112.19L51.12 113.396L49.9139 114.602V116.197H53.2157V109.629L52.2928 108.707L53.2157 107.784V106.291H49.9139Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
d='M51.9254 89.9496C56.5733 89.9496 59.7339 93.8775 59.7339 98.7036V101.926C59.7334 103.149 56.8439 103.151 56.8433 101.926V98.7036C56.8433 95.4199 54.9506 92.9194 52.3511 92.9194H49.5259C47.0888 92.9194 45.0338 95.4199 45.0338 98.7036C45.0338 98.7036 45.0338 100.7 45.0338 101.926C45.0332 103.152 42.1496 103.151 42.149 101.926V98.7036C42.149 93.8775 45.3096 89.9496 49.9576 89.9496H51.9254Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
d='M23.9415 94.5H75.9138'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M26.4163 99H73.3185'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M23.9413 103.5L78.3885 103.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M23.9413 121.5L78.3885 121.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M26.4163 112.5L73.4468 112.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M18.9916 90H31.366'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M36.3157 90H58.27'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M38.2906 126H60.2448'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M63.5393 90H82.4998'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M47.9312 117H66.8917'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M31.6083 117H42.5854'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M26.4163 108H48.3705'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M53.6398 108H72.6003'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M23.9413 85.5H46.2152'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M51.165 85.5H75.9137'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeWidth='1.5'
strokeLinecap='round'

104
webapp/channels/src/components/admin_console/feature_discovery/features/images/mobile_security_svg.tsx
View file

@ -16,10 +16,10 @@ const MobileSecuritySVG = (props: SvgProps) => (
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_3922_6263)'>
<g>
<path
d='M7 28L12.5 33.5V72.5H177.5V101.5'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
@ -28,24 +28,24 @@ const MobileSecuritySVG = (props: SvgProps) => (
cy='60.5'
rx='59.5'
ry='59.5'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity='0.08'
/>
<path
d='M51 41L51 49.7097L143.46 49.7097L143.46 59L158 59'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<path
d='M131 100L131 85L116 85'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<path
d='M52.5 40.5C52.5 39.6716 51.8284 39 51 39C50.1716 39 49.5 39.6716 49.5 40.5C49.5 41.3284 50.1716 42 51 42C51.8284 42 52.5 41.3284 52.5 40.5Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<ellipse
@ -54,7 +54,7 @@ const MobileSecuritySVG = (props: SvgProps) => (
rx='1.5'
ry='1.5'
transform='rotate(180 131 101.5)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<ellipse
@ -63,94 +63,94 @@ const MobileSecuritySVG = (props: SvgProps) => (
rx='1.5'
ry='1.5'
transform='matrix(1 8.74228e-08 8.74228e-08 -1 157 70)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M97.8223 14.6328C111.365 27.158 124.258 31.6982 136.875 31.6982H136.927L136.978 31.709L137.103 31.7344L137.532 31.8252L137.498 32.2627C135.141 62.6049 129.208 89.9348 102.737 104.651L97.7256 107.438L97.4814 107.572L97.2383 107.437L92.0625 104.543C65.818 89.8755 59.9876 62.795 57.502 32.6943L57.4639 32.2324L57.9219 32.1592L59.8447 31.8545L59.8662 31.8516L59.8877 31.8496C68.6477 31.2264 75.1136 30.1683 80.8018 27.6602C86.4813 25.1558 91.4272 21.1874 97.1055 14.6719L97.4434 14.2832L97.8223 14.6328Z'
fill='white'
fill='var(--center-channel-bg)'
stroke='#3F4350'
/>
<path
d='M97.485 99L93.0951 96.6096C71.045 84.6062 66.1078 62.4456 64 37.5833L65.6312 37.3316C80.5165 36.3001 87.8039 33.8204 97.485 23C109.04 33.4089 120.074 37.207 130.894 37.207L131 37.2287C129.001 62.2886 123.977 84.6549 101.736 96.6989L97.485 99Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.12'
/>
<path
d='M72.5632 51.6124H116.686'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M79.1345 57.2451H123.257'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M74.4407 63.8165H118.563'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M82.8896 75.0818H103.543'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M68.8076 46.1042H82.8893'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M85.7056 46.1042H106.359'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M109.175 46.1042H127.012'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M96.0327 80.7149H113.869'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M82.8899 80.7149H93.2164'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M76.3184 69.1778H96.9714'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M99.7876 69.1777H117.624'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M72.563 40.8164H96.0324'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
<path
d='M99.7876 40.8164H123.257'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.12'
strokeLinecap='round'
/>
@ -158,13 +158,13 @@ const MobileSecuritySVG = (props: SvgProps) => (
fillRule='evenodd'
clipRule='evenodd'
d='M87.0013 57.3883H108.118C109.095 57.3883 109.885 58.1742 109.885 59.1484V66.9186C109.885 73.5528 106.909 78.9321 100.259 78.9321H94.8606C88.2109 78.9321 85.2349 73.5528 85.2349 66.9186V59.1484C85.2349 58.1775 86.0273 57.3883 87.0013 57.3883ZM97.1724 61.9248H96.2348V64.127V68.0017L97.478 69.2449L96.2348 70.4881V72.1297H99.6365V65.3642L98.6858 64.4136L99.6365 63.4629V61.9248H97.1724Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M103.374 54.1074V57.4273C103.374 57.4476 103.375 57.4675 103.376 57.4871H106.35C106.352 57.4675 106.352 57.4476 106.352 57.4273V54.1074C106.352 49.1351 103.096 45.0882 98.3075 45.0882H96.2798C91.4909 45.0882 88.2349 49.1351 88.2349 54.1074V57.4273C88.2349 57.4476 88.2356 57.4675 88.2371 57.4871H91.205C91.2066 57.4675 91.2073 57.4476 91.2073 57.4273V54.1074C91.2073 50.7242 93.3244 48.1476 95.8353 48.1476H98.7461C101.424 48.1476 103.374 50.7242 103.374 54.1074Z'
fill='#1C58D9'
fill='var(--button-bg)'
/>
</g>
<rect
@ -173,62 +173,62 @@ const MobileSecuritySVG = (props: SvgProps) => (
width='43'
height='81'
rx='7.5'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3'
/>
<path
d='M3 27.5C3 24.4624 5.46243 22 8.5 22H37.5C40.5376 22 43 24.4624 43 27.5V29H3V27.5Z'
fill='#1C58D9'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='12.831'
cy='64.831'
r='5.83099'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.56'
/>
<path
d='M9.69995 64.7411L12.0947 67.1786L16.2 63'
stroke='white'
stroke='var(--center-channel-bg)'
strokeWidth='0.5525'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M22.5488 63H32.915'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M8 74H34'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M8 82H28'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M22.5488 67H38.746'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M8 78H24'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M27 78L39 78'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
@ -238,7 +238,7 @@ const MobileSecuritySVG = (props: SvgProps) => (
width='16'
height='1'
rx='0.5'
fill='#3F4350'
fill='var(--center-channel-color)'
/>
<rect
opacity='0.16'
@ -255,66 +255,56 @@ const MobileSecuritySVG = (props: SvgProps) => (
width='45.8049'
height='78.0488'
rx='3.5'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
/>
<path
d='M171 87.9032H191'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M181 92.9032H191'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M175.317 38.8117H190.927'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M156.805 47.5922H190.902'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M156.805 53.4459H190.902'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M175.317 32.9581H184.717'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M186.958 32.9581H189.899'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M163.302 29.5986C163.895 29.7336 164.45 29.968 164.95 30.2832L166.259 29.3242L167.631 30.6973L166.661 32.0186C166.963 32.5137 167.185 33.0623 167.312 33.6465L168.956 33.8994V35.8408L167.27 36.0996C167.129 36.6524 166.901 37.1694 166.602 37.6377L167.631 39.04L166.258 40.4121L164.823 39.3604C164.365 39.6314 163.864 39.8356 163.332 39.96L163.058 41.7383H161.117L160.841 39.9453C160.317 39.8163 159.824 39.611 159.375 39.3398L157.913 40.4121L156.541 39.0391L157.601 37.5908C157.319 37.1376 157.103 36.6392 156.967 36.1084L155.217 35.8398V33.8984L156.926 33.6348C157.049 33.0737 157.26 32.5456 157.546 32.0664L156.542 30.6973L157.915 29.3242L159.252 30.3037C159.741 29.9902 160.284 29.7546 160.865 29.6143L161.114 28H163.055L163.302 29.5986ZM162.117 32.1963C160.688 32.1964 159.53 33.3545 159.53 34.7832C159.53 36.2117 160.688 37.37 162.117 37.3701C163.546 37.3701 164.704 36.2118 164.704 34.7832C164.704 33.3545 163.546 32.1963 162.117 32.1963Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.56'
/>
<defs>
<clipPath id='clip0_3922_6263'>
<rect
width='136'
height='119'
fill='white'
transform='translate(30 1)'
/>
</clipPath>
</defs>
</svg>
);

6
webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx
View file

@ -12,10 +12,10 @@ type NoFiltersPanelProps = {
const NoFiltersPanel = ({setShowAddModal}: NoFiltersPanelProps) => (
<div className='NoFilters'>
<div>
<div className='Illustration'>
<IPFilteringEarthSvg
width={149}
height={140}
width={132}
height={90}
/>
</div>
<div className='Title'>

21
webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss
View file

@ -117,7 +117,12 @@
justify-content: center;
padding: 32px 20px;
.Illustration {
margin: 16px 0;
}
.Title {
margin-bottom: 8px;
color: var(--center-channel-color, #3f4350);
font-family: Metropolis;
font-size: 20px;
@ -129,7 +134,7 @@
.Subtitle {
max-width: 320px;
margin-top: 8px;
margin-bottom: 8px;
color: var(--center-channel-color-72, rgba(63, 67, 80, 0.72));
font-family: Open Sans;
font-size: 14px;
@ -138,18 +143,8 @@
line-height: 20px;
text-align: center;
.Button {
display: inline;
height: 20px;
padding: 0;
background: none;
color: var(--link-color, #1c58d9);
font-family: Open Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-align: center;
.btn-primary {
margin-top: 16px;
&:hover {
cursor: pointer;

2
webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx
View file

@ -8,7 +8,7 @@ import type {ClientLicense} from '@mattermost/types/config';
import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us';
import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
import ExternalLink from 'components/external_link';
import {LicenseSkus, LicenseLinks} from 'utils/constants';

2
webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
View file

@ -19,7 +19,7 @@ import {isModalOpen} from 'selectors/views/modals';
import FileSvg from 'components/common/svg_images_components/file_svg';
import SuccessSvg from 'components/common/svg_images_components/success_svg';
import UploadLicenseSvg from 'components/common/svg_images_components/upload_license';
import UploadLicenseSvg from 'components/common/svg_images_components/upload_license_svg';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
import {FileTypes, ModalIdentifiers} from 'utils/constants';

2
webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx
View file

@ -5,7 +5,7 @@ import React, {memo} from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
const StarterRightPanel = () => {
const intl = useIntl();

2
webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
View file

@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
import ExternalLink from 'components/external_link';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';

2
webapp/channels/src/components/admin_console/system_users/system_users_export/upgrade_export_data_modal.tsx
View file

@ -5,7 +5,7 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
import ConfirmModalRedux from 'components/confirm_modal_redux';
import './upgrade_export_data_modal.scss';

345
webapp/channels/src/components/common/svg_images_components/access_denied_happy_svg.tsx
View file

File diff suppressed because one or more lines are too long

8690
webapp/channels/src/components/common/svg_images_components/access_denied_svg.tsx
View file

File diff suppressed because it is too large Load diff

495
webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx
View file

File diff suppressed because one or more lines are too long

45
webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.tsx
View file

@ -1,45 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
type SvgProps = {
width?: number;
height?: number;
}
const SvgComponent = (props: SvgProps) => (
<svg
width={props.width ? props.width.toString() : '376'}
height={props.height ? props.height.toString() : '376'}
fill='var(--center-channel-bg)'
viewBox='0 0 376 376'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M111.392 111.512C131.464 91.3174 156.743 80.9073 187.23 80.2812C217.425 80.9219 242.559 91.332 262.631 111.512C282.702 131.691 293.205 156.85 294.139 186.989C293.19 217.098 282.688 242.257 262.631 262.466C242.573 282.674 217.44 293.106 187.23 293.761C156.729 293.135 131.449 282.733 111.392 262.553C91.3347 242.373 80.8319 217.214 79.8838 187.076C80.8028 156.879 91.3055 131.691 111.392 111.512Z'
fill='white'
/>
<path
d='M187.23 303C154.248 302.068 126.788 290.726 104.849 268.974C82.9103 247.222 71.6272 219.894 71 186.989C71.6272 154.361 82.9103 127.105 104.849 105.222C126.788 83.3393 154.248 71.9318 187.23 71C219.919 71.9173 247.226 83.332 269.151 105.244C291.075 127.156 302.358 154.412 303 187.011C302.373 219.93 291.089 247.259 269.151 268.996C247.212 290.734 219.905 302.068 187.23 303ZM187.23 92.8613C160.462 93.7931 138.217 103.038 120.494 120.597C102.771 138.156 93.5881 160.287 92.9463 186.989C93.559 213.691 102.741 235.895 120.494 253.599C138.246 271.304 160.492 280.469 187.23 281.095C213.676 280.469 235.776 271.304 253.528 253.599C271.28 235.895 280.456 213.691 281.054 186.989C280.441 160.272 271.266 138.142 253.528 120.597C235.79 103.053 213.691 93.8003 187.23 92.8394V92.8613Z'
fill='#FFBC1F'
/>
<path
d='M187.23 256.875C167.318 256.234 150.828 249.478 137.758 236.608C124.688 223.737 117.839 207.197 117.212 186.989C117.212 167.421 123.674 151.114 136.598 138.068C149.522 125.023 166.246 118.034 186.77 117.103C206.682 117.408 223.253 124.164 236.483 137.37C249.714 150.575 256.482 167.115 256.788 186.989C256.482 206.862 249.714 223.322 236.483 236.368C223.375 249.355 205.699 256.715 187.23 256.875ZM188.171 140.864H187.23C173.533 141.475 162.33 146.054 153.621 154.601C149.314 158.826 145.962 163.921 143.788 169.544C141.615 175.168 140.67 181.19 141.018 187.207C140.975 193.273 142.152 199.286 144.478 204.891C146.804 210.495 150.233 215.577 154.562 219.835C159.924 225.214 166.529 229.196 173.795 231.429C181.061 233.662 188.766 234.078 196.231 232.641C203.696 231.204 210.693 227.958 216.605 223.187C222.518 218.417 227.165 212.27 230.138 205.285C233.112 198.301 234.319 190.695 233.655 183.136C232.991 175.576 230.476 168.296 226.33 161.935C222.185 155.573 216.537 150.327 209.883 146.656C203.228 142.986 195.773 141.004 188.171 140.886V140.864Z'
fill='#FFBC1F'
/>
<path
d='M173.467 173.645C177.124 170.192 181.967 168.268 187.001 168.268C192.034 168.268 196.877 170.192 200.534 173.645C203.988 177.206 205.919 181.967 205.919 186.923C205.919 191.88 203.988 196.641 200.534 200.202C196.877 203.655 192.034 205.579 187.001 205.579C181.967 205.579 177.124 203.655 173.467 200.202C170.028 196.634 168.107 191.875 168.107 186.923C168.107 181.972 170.028 177.213 173.467 173.645Z'
fill='#FFBC1F'
/>
<path
d='M188.957 189.763C188.279 190.439 187.36 190.819 186.402 190.819C185.443 190.819 184.524 190.439 183.847 189.763C183.169 189.088 182.788 188.171 182.788 187.215C182.788 186.26 183.169 185.343 183.847 184.667L198.243 170.334L202.875 175.43L188.957 189.763Z'
fill='#818698'
/>
<path
d='M303.913 104.565C305.464 113.239 290.77 119.745 259.831 124.081L214.836 174.498C213.85 175.531 212.662 176.35 211.345 176.906C210.028 177.462 208.611 177.742 207.181 177.729C204.225 177.733 201.388 176.571 199.287 174.498C198.192 173.549 197.314 172.376 196.714 171.059C196.114 169.742 195.805 168.312 195.808 166.865C195.841 163.861 196.997 160.977 199.048 158.777L249.632 114.367C253.982 83.5314 260.506 68.8004 269.205 70.1738C277.903 71.5471 278.672 82.3894 271.51 102.701C291.575 95.3133 302.376 95.9349 303.913 104.565Z'
fill='#1E325C'
/>
</svg>
);
export default SvgComponent;

17
webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx
View file

@ -27,18 +27,21 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.12'
/>
<path
fill='none'
d='M5.50196 18L5.50195 33L94.002 33'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<path
fill='none'
d='M3.00201 94L13.502 83.5L13.502 44.5L34.502 44.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<path
fill='none'
d='M21.502 70.5L21.502 56.5L95.5 56.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
@ -69,6 +72,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fill='var(--center-channel-bg)'
/>
<path
fill='none'
d='M42.2556 73.2081L29.502 85.8035V18C29.502 17.1716 30.1735 16.5 31.002 16.5H97.002C97.8304 16.5 98.502 17.1716 98.502 18V70.9868C98.502 71.8153 97.8304 72.4868 97.002 72.4868H44.0123C43.3546 72.4868 42.7235 72.746 42.2556 73.2081Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -81,36 +85,42 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.32'
/>
<path
fill='none'
d='M62.002 31H78.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M39.002 55H72.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M39.002 62H61.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M62.002 37H87.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M39.002 49H56.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M60.002 49H78.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
@ -128,6 +138,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
cy='17.8576'
r='17.1433'
transform='matrix(-1 0 0 1 123.717 0)'
fill='none'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeWidth='1.42861'
@ -139,6 +150,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
cy='17.8576'
r='17.1433'
transform='matrix(-1 0 0 1 123.717 0)'
fill='none'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeWidth='1.42861'
@ -146,6 +158,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
strokeLinejoin='round'
/>
<path
fill='none'
d='M93.002 19C93.002 25.6274 98.3745 31 105.002 31'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
@ -159,6 +172,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
x2='15.1722'
y2='-0.714303'
transform='matrix(0.707107 0.707107 0.707107 -0.707107 116.769 30.6265)'
fill='none'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeWidth='1.42861'
@ -166,17 +180,20 @@ export function ChannelSearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
strokeLinejoin='round'
/>
<path
fill='none'
d='M127.002 44.5V62H89.502'
stroke='var(--center-channel-color)'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
fill='none'
d='M86.002 62H76.002'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
fill='none'
d='M73.002 62H67.002'
stroke='var(--center-channel-color)'
strokeLinecap='round'

0
webapp/channels/src/components/common/svg_images_components/chat_illustration.tsx → webapp/channels/src/components/common/svg_images_components/chat_illustration_svg.tsx
View file

71
webapp/channels/src/components/common/svg_images_components/clipboard_svg.tsx
View file

@ -1,71 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
type SvgProps = {
width?: number;
height?: number;
}
const SvgComponent = (props: SvgProps) => (
<svg
width={props.width ? props.width.toString() : '376'}
height={props.height ? props.height.toString() : '376'}
fill='var(--center-channel-bg)'
viewBox='0 0 376 376'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M202.476 311.704C196.919 320.211 184.368 321.437 174.609 314.548L64.4168 236.943C60.821 234.517 58.3008 230.796 57.382 226.556C56.4631 222.317 57.2166 217.886 59.4852 214.189L156.422 66.1029C159.096 62.4615 162.932 59.841 167.297 58.674C171.661 57.5069 176.293 57.8631 180.428 59.6837L305.519 114.717C316.582 119.596 321.175 130.373 315.669 139.011L202.476 311.704Z'
fill='#FFBC1F'
/>
<path
d='M184.941 301.631L71.3571 223.974L171.268 71.3739L297.847 129.173L184.941 301.631Z'
fill='white'
/>
<path
d='M256.855 118.344C255.882 119.566 254.518 120.415 252.992 120.748C251.466 121.081 249.872 120.877 248.479 120.17L200.702 97.7292C200.083 97.5036 199.523 97.1424 199.062 96.672C198.602 96.2016 198.252 95.634 198.039 95.0108C197.827 94.3877 197.756 93.7248 197.833 93.0709C197.91 92.4169 198.132 91.7885 198.484 91.2317L205.973 79.7762C206.857 78.6043 208.118 77.7727 209.544 77.421C210.97 77.0694 212.473 77.2192 213.801 77.8452L262.204 99.347C262.876 99.5624 263.49 99.9263 264.002 100.412C264.514 100.897 264.909 101.491 265.16 102.15C265.411 102.81 265.51 103.517 265.45 104.22C265.39 104.922 265.172 105.603 264.813 106.21L256.855 118.344Z'
fill='#8D93A5'
/>
<path
d='M247.722 103.47L216.932 89.4834L224.525 77.8715C225.427 76.7219 226.686 75.9053 228.103 75.5509C229.521 75.1965 231.016 75.3245 232.353 75.9144L252.836 84.7865C253.501 84.9897 254.111 85.3412 254.62 85.8145C255.13 86.2878 255.525 86.8705 255.776 87.5188C256.027 88.1671 256.128 88.864 256.071 89.5569C256.014 90.2498 255.8 90.9206 255.445 91.5188L247.722 103.47Z'
fill='#2D3039'
/>
<path
d='M249.966 166.384L186.064 133.583L189.404 128.469L253.541 160.93L249.966 166.384Z'
fill='#3DB887'
/>
<path
d='M165.919 130.243C165.77 130.34 165.6 130.401 165.424 130.423C165.247 130.445 165.067 130.426 164.899 130.368C164.731 130.31 164.577 130.215 164.451 130.089C164.325 129.963 164.229 129.811 164.171 129.642L160.257 118.057C160.207 117.883 160.194 117.7 160.221 117.521C160.248 117.343 160.313 117.172 160.412 117.02C160.511 116.869 160.642 116.741 160.796 116.645C160.949 116.549 161.121 116.488 161.301 116.465L162.788 116.152C163.175 116.07 163.578 116.124 163.929 116.305C164.281 116.485 164.56 116.782 164.719 117.143L166.806 123.197C166.862 123.365 166.955 123.517 167.078 123.643C167.202 123.769 167.353 123.865 167.519 123.923C167.686 123.981 167.863 124 168.039 123.978C168.214 123.956 168.381 123.894 168.529 123.797L180.375 117.117C180.743 116.931 181.162 116.871 181.568 116.946C181.973 117.022 182.343 117.228 182.619 117.535L183.558 118.657C183.683 118.793 183.774 118.956 183.826 119.134C183.877 119.311 183.887 119.498 183.854 119.68C183.821 119.862 183.747 120.034 183.637 120.182C183.526 120.33 183.384 120.451 183.219 120.536L165.919 130.243Z'
fill='#3DB887'
/>
<path
d='M229.066 198.297L166.416 163.592L169.782 158.451L232.641 192.844L229.066 198.297Z'
fill='#BABEC9'
/>
<path
d='M154.413 164.792L135.939 154.406L146.585 138.097L165.294 148.17L154.413 164.792Z'
fill='#BABEC9'
/>
<path
d='M208.165 230.237L146.794 193.574L150.134 188.433L211.74 224.783L208.165 230.237Z'
fill='#BABEC9'
/>
<path
d='M134.948 194.54L116.839 183.554L127.511 167.245L145.855 177.917L134.948 194.54Z'
fill='#BABEC9'
/>
<path
d='M187.264 262.15L127.172 223.557L130.512 218.442L190.839 256.697L187.264 262.15Z'
fill='#BABEC9'
/>
<path
d='M115.481 224.261L97.738 212.701L108.436 196.418L126.388 207.639L115.481 224.261Z'
fill='#BABEC9'
/>
</svg>
);
export default SvgComponent;

120
webapp/channels/src/components/common/svg_images_components/company_svg.tsx
View file

@ -20,19 +20,19 @@ const CompanySvg = (props: SvgProps) => (
fillRule='evenodd'
clipRule='evenodd'
d='M133.188 130.941C149.323 117.33 159.572 96.962 159.572 74.2C159.572 33.2205 126.352 0 85.372 0C44.3925 0 11.172 33.2205 11.172 74.2C11.172 96.962 21.4213 117.33 37.5565 130.941H133.188Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.08'
/>
<path
d='M166.523 71.0823L166.523 60.2208L28.3461 60.2208L28.3461 48.0117L8.14688 48.0117'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='1.24706'
strokeLinecap='round'
/>
<path
d='M97.2708 24.9121L97.2708 44.9461L77.6077 44.9461'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='1.24706'
strokeLinecap='round'
@ -43,7 +43,7 @@ const CompanySvg = (props: SvgProps) => (
rx='1.855'
ry='1.855'
transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 168.475 69.8359)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<ellipse
@ -52,7 +52,7 @@ const CompanySvg = (props: SvgProps) => (
rx='1.855'
ry='1.855'
transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 99.1262 21.1992)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<ellipse
@ -61,20 +61,20 @@ const CompanySvg = (props: SvgProps) => (
rx='1.855'
ry='1.855'
transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 9.98633 46.1406)'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M23.7352 82.3047H44.9352V130.94H28.7234V130.941H16.2529V130.939H7.52344V94.7217H19.994V105.071H23.7352V82.3047ZM144.7 82.3047H123.5V130.94H144.7V130.94H152.182V130.939H162.159V108.174H152.182V95.7568H144.7V82.3047Z'
fill='white'
fill='var(--center-channel-bg)'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M23.7352 82.3047H44.9352V130.94H28.7234V130.941H16.2529V130.939H7.52344V94.7217H19.994V105.071H23.7352V82.3047ZM144.7 82.3047H123.5V130.94H144.7V130.94H152.182V130.939H162.159V108.174H152.182V95.7568H144.7V82.3047Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.24'
/>
<rect
@ -82,7 +82,7 @@ const CompanySvg = (props: SvgProps) => (
y='38.7563'
width='44.8941'
height='91.0353'
fill='white'
fill='var(--center-channel-bg)'
stroke='#3F4350'
strokeWidth='1.24706'
strokeLinejoin='round'
@ -92,7 +92,7 @@ const CompanySvg = (props: SvgProps) => (
y='39.2817'
width='44.8941'
height='88.5412'
fill='white'
fill='var(--center-channel-bg)'
stroke='#3F4350'
strokeWidth='1.24706'
strokeLinejoin='round'
@ -102,16 +102,16 @@ const CompanySvg = (props: SvgProps) => (
y='127.199'
width='89.7882'
height='3.74118'
fill='white'
fill='var(--center-channel-bg)'
/>
<rect
x='40.5706'
y='127.823'
width='88.5412'
height='2.49412'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
/>
<rect
@ -119,8 +119,8 @@ const CompanySvg = (props: SvgProps) => (
y='35.5415'
width='49.8824'
height='3.74118'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -129,9 +129,9 @@ const CompanySvg = (props: SvgProps) => (
y='35.5415'
width='49.8824'
height='3.74118'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -140,8 +140,8 @@ const CompanySvg = (props: SvgProps) => (
y='31.7993'
width='31.1765'
height='3.74118'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -150,9 +150,9 @@ const CompanySvg = (props: SvgProps) => (
y='31.7993'
width='31.1765'
height='3.74118'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -161,7 +161,7 @@ const CompanySvg = (props: SvgProps) => (
y='46.1406'
width='31.1765'
height='8.72941'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -169,7 +169,7 @@ const CompanySvg = (props: SvgProps) => (
y='59.8594'
width='31.1765'
height='8.72941'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -177,7 +177,7 @@ const CompanySvg = (props: SvgProps) => (
y='73.5762'
width='31.1765'
height='8.72941'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -185,7 +185,7 @@ const CompanySvg = (props: SvgProps) => (
y='53.623'
width='6.23529'
height='73.5765'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -193,7 +193,7 @@ const CompanySvg = (props: SvgProps) => (
y='87.2949'
width='31.1765'
height='8.72941'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -201,7 +201,7 @@ const CompanySvg = (props: SvgProps) => (
y='101.012'
width='31.1765'
height='8.72941'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -209,7 +209,7 @@ const CompanySvg = (props: SvgProps) => (
y='117.223'
width='11.2235'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -217,8 +217,8 @@ const CompanySvg = (props: SvgProps) => (
y='54.2466'
width='58.6118'
height='76.0706'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -227,7 +227,7 @@ const CompanySvg = (props: SvgProps) => (
y='54.2466'
width='58.6118'
height='76.0706'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -236,7 +236,7 @@ const CompanySvg = (props: SvgProps) => (
y='59.8594'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -244,7 +244,7 @@ const CompanySvg = (props: SvgProps) => (
y='59.8594'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -252,7 +252,7 @@ const CompanySvg = (props: SvgProps) => (
y='59.8594'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -260,7 +260,7 @@ const CompanySvg = (props: SvgProps) => (
y='59.8594'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -268,7 +268,7 @@ const CompanySvg = (props: SvgProps) => (
y='73.5762'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -276,7 +276,7 @@ const CompanySvg = (props: SvgProps) => (
y='73.5762'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -284,7 +284,7 @@ const CompanySvg = (props: SvgProps) => (
y='73.5762'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -292,7 +292,7 @@ const CompanySvg = (props: SvgProps) => (
y='73.5762'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -300,7 +300,7 @@ const CompanySvg = (props: SvgProps) => (
y='87.2949'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -308,7 +308,7 @@ const CompanySvg = (props: SvgProps) => (
y='87.2949'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -316,7 +316,7 @@ const CompanySvg = (props: SvgProps) => (
y='87.2949'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -324,7 +324,7 @@ const CompanySvg = (props: SvgProps) => (
y='87.2949'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -332,7 +332,7 @@ const CompanySvg = (props: SvgProps) => (
y='101.012'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -340,7 +340,7 @@ const CompanySvg = (props: SvgProps) => (
y='101.012'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -348,7 +348,7 @@ const CompanySvg = (props: SvgProps) => (
y='101.012'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -356,7 +356,7 @@ const CompanySvg = (props: SvgProps) => (
y='101.012'
width='8.72941'
height='9.97647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
@ -364,7 +364,7 @@ const CompanySvg = (props: SvgProps) => (
y='43.6465'
width='14.9647'
height='7.48235'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<line
@ -372,7 +372,7 @@ const CompanySvg = (props: SvgProps) => (
y1='130.318'
x2='162.159'
y2='130.318'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
/>
<rect
@ -380,7 +380,7 @@ const CompanySvg = (props: SvgProps) => (
y='50.5063'
width='66.0941'
height='3.74118'
fill='white'
fill='var(--center-channel-bg)'
stroke='#3F4350'
strokeWidth='1.24706'
strokeLinejoin='round'
@ -390,9 +390,9 @@ const CompanySvg = (props: SvgProps) => (
y='50.5063'
width='66.0941'
height='3.74118'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
strokeLinejoin='round'
/>
@ -401,9 +401,9 @@ const CompanySvg = (props: SvgProps) => (
y='115.352'
width='8.72941'
height='14.9647'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
/>
<rect
@ -411,16 +411,16 @@ const CompanySvg = (props: SvgProps) => (
y='127.199'
width='63.6'
height='3.74118'
fill='white'
fill='var(--center-channel-bg)'
/>
<rect
x='70.4998'
y='127.823'
width='62.353'
height='2.49412'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
/>
<rect
@ -428,16 +428,16 @@ const CompanySvg = (props: SvgProps) => (
y='124.705'
width='26.1882'
height='3.74118'
fill='white'
fill='var(--center-channel-bg)'
/>
<rect
x='89.2058'
y='125.329'
width='24.9412'
height='2.49412'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.16'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeWidth='1.24706'
/>
</svg>

9
webapp/channels/src/components/common/svg_images_components/man_with_mailbox_svg.tsx → webapp/channels/src/components/common/svg_images_components/email_inbox_svg.tsx
View file

@ -69,7 +69,7 @@ const Svg = (props: SvgProps) => (
/>
<path
d='M48.9995 65.9045L104.116 23.957C126.174 40.7447 158.777 65.9045 158.777 65.9045V143.552H48.9995V65.9045Z'
fill='white'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.5'
strokeLinejoin='round'
@ -102,7 +102,7 @@ const Svg = (props: SvgProps) => (
width='99.3525'
height='69.0075'
transform='rotate(90 138.396 38.9854)'
fill='white'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.5'
/>
@ -113,14 +113,14 @@ const Svg = (props: SvgProps) => (
/>
<path
d='M97.5586 74.75L102.456 79.175L111.809 69.5'
stroke='white'
stroke='var(--center-channel-bg)'
strokeWidth='1.785'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M104.107 106.908L156.994 66.7969V142.659H50.7866V66.7969L104.107 106.908Z'
fill='white'
fill='var(--center-channel-bg)'
/>
<path
d='M51.6797 67.689L104.108 106.959C125.09 91.2429 156.102 67.689 156.102 67.689'
@ -237,3 +237,4 @@ const Svg = (props: SvgProps) => (
);
export default Svg;

38
webapp/channels/src/components/common/svg_images_components/empty_billing_history_svg.tsx
View file

@ -10,8 +10,8 @@ type SvgProps = {
const EmptyBillingHistorySvg = (props: SvgProps) => (
<svg
width={props.width ? props.width.toString() : '519'}
height={props.height ? props.height.toString() : '396'}
width={props.width ? props.width.toString() : '152'}
height={props.height ? props.height.toString() : '116'}
viewBox='0 0 152 116'
fill='none'
xmlns='http://www.w3.org/2000/svg'
@ -46,7 +46,7 @@ const EmptyBillingHistorySvg = (props: SvgProps) => (
width='75.7575'
height='98.0391'
rx='3'
fill='white'
fill='var(--center-channel-bg)'
/>
<rect
x='35.25'
@ -60,63 +60,63 @@ const EmptyBillingHistorySvg = (props: SvgProps) => (
/>
<path
d='M43.5 10.5H56.4282'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 75H85.5168'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 51H85.5168'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 16.5H67.2018'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 87H98.445'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 63H98.445'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 39H98.445'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M43.5 22.5H53.1962'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
/>
<path
d='M57 22.5H66.6962'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeWidth='1.5'
strokeLinecap='round'
@ -124,28 +124,28 @@ const EmptyBillingHistorySvg = (props: SvgProps) => (
<path
opacity='0.32'
d='M93.211 114.582C84.2055 114.401 76.737 111.318 70.8056 105.332C64.8742 99.3451 61.7723 91.8887 61.5 82.9622C61.7677 74.0311 64.8696 66.5724 70.8056 60.586C76.7416 54.5996 84.2101 51.5162 93.211 51.3359C102.129 51.5208 109.554 54.6042 115.485 60.586C121.416 66.5678 124.518 74.0265 124.79 82.9622C124.514 91.8933 121.412 99.3497 115.485 105.332C109.558 111.313 102.134 114.397 93.211 114.582Z'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M94.4203 108.995C85.6017 108.816 78.3286 105.802 72.5478 99.9677C66.7635 94.1297 63.7313 86.8651 63.4598 78.1261C63.7268 69.3826 66.759 62.1159 72.5476 56.2781C78.3332 50.4434 85.6064 47.43 94.4202 47.2502C103.149 47.4345 110.379 50.4467 116.162 56.2781C121.946 62.1111 124.978 69.3777 125.25 78.1261C124.974 86.87 121.941 94.1345 116.162 99.9677C110.384 105.799 103.154 108.811 94.4203 108.995Z'
fill='white'
stroke='#3F4350'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.5'
/>
<path
d='M94.2074 102.138C87.3234 102.001 81.6143 99.6419 77.0802 95.0625C72.5461 90.4831 70.175 84.7792 69.9668 77.9508C70.1714 71.1188 72.5426 65.4132 77.0802 60.8338C81.6178 56.2544 87.3269 53.8957 94.2074 53.7578C101.024 53.8993 106.7 56.2579 111.234 60.8338C115.768 65.4096 118.139 71.1153 118.347 77.9508C118.136 84.7828 115.765 90.4867 111.234 95.0625C106.703 99.6384 101.028 101.997 94.2074 102.138Z'
fill='white'
fill='var(--center-channel-bg)'
/>
<path
d='M94.2072 101.388C87.5103 101.251 81.9967 98.9622 77.6132 94.5348C73.2261 90.1039 70.9245 84.5918 70.7171 77.9506C70.921 71.3061 73.2226 65.7924 77.613 61.3617C82.0002 56.9341 87.5139 54.6454 94.2072 54.508C100.835 54.6488 106.316 56.9362 110.701 61.3617C115.088 65.7887 117.39 71.3023 117.597 77.9506C117.386 84.5955 115.084 90.1076 110.701 94.5348C106.32 98.96 100.839 101.247 94.2072 101.388Z'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeWidth='1.5'
/>
<path
d='M94.1567 51.9434V77.948L105.647 89.4384'
stroke='#3F4350'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeWidth='1.5'
strokeLinejoin='round'
@ -154,7 +154,7 @@ const EmptyBillingHistorySvg = (props: SvgProps) => (
cx='94.1571'
cy='77.9464'
r='2.41903'
fill='#3F4350'
fill='var(--center-channel-color)'
fillOpacity='0.8'
/>
</svg>

201
webapp/channels/src/components/common/svg_images_components/empty_state_themeable_svg.tsx
View file

File diff suppressed because one or more lines are too long

167
webapp/channels/src/components/common/svg_images_components/ip_filtering_earth_svg.tsx
View file

@ -12,89 +12,170 @@ const IPFilteringEarthSvg = ({width, height}: SvgProps) => (
<svg
width={width}
height={height}
viewBox='0 0 140 140'
viewBox='0 0 132 90'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<ellipse
cx='69.5'
cy='120'
rx='29.5'
ry='3'
fill='black'
fillOpacity='0.06'
<rect
y='25'
width='132'
height='41'
rx='3.75'
fill='#3F4350'
fillOpacity='0.08'
/>
<circle
cx='6.5'
cy='14'
r='2'
transform='rotate(-90 6.5 14)'
fill='#3F4350'
fillOpacity='0.32'
/>
<circle
cx='6.5'
cy='8'
r='2'
transform='rotate(-90 6.5 8)'
fill='#3F4350'
fillOpacity='0.32'
/>
<circle
cx='6.50049'
cy='2'
r='2'
transform='rotate(-90 6.50049 2)'
fill='#3F4350'
fillOpacity='0.32'
/>
<path
d='M113.191 70.0004C113.19 78.1542 110.882 86.1411 106.533 93.0378C102.184 99.9345 95.9719 105.459 88.6152 108.974C81.2586 112.488 73.0577 113.848 64.9607 112.897C56.8636 111.945 49.2012 108.721 42.8592 103.598C36.5172 98.4739 31.7546 91.6597 29.1222 83.9427C26.4897 76.2257 26.0948 67.9212 27.9832 59.9892C29.8715 52.0572 33.9661 44.8217 39.7933 39.1192C45.6205 33.4168 52.9425 29.4802 60.9128 27.7647H62.1351L63.0116 27.3418C63.7189 27.2342 64.4339 27.1342 65.1489 27.0496L66.6865 27.0958L67.7397 26.8421H68.3548L70.0538 27.0804L71.1763 26.8267H71.8221L74.19 27.4264L76.9884 27.3495L77.9802 27.5187L88.2206 34.0467L99.3991 38.2987C103.764 42.3429 107.242 47.2479 109.616 52.7043C111.99 58.1607 113.208 64.0499 113.191 70.0004Z'
d='M6.5 18.5V58.5H29M31 58.5H35M37 58.5H39'
stroke='#3F4350'
strokeOpacity='0.32'
strokeLinecap='round'
strokeLinejoin='round'
/>
<circle
cx='66.7162'
cy='44.7162'
r='40.2162'
fill='white'
stroke='#3F4350'
/>
<circle
cx='68'
cy='46'
r='38'
fill='#1C58D9'
fillOpacity='0.08'
/>
<path
d='M72.0989 40.4363C74.9127 41.3359 74.7974 39.5598 76.5734 41.6281C77.5959 42.8199 79.441 44.9882 81.6321 45.5264C81.9396 45.6033 82.6238 44.9421 82.6238 44.4192C82.6238 43.8964 81.0863 42.7892 80.2406 42.5585C79.3949 42.3278 80.5865 40.6978 79.4256 40.198C78.2647 39.6982 76.9808 37.8451 76.5195 36.3919C76.0583 34.9387 74.0133 36.1612 73.3136 35.8691C72.614 35.5769 71.776 35.7537 71.0072 36.8609C70.2384 37.9682 71.3762 40.2057 72.0989 40.4363Z'
fill='#FFBC1F'
d='M68.9197 17.4431C71.4887 18.2645 71.3834 16.6428 73.0049 18.5313C73.9385 19.6194 75.6231 21.5991 77.6236 22.0905C77.9044 22.1607 78.5291 21.557 78.5291 21.0796C78.5291 20.6022 77.1252 19.5913 76.3531 19.3807C75.581 19.1701 76.6689 17.6818 75.609 17.2255C74.5491 16.7692 73.3769 15.0773 72.9558 13.7505C72.5346 12.4237 70.6675 13.5399 70.0287 13.2732C69.39 13.0064 68.6249 13.1679 67.9229 14.1788C67.221 15.1897 68.2598 17.2325 68.9197 17.4431Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M87.3369 81.1265C87.3369 80.5191 81.7708 77.4896 81.0942 77.4512C79.9871 77.382 78.4803 76.8284 77.4654 77.4512C77.0368 77.6945 76.6729 78.0374 76.4045 78.4508C76.2123 78.8122 75.1283 78.1432 74.7132 78.3662C73.7137 78.8967 73.1755 77.1667 73.4292 76.5055C74.1288 74.8831 71.661 75.9057 71.4073 75.4597C71.7071 75.9903 71.3227 70.8463 70.4616 73.7451C69.8082 75.9442 67.2481 73.4298 67.5556 71.8305C68.0322 69.3624 71.7532 69.001 72.5682 69.4393C72.9833 69.6622 74.4979 71.8536 74.6901 71.7921C75.1052 71.6614 74.4441 69.2086 74.3595 68.8856C74.0673 67.6862 76.3584 67.2863 76.5198 66.033C76.6582 64.9719 77.3809 65.341 78.0574 64.7797C79.0953 63.957 78.2804 62.4192 79.595 61.6349C80.0486 61.3658 81.7477 61.1736 81.9707 60.6968C82.1936 60.2201 80.5407 59.0745 81.9707 58.7361C83.2315 58.4286 84.5154 58.9745 84.8613 57.1522C85.1688 55.4991 83.3237 55.1223 82.7932 53.8382C82.6241 53.4538 82.4166 51.2394 81.6324 51.6469C80.6714 52.1543 80.0948 53.3769 79.2799 51.9237C77.8576 49.3017 74.3364 48.1714 75.9893 52.2927C76.835 54.4226 73.6829 60.9044 73.1986 54.9147C73.0371 52.831 66.8098 52.2082 68.901 49.9015C70.9921 47.5948 73.9213 47.4871 74.7055 43.8964C75.7972 38.9139 72.3452 43.1275 70.5846 42.1894C67.9553 40.7516 70.1849 41.5281 68.8241 43.3889C68.309 44.0963 66.6176 42.9429 65.8642 43.0583C65.1108 43.1736 63.3809 44.7037 62.8966 43.7426C62.0202 41.9818 55.8467 40.8976 54.1784 41.5205C50.6957 42.8276 49.4887 41.0591 46.0137 40.3748C44.8067 40.1364 38.8792 39.9673 39.2636 42.0202C39.5404 42.7727 39.864 43.5071 40.2323 44.2193C40.609 45.3496 38.9099 44.4807 38.5179 44.7498C39.21 45.3637 39.9337 45.9412 40.6859 46.4799C41.2548 47.0642 38.5102 47.7716 38.2334 48.7404C37.6875 50.7088 42.0082 50.1475 41.2164 52.5157C40.9703 53.2308 38.5025 54.4072 38.2641 56.8293C38.218 57.2906 41.3393 53.8306 43.3536 54.5226C45.1295 55.1685 44.9758 50.3398 47.1976 50.3398C51.3184 50.3398 52.118 54.3534 54.286 57.0446C55.3008 58.2979 56.1158 58.8207 56.3003 60.4585C56.4848 62.0963 56.1388 63.8416 56.6924 65.2949C57.2459 66.7481 58.2915 66.7789 58.9988 67.9014C59.8445 69.2163 60.3211 70.5003 61.4666 71.646C63.1272 73.3145 65.9564 75.8673 68.5704 75.4905C69.0855 75.4136 71.0306 76.5208 71.4688 76.8514C72.0759 77.4221 72.5941 78.0804 73.0064 78.8045C73.4677 79.4196 74.9284 79.0351 75.5665 79.3273C76.2046 79.6195 74.0827 83.9407 74.8515 85.0479C75.6203 86.1551 75.6895 87.7006 76.9427 88.6848C78.1958 89.669 78.4803 89.6921 78.6417 91.3145C78.8801 93.9441 78.1112 96.6045 77.4808 99.0573C77.1502 100.311 77.8114 101.702 77.3194 102.902C76.7043 104.401 76.2892 105.693 76.8274 107.361C77.7576 110.26 82.9778 110.729 79.9026 108.2C78.5879 107.123 81.3249 104.524 80.4715 104.278C79.0031 103.663 80.7405 103.109 80.9328 102.471C81.3248 101.203 87.1447 95.951 87.5752 95.0821C87.9366 94.3516 87.7059 93.5981 88.2979 92.9676C88.8899 92.3371 89.8355 92.514 90.6043 92.0219C92.1419 90.9915 91.5884 89.2461 92.2265 87.8237C93.4873 85.0018 94.0178 86.1167 92.288 83.91C91.6345 83.1103 87.4522 83.4025 87.3369 81.1265Z'
fill='#FFBC1F'
d='M82.832 54.5925C82.832 54.0379 77.75 51.272 77.1324 51.2369C76.1216 51.1737 74.7458 50.6682 73.8192 51.2369C73.4279 51.459 73.0956 51.772 72.8506 52.1495C72.6751 52.4794 71.6854 51.8687 71.3063 52.0723C70.3938 52.5567 69.9024 50.9771 70.1341 50.3734C70.7728 48.8921 68.5196 49.8258 68.288 49.4186C68.5618 49.903 68.2108 45.2065 67.4246 47.8531C66.828 49.8609 64.4906 47.5653 64.7714 46.1051C65.2066 43.8516 68.6039 43.5217 69.3479 43.9218C69.727 44.1254 71.1098 46.1262 71.2853 46.07C71.6643 45.9507 71.0606 43.7112 70.9834 43.4164C70.7167 42.3212 72.8085 41.9562 72.9559 40.8119C73.0822 39.8431 73.742 40.1801 74.3597 39.6676C75.3073 38.9164 74.5633 37.5124 75.7636 36.7963C76.1777 36.5506 77.729 36.3751 77.9326 35.9399C78.1361 35.5046 76.627 34.4586 77.9326 34.1497C79.0837 33.8689 80.2559 34.3673 80.5718 32.7036C80.8526 31.1942 79.1679 30.8502 78.6836 29.6779C78.5292 29.3269 78.3397 27.305 77.6237 27.6771C76.7463 28.1404 76.2199 29.2567 75.4758 27.9298C74.1772 25.536 70.9624 24.504 72.4715 28.2668C73.2436 30.2114 70.3657 36.1294 69.9235 30.6607C69.7761 28.7582 64.0905 28.1896 65.9997 26.0835C67.909 23.9775 70.5833 23.8792 71.2993 20.6008C72.2961 16.0517 69.1444 19.8987 67.5369 19.0423C65.1363 17.7295 67.1719 18.4385 65.9295 20.1374C65.4592 20.7833 63.915 19.7303 63.2271 19.8356C62.5392 19.9409 60.9598 21.3379 60.5176 20.4604C59.7174 18.8527 54.081 17.8629 52.5578 18.4315C49.378 19.625 48.276 18.0103 45.1033 17.3855C44.0012 17.1679 38.5893 17.0134 38.9403 18.8878C39.1931 19.5748 39.4885 20.2454 39.8247 20.8956C40.1687 21.9276 38.6174 21.1343 38.2595 21.38C38.8914 21.9405 39.5521 22.4677 40.2389 22.9595C40.7583 23.4931 38.2524 24.1389 37.9997 25.0235C37.5014 26.8206 41.4462 26.3082 40.7232 28.4704C40.4986 29.1233 38.2454 30.1974 38.0278 32.4087C37.9857 32.8299 40.8355 29.6709 42.6746 30.3027C44.296 30.8924 44.1557 26.4837 46.1842 26.4837C49.9466 26.4837 50.6766 30.1482 52.656 32.6053C53.5826 33.7496 54.3266 34.227 54.4951 35.7223C54.6636 37.2176 54.3477 38.8111 54.8531 40.1379C55.3585 41.4648 56.3131 41.4928 56.9589 42.5178C57.731 43.7182 58.1662 44.8906 59.2121 45.9366C60.7282 47.46 63.3113 49.7907 65.6979 49.4467C66.1682 49.3765 67.9441 50.3874 68.3442 50.6893C68.8985 51.2103 69.3717 51.8113 69.748 52.4724C70.1692 53.034 71.5029 52.683 72.0855 52.9498C72.6681 53.2165 70.7308 57.1619 71.4327 58.1728C72.1346 59.1837 72.1978 60.5948 73.3419 61.4934C74.4861 62.3919 74.7458 62.413 74.8932 63.8943C75.1108 66.2952 74.4089 68.7241 73.8333 70.9636C73.5314 72.1079 74.1351 73.3785 73.6858 74.4737C73.1243 75.8426 72.7453 77.022 73.2366 78.5454C74.086 81.192 78.8521 81.6202 76.0444 79.3106C74.8441 78.3278 77.3429 75.9549 76.5638 75.7303C75.2231 75.1687 76.8094 74.6632 76.9849 74.0806C77.3429 72.9222 82.6565 68.1274 83.0496 67.3342C83.3795 66.6672 83.1689 65.9793 83.7094 65.4036C84.2499 64.828 85.1133 64.9894 85.8152 64.5401C87.2191 63.5994 86.7137 62.0058 87.2963 60.7071C88.4474 58.1307 88.9318 59.1486 87.3525 57.1338C86.7558 56.4037 82.9373 56.6705 82.832 54.5925Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M56.2 38.4295C57.261 39.5367 58.3142 37.8528 58.5064 38.4295C58.6986 39.0062 58.714 40.1134 59.9748 40.198C61.2357 40.2826 58.7986 41.1053 59.6135 41.4513C60.4284 41.7973 62.1736 42.9045 62.8117 42.4432C63.4498 41.9818 64.2109 41.6282 64.4954 41.9742C64.7798 42.3202 66.5327 41.9203 66.033 41.336C65.5333 40.7516 64.2032 39.3753 64.2571 38.5833C64.3109 37.7913 65.7947 35.7537 64.1418 35.9306C63.743 35.9807 63.3796 36.185 63.1296 36.4998C62.8796 36.8145 62.7627 37.2146 62.804 37.6145C62.804 38.1989 61.2664 36.7456 60.9435 36.7687C60.6206 36.7918 59.5443 35.0002 59.1368 35.0002C58.7294 35.0002 56.0001 34.1237 56.2307 35.0002C56.4614 35.8768 55.1391 37.3223 56.2 38.4295Z'
fill='#FFBC1F'
d='M54.4039 15.6117C55.3726 16.6226 56.3342 15.0852 56.5097 15.6117C56.6852 16.1382 56.6992 17.1491 57.8504 17.2263C59.0015 17.3036 56.7764 18.0547 57.5205 18.3706C58.2645 18.6865 59.8579 19.6974 60.4405 19.2762C61.0231 18.855 61.718 18.5321 61.9777 18.848C62.2374 19.1639 63.8378 18.7989 63.3816 18.2653C62.9253 17.7318 61.711 16.4752 61.7601 15.7521C61.8092 15.029 63.164 13.1687 61.6549 13.3301C61.2907 13.3759 60.959 13.5624 60.7307 13.8498C60.5025 14.1371 60.3957 14.5025 60.4335 14.8675C60.4335 15.4011 59.0296 14.0743 58.7348 14.0953C58.44 14.1164 57.4573 12.4807 57.0853 12.4807C56.7133 12.4807 54.2214 11.6804 54.432 12.4807C54.6425 13.281 53.4352 14.6008 54.4039 15.6117Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M80.6022 46.749C79.7796 46.28 78.2189 44.1347 77.527 44.8268C76.8351 45.5188 77.7038 47.1335 78.2958 47.7947C78.8878 48.456 81.3248 50.0092 80.9712 49.3325C80.6175 48.6559 82.2167 47.6794 80.6022 46.749Z'
fill='#FFBC1F'
d='M76.6831 23.2076C75.932 22.7794 74.5071 20.8207 73.8754 21.4525C73.2436 22.0844 74.0368 23.5586 74.5773 24.1623C75.1178 24.7661 77.3429 26.1842 77.02 25.5664C76.6971 24.9486 78.1571 24.057 76.6831 23.2076Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M57.8068 31.9554C58.2297 31.9169 58.8909 33.3855 59.5136 33.547C60.1363 33.7085 60.4439 34.4389 60.6745 34.6081C60.9051 34.7772 63.5114 33.7777 64.1264 33.547C64.7415 33.3163 63.3576 31.8785 62.8425 30.8712C62.3274 29.864 62.7272 32.5397 61.9968 32.1015C61.2665 31.6632 61.3741 31.0634 60.4592 31.0634C59.5443 31.0634 60.1824 29.2412 59.06 29.6256C57.9375 30.0101 57.384 31.9938 57.8068 31.9554Z'
fill='#FFBC1F'
d='M55.8707 9.6992C56.2567 9.66409 56.8604 11.005 57.429 11.1524C57.9975 11.2998 58.2783 11.9667 58.4889 12.1211C58.6995 12.2756 61.079 11.363 61.6406 11.1524C62.2021 10.9418 60.9386 9.62899 60.4683 8.70935C59.9981 7.7897 60.363 10.2327 59.6962 9.83258C59.0294 9.43243 59.1276 8.88485 58.2923 8.88485C57.457 8.88485 58.0396 7.22107 57.0148 7.57208C55.99 7.92309 55.4846 9.7343 55.8707 9.6992Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M67.1554 35.4462C66.3866 35.5999 66.5326 36.0997 66.1021 36.5303C65.9011 36.7358 65.7886 37.0118 65.7886 37.2992C65.7886 37.5866 65.9011 37.8626 66.1021 38.0681C66.4942 38.5679 67.1092 39.4598 67.5782 38.6063C68.0472 37.7529 67.5782 37.0685 67.5782 36.5149C67.5782 35.9613 67.5321 35.3693 67.1554 35.4462Z'
fill='#FFBC1F'
d='M64.4061 12.887C63.7042 13.0274 63.8376 13.4837 63.4445 13.8769C63.261 14.0645 63.1582 14.3165 63.1582 14.5789C63.1582 14.8413 63.261 15.0933 63.4445 15.2809C63.8025 15.7372 64.364 16.5516 64.7922 15.7723C65.2203 14.9931 64.7922 14.3683 64.7922 13.8628C64.7922 13.3574 64.7501 12.8168 64.4061 12.887Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M68.7011 38.1604C68.8933 38.6218 69.2469 37.3454 70.0003 36.6841C70.7538 36.0229 69.6313 34.3774 68.9317 35.2155C68.4627 35.7922 68.5089 37.6914 68.7011 38.1604Z'
fill='#FFBC1F'
d='M65.8175 15.3641C65.993 15.7853 66.3159 14.6199 67.0038 14.0162C67.6917 13.4125 66.6668 11.9101 66.0281 12.6753C65.5999 13.2019 65.642 14.9359 65.8175 15.3641Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M68.5626 38.737C68.1628 39.306 67.8399 40.8284 68.5626 40.9514C68.7209 40.9697 68.8811 40.9437 69.0256 40.8763C69.17 40.8089 69.2928 40.7028 69.3805 40.5697C69.4681 40.4366 69.5172 40.2818 69.5221 40.1225C69.527 39.9632 69.4876 39.8056 69.4083 39.6674C69.07 39.0907 68.7317 38.5063 68.5626 38.737Z'
fill='#FFBC1F'
d='M65.6908 15.8909C65.3258 16.4103 65.031 17.8003 65.6908 17.9126C65.8353 17.9293 65.9816 17.9056 66.1135 17.8441C66.2453 17.7825 66.3575 17.6856 66.4375 17.5641C66.5176 17.4426 66.5623 17.3012 66.5668 17.1558C66.5713 17.0103 66.5353 16.8665 66.4629 16.7403C66.154 16.2138 65.8452 15.6802 65.6908 15.8909Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M71.4916 28.9256C70.7996 29.2409 72.5064 29.8176 71.3378 30.1328C70.1692 30.4481 70.1385 31.4092 69.1313 30.5941C68.1242 29.7791 67.0248 30.8709 67.7859 31.363C68.547 31.8551 69.8232 33.07 69.7848 33.7313C69.7464 34.3925 70.9918 34.7001 72.1527 34.6232C73.3136 34.5463 74.7129 34.8923 74.7513 34.3925C74.7897 33.8927 74.9281 33.6775 74.7897 33.3007C74.5898 32.7548 74.0901 32.2165 72.8908 32.6856C71.6914 33.1546 70.9072 32.9162 70.7381 32.3319C70.569 31.7475 73.0907 30.6249 74.2054 31.4015C75.3202 32.1781 76.3812 30.9786 75.5662 30.4327C74.7513 29.8868 75.2971 29.3101 75.8584 29.2332C76.2658 29.1794 76.6271 28.149 76.9347 27.3494C75.2246 27.0728 73.4993 26.9007 71.7683 26.8342C71.776 27.9338 72.1835 28.6104 71.4916 28.9256Z'
fill='#FFBC1F'
d='M68.3649 6.93293C67.7332 7.22076 69.2915 7.74728 68.2246 8.0351C67.1576 8.32293 67.1295 9.20044 66.21 8.4563C65.2905 7.71216 64.2867 8.70903 64.9816 9.15832C65.6765 9.60761 66.8417 10.7168 66.8066 11.3205C66.7715 11.9243 67.9087 12.2051 68.9686 12.1349C70.0285 12.0647 71.306 12.3806 71.3411 11.9243C71.3762 11.468 71.5026 11.2714 71.3762 10.9274C71.1937 10.429 70.7374 9.93756 69.6424 10.3658C68.5474 10.794 67.8314 10.5764 67.677 10.0429C67.5226 9.50933 69.8249 8.48439 70.8427 9.19343C71.8605 9.90247 72.8292 8.80731 72.0852 8.30888C71.3411 7.81045 71.8395 7.28394 72.3519 7.21373C72.7239 7.16459 73.0538 6.22388 73.3346 5.49378C71.7733 5.24122 70.1981 5.08416 68.6176 5.02344C68.6246 6.02732 68.9967 6.6451 68.3649 6.93293Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M61.1819 27.957C61.9507 28.2877 63.227 27.957 62.9886 27.365C62.289 27.488 61.5894 27.6187 60.8975 27.7648C60.9744 27.852 61.0723 27.9182 61.1819 27.957Z'
fill='#FFBC1F'
d='M58.9521 6.04835C59.654 6.35022 60.8193 6.04836 60.6017 5.50781C59.9629 5.62013 59.3241 5.73947 58.6924 5.87285C58.7626 5.95248 58.852 6.01288 58.9521 6.04835Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M61.6585 28.6107C60.5668 28.0494 60.6283 29.4257 61.128 29.9716C61.6277 30.5175 63.0731 29.3027 61.6585 28.6107Z'
fill='#FFBC1F'
d='M59.3875 6.64593C58.3908 6.13346 58.4469 7.39006 58.9032 7.8885C59.3594 8.38693 60.6791 7.27775 59.3875 6.64593Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M68.3013 26.8345C68.6367 26.895 68.9503 27.0427 69.2108 27.2627C69.4712 27.4826 69.6692 27.7672 69.7851 28.0878C69.9311 28.5799 71.1074 27.5111 71.1228 26.8114H70.0003C69.4314 26.8037 68.8702 26.8114 68.3013 26.8345Z'
fill='#FFBC1F'
d='M65.4521 5.02369C65.7584 5.07898 66.0448 5.21381 66.2825 5.41464C66.5203 5.61547 66.7011 5.87526 66.8069 6.16799C66.9402 6.61728 68.0142 5.64147 68.0282 5.00263H67.0034C66.484 4.99561 65.9716 5.00263 65.4521 5.02369Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M65.9942 28.4492C65.5022 29.1258 65.925 29.9408 66.5093 29.2642C67.0936 28.5876 66.6246 26.8729 67.0859 27.6111C67.5472 28.3492 68.4083 29.5179 68.9849 29.5718C69.5615 29.6256 69.0618 28.8874 68.9849 28.2723C68.908 27.6572 67.5319 27.0728 67.6856 26.8652C66.8246 26.9114 65.9712 26.9806 65.1255 27.0728C65.7328 27.4727 66.371 27.9648 65.9942 28.4492Z'
fill='#FFBC1F'
d='M63.3459 6.49694C62.8967 7.11471 63.2827 7.85885 63.8162 7.24107C64.3497 6.6233 63.9215 5.0578 64.3426 5.73174C64.7638 6.40568 65.55 7.47273 66.0764 7.52188C66.6029 7.57102 66.1466 6.89708 66.0764 6.33546C66.0062 5.77385 64.7498 5.24033 64.8902 5.05078C64.104 5.0929 63.3249 5.15608 62.5527 5.24032C63.1073 5.60537 63.6899 6.05466 63.3459 6.49694Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M68.5625 34.2775C69.2467 34.5543 68.5625 32.8858 68.5625 32.8858C67.8475 33.3087 67.8859 33.993 68.5625 34.2775Z'
fill='#FFBC1F'
d='M65.6909 11.8195C66.3156 12.0722 65.6909 10.5488 65.6909 10.5488C65.0381 10.9349 65.0732 11.5597 65.6909 11.8195Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M66.1024 33.224C66.2177 33.693 66.9558 33.8468 67.3478 33.224C67.7399 32.6012 67.3478 30.3406 66.7943 31.0557C66.2407 31.7708 65.6026 31.4401 64.4879 31.0557C63.3731 30.6712 65.9948 32.7319 66.1024 33.224Z'
fill='#FFBC1F'
d='M63.4448 10.8579C63.5501 11.2861 64.224 11.4265 64.5819 10.8579C64.9399 10.2893 64.5819 8.22532 64.0765 8.8782C63.5711 9.53107 62.9885 9.2292 61.9707 8.8782C60.9529 8.52719 63.3466 10.4086 63.4448 10.8579Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M73.6826 72.8378C74.6359 72.7225 75.2202 73.8835 76.2966 73.8297C77.3729 73.7759 79.0027 75.4059 79.933 74.4371C80.7018 73.6682 76.6118 73.0147 75.3202 72.315C74.0286 71.6153 72.737 72.9531 73.6826 72.8378Z'
fill='#FFBC1F'
d='M70.3657 47.0246C71.2361 46.9193 71.7696 47.9793 72.7523 47.9302C73.735 47.881 75.2231 49.3693 76.0724 48.4848C76.7744 47.7827 73.0401 47.186 71.8609 46.5472C70.6816 45.9084 69.5024 47.1299 70.3657 47.0246Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M78.4337 29.1181C79.7714 29.7639 79.5408 29.7409 78.7259 30.3637C77.9109 30.9865 78.2031 32.3398 80.0021 32.2475C81.8011 32.1552 82.9159 30.3637 83.7308 32.8857C84.5457 35.4077 83.9614 38.1603 85.007 38.9369C86.0526 39.7135 85.1838 40.2364 85.007 40.9591C84.8302 41.6819 85.2991 42.2047 86.1141 41.9741C86.929 41.7434 86.6984 43.2581 86.1141 43.8963C85.5298 44.5345 84.8379 45.7571 86.6369 47.9715C88.4359 50.1859 88.6742 49.8861 89.2508 50.6473C89.8274 51.4085 90.3041 50.3628 90.4732 49.4862C90.6424 48.6097 90.0657 45.5264 92.1338 45.5264C92.778 45.5195 93.4029 45.3057 93.9164 44.9167C94.4299 44.5277 94.8049 43.984 94.9861 43.3658C95.2167 42.8429 96.8466 42.8968 97.7153 42.1432C98.5841 41.3897 99.3529 40.9053 99.3759 38.2987C93.4007 32.7528 85.9725 29.0196 77.9571 27.5341C77.7649 28.1339 77.7726 28.8105 78.4337 29.1181Z'
fill='#FFBC1F'
d='M74.7036 7.10827C75.925 7.69796 75.7144 7.6769 74.9703 8.24553C74.2263 8.81417 74.493 10.0497 76.1355 9.96549C77.778 9.88125 78.7959 8.24553 79.5399 10.5482C80.2839 12.8508 79.7505 15.364 80.7051 16.073C81.6597 16.7821 80.8665 17.2595 80.7051 17.9194C80.5436 18.5792 80.9718 19.0566 81.7159 18.846C82.4599 18.6354 82.2493 20.0184 81.7159 20.6011C81.1824 21.1837 80.5507 22.2999 82.1932 24.3218C83.8357 26.3436 84.0533 26.0698 84.5798 26.7648C85.1062 27.4598 85.5414 26.505 85.6958 25.7047C85.8503 24.9044 85.3238 22.0893 87.212 22.0893C87.8001 22.083 88.3706 21.8879 88.8395 21.5327C89.3083 21.1775 89.6507 20.6812 89.8162 20.1167C90.0268 19.6393 91.5148 19.6884 92.308 19.0005C93.1012 18.3125 93.8031 17.8702 93.8242 15.4904C88.3687 10.4269 81.5866 7.01838 74.2684 5.66211C74.0929 6.20968 74.0999 6.82746 74.7036 7.10827Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<path
d='M107.091 59L124 59L124 72'
stroke='#3F4350'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M102.864 59L98.6365 59'
stroke='#3F4350'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M95.8184 59L93.0002 59'
stroke='#3F4350'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M58.6019 0.383106C66.948 -1.2328 75.0348 -0.505835 82.8517 2.566C86.0609 3.82715 89.2246 5.48354 92.3421 7.5353C96.241 10.3141 99.561 13.4221 102.301 16.8613M75.1367 88.7753C65.3658 90.5265 55.9902 89.2627 47.0305 84.9538C45.1531 84.0509 43.2939 83.0144 41.4532 81.8438C36.5678 78.2399 32.595 74.1786 29.5312 69.6573M22.6732 52.8466C21.5895 47.0125 21.6254 41.2894 22.7809 35.6774C23.9485 30.0062 26.2594 24.4483 29.7137 19.0039M107.617 25.4379C109.192 28.8187 110.342 32.443 111.065 36.3118C111.935 40.9918 112.097 45.5669 111.552 50.0365M105.118 20.8383C105.559 21.5417 105.978 22.2572 106.376 22.9848'
stroke='#3F4350'
strokeOpacity='0.48'
/>
</svg>

299
webapp/channels/src/components/common/svg_images_components/organization-building_svg.tsx
View file

@ -1,299 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
type Props = {
width?: number;
}
export default (props: Props) => (
<svg
width={props.width?.toString() || '210'}
height='200'
viewBox='0 0 210 200'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<ellipse
cx='119'
cy='156.5'
rx='91'
ry='5.5'
fill='black'
fillOpacity='0.08'
/>
<rect
x='63.2988'
y='44.1489'
width='72.8724'
height='111.702'
rx='8'
fill='#FFBC1F'
/>
<rect
x='29.2559'
y='82.9785'
width='140.957'
height='72.8723'
rx='8'
fill='#CC8F00'
/>
<path
d='M136.171 47.1506V153.381C135.99 155.198 135.369 156.199 134.295 156.383H65.4458C64.1915 156.199 63.4796 155.198 63.2988 153.381V47.1506C63.4796 45.3335 64.1915 44.3329 65.4458 44.1489H134.295C135.369 44.3329 135.99 45.3335 136.171 47.1506Z'
fill='#FFBC1F'
/>
<path
d='M113.842 127.686H85.9102V156.372H113.842V127.686Z'
fill='#E8E9ED'
/>
<rect
x='61.1699'
y='44.1489'
width='77.1277'
height='7.4468'
rx='3'
fill='#1E325C'
/>
<rect
x='82.9785'
y='123.936'
width='33.5106'
height='7.4468'
rx='3'
fill='#1E325C'
/>
<rect
x='98.9375'
y='130.851'
width='2.12766'
height='25.5319'
fill='#1E325C'
/>
<rect
x='35.6387'
y='95.7446'
width='8.51064'
height='16.4894'
rx='3'
fill='#7A5600'
/>
<rect
x='69.1504'
y='58.5107'
width='9.57447'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='106.383'
y='58.5107'
width='9.57447'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='69.1504'
y='84.0425'
width='9.57447'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='69.1504'
y='109.574'
width='9.57447'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='69.1504'
y='123.936'
width='9.57447'
height='9.57446'
rx='3'
fill='#CC8F00'
/>
<rect
x='69.1504'
y='138.298'
width='9.57447'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='106.383'
y='84.0425'
width='9.57447'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='106.383'
y='109.574'
width='9.57447'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='82.9785'
y='58.5107'
width='9.57448'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='120.213'
y='58.5107'
width='9.57446'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='82.9785'
y='84.0425'
width='9.57448'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='82.9785'
y='109.574'
width='9.57448'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='120.213'
y='84.0425'
width='9.57446'
height='20.2128'
rx='3'
fill='#CC8F00'
/>
<rect
x='120.213'
y='109.574'
width='9.57446'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='120.213'
y='123.936'
width='9.57446'
height='9.57446'
rx='3'
fill='#CC8F00'
/>
<rect
x='120.213'
y='138.298'
width='9.57446'
height='9.57448'
rx='3'
fill='#CC8F00'
/>
<rect
x='142.555'
y='95.7446'
width='8.51062'
height='16.4894'
rx='3'
fill='#7A5600'
/>
<rect
x='35.6387'
y='118.617'
width='8.51064'
height='8.51064'
rx='3'
fill='#7A5600'
/>
<rect
x='142.555'
y='118.617'
width='8.51062'
height='8.51064'
rx='3'
fill='#7A5600'
/>
<rect
x='35.6387'
y='134.042'
width='8.51064'
height='8.51065'
rx='3'
fill='#7A5600'
/>
<rect
x='142.555'
y='134.042'
width='8.51062'
height='8.51065'
rx='3'
fill='#7A5600'
/>
<rect
x='48.4043'
y='95.7446'
width='8.51064'
height='16.4894'
rx='3'
fill='#7A5600'
/>
<rect
x='155.32'
y='95.7446'
width='8.51065'
height='16.4894'
rx='3'
fill='#7A5600'
/>
<rect
x='48.4043'
y='118.617'
width='8.51064'
height='8.51064'
rx='3'
fill='#7A5600'
/>
<rect
x='155.32'
y='118.617'
width='8.51065'
height='8.51064'
rx='3'
fill='#7A5600'
/>
<rect
x='48.4043'
y='134.042'
width='8.51064'
height='8.51065'
rx='3'
fill='#7A5600'
/>
<rect
x='155.32'
y='134.042'
width='8.51065'
height='8.51065'
rx='3'
fill='#7A5600'
/>
</svg>
);

0
webapp/channels/src/components/common/svg_images_components/person_with_checklist.tsx → webapp/channels/src/components/common/svg_images_components/person_with_checklist_svg.tsx
View file

29
webapp/channels/src/components/common/svg_images_components/pin_svg.tsx
View file

@ -21,20 +21,23 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
aria-label={formatMessage({id: 'generic_icons.pin', defaultMessage: 'Pin Icon'})}
>
<g clipPath='url(#clip0_4210_84719)'>
<g>
<path
fill='none'
d='M3.00196 35L3.00197 56L15.002 56'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<path
fill='none'
d='M3.00195 31L3.00195 25'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<path
fill='none'
d='M3.00195 22L3.00195 20'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
@ -46,6 +49,7 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fill='var(--button-bg)'
/>
<path
fill='none'
d='M65.7715 65.5385H73.4638'
stroke='var(--center-channel-bg)'
strokeLinecap='round'
@ -55,6 +59,7 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fill='var(--center-channel-bg)'
/>
<path
fill='none'
d='M23.2556 67.2081L10.502 79.8035V12C10.502 11.1716 11.1735 10.5 12.002 10.5H78.002C78.8304 10.5 79.502 11.1716 79.502 12V64.9868C79.502 65.8153 78.8304 66.4868 78.002 66.4868H25.0123C24.3546 66.4868 23.7235 66.746 23.2556 67.2081Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -67,36 +72,42 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.32'
/>
<path
fill='none'
d='M43.002 25H59.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M20.002 49H53.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M20.002 56H42.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M43.002 31H68.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M20.002 43H37.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
fill='none'
d='M41.002 43H59.002'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
@ -109,21 +120,25 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fill='#32539A'
/>
<path
fill='none'
d='M79.9922 9L87.9922 17'
stroke='var(--button-color)'
strokeLinecap='round'
/>
<path
fill='none'
d='M80.4922 27.5L69.4922 16.5C69.4922 16.5 72.4922 15 74.9922 16L80.9922 10L86.9922 16L80.9922 22C81.9922 24.5 80.4922 27.5 80.4922 27.5Z'
stroke='var(--button-color)'
strokeLinecap='round'
/>
<path
fill='none'
d='M74.9922 22L69.9922 27'
stroke='var(--button-color)'
strokeLinecap='round'
/>
<path
fill='none'
d='M73.002 49L94.002 49L94.002 37'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -131,6 +146,7 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
strokeLinejoin='round'
/>
<path
fill='none'
d='M69.002 49L63.002 49'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -138,6 +154,7 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
strokeLinejoin='round'
/>
<path
fill='none'
d='M60.002 49L58.002 49'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -145,16 +162,6 @@ export function PinSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
strokeLinejoin='round'
/>
</g>
<defs>
<clipPath id='clip0_4210_84719'>
<rect
width='97'
height='87'
fill='white'
transform='translate(0.00195312)'
/>
</clipPath>
</defs>
</svg>
</span>
);

80
webapp/channels/src/components/common/svg_images_components/search_hint_svg.tsx
View file

@ -1,80 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
type SvgProps = {
width?: number;
height?: number;
}
const SearchHintSVG = ({width, height}: SvgProps) => (
<svg
width={width?.toString() || '72'}
height={height?.toString() || '48'}
viewBox='0 0 72 48'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_410_25534)'>
<path
d='M35.1353 12.5745H4.8754C4.32086 12.5726 3.77137 12.6798 3.25832 12.8898C2.74526 13.0998 2.27869 13.4087 1.88524 13.7986C1.49178 14.1886 1.17916 14.6521 0.965209 15.1627C0.751261 15.6732 0.640179 16.2208 0.638306 16.7742V35.9654C0.640179 36.5188 0.751261 37.0664 0.965209 37.577C1.17916 38.0875 1.49178 38.551 1.88524 38.941C2.27869 39.331 2.74526 39.6398 3.25832 39.8498C3.77137 40.0599 4.32086 40.167 4.8754 40.1651H9.34115V47.3489L16.0398 40.1651H35.1246C35.6791 40.167 36.2286 40.0599 36.7417 39.8498C37.2547 39.6398 37.7213 39.331 38.1147 38.941C38.5082 38.551 38.8208 38.0875 39.0348 37.577C39.2487 37.0664 39.3598 36.5188 39.3617 35.9654V16.7742C39.3579 15.6585 38.9108 14.5897 38.1185 13.8024C37.3262 13.0151 36.2534 12.5735 35.1353 12.5745Z'
fill='var(--away-indicator)'
/>
<path
d='M16.0398 40.1651H35.1246C35.6791 40.167 36.2286 40.0598 36.7417 39.8498C37.2547 39.6397 37.7213 39.3309 38.1148 38.9409C38.5082 38.5509 38.8208 38.0874 39.0348 37.5769C39.2487 37.0663 39.3598 36.5187 39.3617 35.9653V24.3145C39.3617 24.3145 38.0291 35.0883 37.7897 36.0367C37.5504 36.985 37.0752 38.4039 34.8245 38.6392C32.5738 38.8745 16.0398 40.1651 16.0398 40.1651Z'
fill='#CC8F00'
/>
<path
d='M9.66973 23.6263C10.2089 23.6263 10.7359 23.7859 11.1842 24.0848C11.6324 24.3837 11.9818 24.8085 12.1881 25.3056C12.3944 25.8026 12.4484 26.3496 12.3432 26.8772C12.2381 27.4049 11.9785 27.8896 11.5972 28.27C11.216 28.6504 10.7303 28.9095 10.2015 29.0145C9.67275 29.1194 9.12467 29.0656 8.62657 28.8597C8.12848 28.6538 7.70276 28.3051 7.40323 27.8578C7.10371 27.4105 6.94383 26.8845 6.94383 26.3465C6.94336 25.9892 7.01355 25.6353 7.15038 25.305C7.2872 24.9748 7.48797 24.6747 7.74118 24.422C7.9944 24.1693 8.29509 23.969 8.62602 23.8324C8.95695 23.6959 9.31163 23.6259 9.66973 23.6263Z'
fill='var(--center-channel-bg)'
/>
<path
d='M20.0056 23.6263C20.5447 23.6263 21.0717 23.7859 21.52 24.0848C21.9683 24.3837 22.3177 24.8085 22.524 25.3056C22.7303 25.8026 22.7843 26.3496 22.6791 26.8772C22.5739 27.4049 22.3143 27.8896 21.9331 28.27C21.5518 28.6504 21.0661 28.9095 20.5374 29.0145C20.0086 29.1194 19.4605 29.0656 18.9624 28.8597C18.4643 28.6538 18.0386 28.3051 17.7391 27.8578C17.4396 27.4105 17.2797 26.8845 17.2797 26.3465C17.2792 25.9892 17.3494 25.6353 17.4862 25.305C17.6231 24.9748 17.8238 24.6747 18.077 24.422C18.3303 24.1693 18.6309 23.969 18.9619 23.8324C19.2928 23.6959 19.6475 23.6259 20.0056 23.6263Z'
fill='var(--center-channel-bg)'
/>
<path
d='M30.33 23.6263C30.8693 23.6256 31.3967 23.7846 31.8454 24.083C32.2942 24.3815 32.6441 24.8061 32.851 25.3031C33.0579 25.8001 33.1123 26.3471 33.0076 26.875C32.9028 27.4029 32.6435 27.888 32.2624 28.2688C31.8813 28.6495 31.3956 28.909 30.8667 29.0142C30.3379 29.1195 29.7896 29.0658 29.2913 28.86C28.793 28.6542 28.3671 28.3056 28.0674 27.8582C27.7677 27.4108 27.6077 26.8847 27.6077 26.3465C27.6073 25.9895 27.6773 25.6358 27.8139 25.3058C27.9505 24.9758 28.151 24.6759 28.4038 24.4233C28.6566 24.1706 28.9569 23.9702 29.2874 23.8335C29.618 23.6967 29.9722 23.6263 30.33 23.6263Z'
fill='var(--center-channel-bg)'
/>
<path
d='M3.7787 20.6104C4.08616 19.5244 4.60589 18.5098 5.30794 17.625C6.00999 16.7403 6.88049 16.0028 7.86932 15.4552C7.92789 15.4257 7.97498 15.3776 8.00322 15.3184C8.03145 15.2593 8.03923 15.1925 8.02534 15.1285C8.01145 15.0645 7.97668 15.0069 7.92646 14.9647C7.87625 14.9225 7.81343 14.8982 7.74785 14.8955C5.84009 14.7814 1.98883 15.1878 3.19637 20.5819C3.20911 20.6477 3.24362 20.7074 3.29437 20.7513C3.34513 20.7953 3.4092 20.821 3.47632 20.8242C3.54343 20.8275 3.60972 20.8082 3.66454 20.7695C3.71937 20.7307 3.75956 20.6747 3.7787 20.6104Z'
fill='#FFD470'
/>
<path
opacity='0.4'
d='M32.3334 7.28991C34.7785 4.81371 37.8644 3.53829 41.5849 3.46985C45.237 3.53829 48.3042 4.80749 50.7866 7.28991C53.2628 9.77233 54.5383 12.8396 54.6067 16.4917C54.5383 20.2122 53.269 23.2919 50.7866 25.7432C48.3042 28.1883 45.237 29.4824 41.5849 29.6068C37.8644 29.4761 34.7847 28.1883 32.3334 25.7432C29.8883 23.2919 28.6004 20.206 28.4698 16.4854C28.6004 12.8334 29.8883 9.76611 32.3334 7.28991Z'
fill='var(--center-channel-bg)'
/>
<path
d='M53.5706 14.1678C52.464 10.5721 50.3691 7.88057 47.2828 6.09868C44.1964 4.31679 40.8181 3.84832 37.1508 4.68784C35.1455 5.20001 33.3983 6.08537 31.8951 7.34293C33.576 5.5084 35.7082 4.23809 38.2863 3.52882C41.9535 2.68929 45.3485 3.16738 48.4626 4.9653C51.5767 6.76321 53.6882 9.46433 54.7948 13.06C55.4751 15.6505 55.4412 18.1323 54.6873 20.502C53.939 22.875 52.5957 24.8683 50.6551 26.4733C52.1121 24.8855 53.1147 23.0208 53.6603 20.8706C54.2005 18.7172 54.1703 16.4876 53.5706 14.1678Z'
fill='black'
fillOpacity='0.4'
/>
<path
d='M57.6194 15.4776C57.3584 11.6178 55.7919 8.22807 52.9264 5.30846C49.663 2.19708 45.8961 0.638306 41.6257 0.638306C37.3554 0.638306 33.5947 2.19708 30.3313 5.30846C27.2047 8.55591 25.6383 12.2982 25.6383 16.5477C25.6383 20.7973 27.2047 24.5458 30.3313 27.787C33.3274 30.6448 36.7524 32.185 40.6001 32.4077C44.4478 32.6366 47.9971 31.5788 51.2605 29.2468L53.7034 31.6778L56.83 28.5664L54.3871 26.1355C56.7989 22.8942 57.8743 19.3375 57.6194 15.4776ZM50.8689 25.6963C48.3887 28.1272 45.3242 29.4139 41.6755 29.5376C37.9583 29.4077 34.8814 28.1272 32.4323 25.6963C29.9895 23.2653 28.7028 20.1973 28.5722 16.4983C28.7028 12.8673 29.9895 9.81778 32.4323 7.34971C34.8752 4.88783 37.9583 3.61978 41.6755 3.55174C45.3242 3.61978 48.3887 4.88165 50.8689 7.34971C53.3428 9.81778 54.6171 12.8673 54.6855 16.4983C54.6171 20.1973 53.3491 23.2653 50.8689 25.6963Z'
fill='#BABEC9'
/>
<path
d='M67.6182 46.4679C66.8121 46.6983 66.2153 46.6174 65.8276 46.225L53.1453 32.3065C52.7577 31.9142 52.5977 31.4098 52.6592 30.787C52.7207 30.1643 53.1084 29.4668 53.8222 28.6821C54.5975 27.9659 55.2867 27.5549 55.9021 27.4553C56.5174 27.3556 57.0159 27.5362 57.4035 27.9971L71.2488 40.832C71.6364 41.2243 71.698 41.8097 71.4395 42.5944C71.1811 43.3791 70.695 44.1637 69.9873 44.9484C69.2181 45.7331 68.4243 46.2375 67.6182 46.4679Z'
fill='var(--away-indicator)'
/>
<path
d='M68.5465 38.3191L63.3621 43.5465L57.1116 36.6856L61.6961 32.0027L68.5465 38.3191Z'
fill='#7A5600'
/>
</g>
<defs>
<clipPath id='clip0_410_25534'>
<rect
width='72'
height='48'
fill='var(--center-channel-bg)'
/>
</clipPath>
</defs>
</svg>
);
export default SearchHintSVG;

21
webapp/channels/src/components/common/svg_images_components/search_svg.tsx
View file

@ -15,7 +15,7 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
role='img'
aria-label={formatMessage({id: 'generic_icons.search', defaultMessage: 'Search Icon'})}
>
<g clipPath='url(#clip0_4212_116720)'>
<g>
<rect
x='0.255005'
y='32'
@ -43,11 +43,13 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.12'
/>
<path
fill='none'
d='M62.5814 6.60593C70.262 6.55738 77.3232 8.54646 83.755 12.5732C86.3956 14.2264 88.9301 16.223 91.3579 18.5631C94.3589 21.6787 96.7911 24.9905 98.653 28.5M62.5813 87.8542C53.6129 87.7863 45.4964 85.1063 38.255 79.7911C36.7377 78.6774 35.2587 77.4479 33.8185 76.1025C30.0784 72.0903 27.2249 67.8234 25.255 63.299M21.9572 47.2301C21.964 41.8688 22.9467 36.7921 24.9051 32C26.8843 27.1573 29.8599 22.6053 33.8322 18.3439M101.949 37C102.786 40.2642 103.206 43.6739 103.206 47.2301C103.2 51.5308 102.585 55.6211 101.358 59.5M100.495 32.5C100.769 33.1979 101.022 33.903 101.255 34.6153'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
/>
<path
fill='none'
d='M82.6551 5.72396C90.4991 9.4225 96.7179 14.8934 101.302 22.1318C103.184 25.1036 104.79 28.3733 106.12 31.9406'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
@ -69,6 +71,7 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
height='6.45395'
rx='0.5'
transform='rotate(45 89.8878 70.0587)'
fill='none'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
/>
@ -77,6 +80,7 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fill='var(--center-channel-bg)'
/>
<path
fill='none'
d='M62.5738 11.7232C72.0335 11.6634 80.418 15.1368 87.7227 22.1748C94.6257 29.3444 98.0773 37.6809 98.0773 47.2299C98.0652 56.7673 94.6251 65.1159 87.7228 72.2849C80.418 79.323 72.0576 82.7964 62.5738 82.7366C53.0959 82.6646 44.7093 79.2606 37.431 72.467C30.5135 65.0406 27.0759 56.6419 27.064 47.2294C27.0762 37.8176 30.5255 29.4072 37.4428 21.9809C44.7342 15.1984 53.109 11.783 62.5738 11.7232Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -95,6 +99,7 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.8'
/>
<path
fill='none'
d='M62.5736 11.7232C72.0333 11.6634 80.4179 15.1369 87.7225 22.1748C94.6255 29.3444 98.0771 37.681 98.0771 47.2299C98.065 56.7674 94.625 65.1159 87.7226 72.2849C80.4178 79.3231 72.0575 82.7964 62.5736 82.7366C53.0957 82.6647 44.7092 79.2607 37.4308 72.4671C30.5133 65.0407 27.0758 56.642 27.0638 47.2294C27.076 37.8176 30.5254 29.4072 37.4426 21.9809C44.734 15.1984 53.1088 11.783 62.5736 11.7232Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
@ -107,40 +112,34 @@ export function SearchSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
fillOpacity='0.32'
/>
<path
fill='none'
d='M43.255 56H85.255'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
/>
<path
fill='none'
d='M43.255 63H65.255'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
/>
<path
fill='none'
d='M43.255 50H60.255'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
/>
<path
fill='none'
d='M65.255 50H80.255'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
/>
</g>
<defs>
<clipPath id='clip0_4212_116720'>
<rect
width='122'
height='99'
fill='white'
transform='translate(0.255005)'
/>
</clipPath>
</defs>
</svg>
</span>
);

0
webapp/channels/src/components/common/svg_images_components/setup_system.tsx → webapp/channels/src/components/common/svg_images_components/setup_system_svg.tsx
View file

2
webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx → webapp/channels/src/components/common/svg_images_components/shield_with_checkmark_svg.tsx
View file

@ -68,7 +68,7 @@ const Svg = (props: SvgProps) => (
/>
<path
d='M100.858 160.405L101.222 160.609L101.588 160.406L109.106 156.227L109.106 156.227C148.812 134.152 157.712 93.1576 161.248 47.6444L161.299 46.9873L160.654 46.8522L160.466 46.8129L160.39 46.797H160.312C141.387 46.797 122.047 39.9873 101.733 21.1994L101.166 20.6749L100.658 21.2572C92.1406 31.0307 84.7227 36.9842 76.2033 40.7408C67.671 44.5031 57.9721 46.0902 44.8319 47.025L44.7996 47.0273L44.7677 47.0323L41.8826 47.4895L41.1953 47.5984L41.2525 48.292C44.981 93.4429 53.7267 134.063 93.0934 156.064L100.858 160.405Z'
fill='white'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='1.5'
/>

0
webapp/channels/src/components/common/svg_images_components/upload_license.tsx → webapp/channels/src/components/common/svg_images_components/upload_license_svg.tsx
View file

283
webapp/channels/src/components/common/svg_images_components/woman_with_card_svg.tsx
View file

File diff suppressed because one or more lines are too long

30
webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx
View file

@ -1,30 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
type SvgProps = {
width?: number;
height?: number;
}
const SvgComponent = (props: SvgProps) => (
<svg
width={props.width ? props.width.toString() : '260'}
height={props.height ? props.height.toString() : '260'}
fill='var(--center-channel-bg)'
viewBox='0 0 260 260'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M192.397 192.367L222.776 184.156L258.559 219.979C260.648 211.241 260.463 202.112 258.022 193.466C255.581 184.819 250.966 176.943 244.616 170.588C238.267 164.233 230.395 159.613 221.753 157.168C213.11 154.722 203.986 154.534 195.25 156.62L103.339 64.6975C105.407 55.9717 105.209 46.8616 102.765 38.2338C100.32 29.6059 95.71 21.7471 89.3726 15.4047C83.0352 9.06235 75.1814 4.44721 66.558 1.99823C57.9346 -0.450755 48.8282 -0.652137 40.105 1.41319L75.8885 37.2359L67.6308 67.5512L37.2523 75.7121L1.44389 39.8894C-0.648364 48.633 -0.464087 57.7673 1.97905 66.4193C4.42219 75.0713 9.04252 82.952 15.3986 89.3081C21.7546 95.6641 29.634 100.283 38.2836 102.724C46.9331 105.165 56.0638 105.345 64.8031 103.249L156.714 195.171C154.618 203.914 154.799 213.048 157.239 221.701C159.678 230.354 164.296 238.237 170.649 244.595C177.003 250.954 184.88 255.576 193.529 258.02C202.177 260.464 211.308 260.649 220.048 258.555L184.265 222.733L192.397 192.367Z'
fill='#767D93'
/>
<path
d='M192.397 192.367L222.775 184.156L258.559 219.979C260.648 211.241 260.463 202.112 258.022 193.466C255.581 184.819 250.965 176.943 244.616 170.588C238.266 164.233 230.395 159.613 221.752 157.168C213.11 154.722 203.986 154.534 195.25 156.62L103.339 64.6975C105.407 55.9717 105.209 46.8616 102.764 38.2338C100.32 29.6059 95.7097 21.7471 89.3723 15.4047C83.0349 9.06235 75.1811 4.44721 66.5577 1.99823C57.9343 -0.450755 48.8279 -0.652137 40.1047 1.41319L75.8882 37.2359L67.6305 67.5512'
fill='#A4A9B7'
/>
</svg>
);
export default SvgComponent;

55
webapp/channels/src/components/initial_loading_screen/initial_loading_screen.css
View file

@ -7,10 +7,11 @@ body {
}
.LoadingScreen {
--background-color: #f4f4f6;
--background-color-highlight: #ffffff;
--stipple-color: #1e325c;
--stipple-opacity: 0.08;
--background-color: #ffffff;
--background-gradient: linear-gradient(152deg, rgba(63, 67, 80, 0.00) 0%, rgba(63, 67, 80, 0.04) 80%, #FFFFFF);
--background-texture: rgba(63, 67, 80, 0.04);
--gradient-center-color: #FFF;
--gradient-edge-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
top: 0px;
@ -25,13 +26,25 @@ body {
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
vertical-align: middle;
visibility: visible;
.LoadingScreen__background-gradient {
background-image: var(--background-gradient);
}
.LoadingScreen__background-texture {
fill: var(--background-texture);
}
}
.LoadingScreen--darkMode {
--background-color-highlight: #28427b;
--background-color: #1e325c;
--stipple-color: #14213e;
--stipple-opacity: 0.8;
/* Apply dark mode based on OS preference automatically */
@media (prefers-color-scheme: dark) {
.LoadingScreen {
--background-color: #191B1F;
--background-gradient: linear-gradient(152deg, rgba(221, 223, 228, 0.00) 0%, rgba(221, 223, 228, 0.04) 80, #191B1F);
--background-texture: rgba(221, 223, 228, 0.04);
--gradient-center-color: #1B1D22;
--gradient-edge-color: rgba(27, 29, 34, 0);
}
}
.LoadingScreen__background,
@ -46,22 +59,9 @@ body {
background: var(--background-color);
}
.LoadingScreen .Pill__stipple {
fill: var(--stipple-color);
fill-opacity: var(--stipple-opacity);
}
.LoadingScreen .Pill__gradient {
stop-color: var(--background-color);
}
.LoadingScreen .Pill__gradientHighlight {
stop-color: var(--background-color-highlight);
}
.LoadingScreen--loaded {
opacity: 0;
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
transition: opacity 400ms 0ms ease-in, visibility 400ms 0ms step-end;
visibility: hidden;
}
@ -83,8 +83,11 @@ body {
transform: scale3d(1, 1, 1);
}
.LoadingAnimation--darkMode {
--colour: white;
/* Apply dark mode based on OS preference automatically */
@media (prefers-color-scheme: dark) {
.LoadingAnimation {
--colour: white;
}
}
.LoadingAnimation g,
@ -208,7 +211,7 @@ body {
}
.LoadingAnimation--loaded {
--duration: 150ms;
--duration: 400ms;
--delay: 0ms;
animation: LoadingAnimation__fade-out var(--duration) var(--delay) var(--ease-in) forwards, LoadingAnimation__shrink var(--duration) var(--delay) var(--ease-in) forwards;

49
webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts
View file

@ -7,14 +7,14 @@ import {isDesktopApp} from 'utils/user_agent';
const ANIMATION_CLASS_FOR_MATTERMOST_LOGO_HIDE = 'LoadingAnimation__compass-shrink';
const ANIMATION_CLASS_FOR_COMPLETE_LOADER_HIDE = 'LoadingAnimation__shrink';
const LOADING_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--darkMode';
const LOADING_COMPLETE_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--darkMode LoadingScreen--loaded';
const STATIC_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--darkMode';
const LOADING_CLASS_FOR_ANIMATION = STATIC_CLASS_FOR_ANIMATION + ' LoadingAnimation--spinning LoadingAnimation--loading';
const LOADING_COMPLETE_CLASS_FOR_ANIMATION = STATIC_CLASS_FOR_ANIMATION + ' LoadingAnimation--spinning LoadingAnimation--loaded';
const DESTROY_DELAY_AFTER_ANIMATION_END = 1000;
const MINIMUM_LOADING_TIME = 2000; // Minimum time to show the loading screen (in ms)
const LOADING_CLASS_FOR_SCREEN = 'LoadingScreen';
const LOADING_COMPLETE_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--loaded';
const STATIC_CLASS_FOR_ANIMATION = 'LoadingAnimation';
const LOADING_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--spinning LoadingAnimation--loading';
const LOADING_COMPLETE_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--spinning LoadingAnimation--loaded';
export class InitialLoadingScreenClass {
private isLoading: boolean | null = true;
@ -23,6 +23,7 @@ export class InitialLoadingScreenClass {
private loadingAnimationElement: HTMLElement | null;
private initialLoadingScreenCSS: HTMLLinkElement | null;
private startTime: number | null = null;
constructor() {
this.loadingScreenElement = document.getElementById('initialPageLoadingScreen');
@ -111,6 +112,7 @@ export class InitialLoadingScreenClass {
}
this.isLoading = true;
this.startTime = Date.now();
this.loadingScreenElement.className = LOADING_CLASS_FOR_SCREEN;
this.loadingAnimationElement.className = LOADING_CLASS_FOR_ANIMATION;
@ -121,19 +123,30 @@ export class InitialLoadingScreenClass {
return;
}
this.isLoading = false;
// Calculate how long the loading screen has been visible
const elapsedTime = this.startTime ? Date.now() - this.startTime : 0;
const remainingTime = Math.max(0, MINIMUM_LOADING_TIME - elapsedTime);
this.loadingScreenElement.className = LOADING_COMPLETE_CLASS_FOR_SCREEN;
this.loadingAnimationElement.className = LOADING_COMPLETE_CLASS_FOR_ANIMATION;
// If minimum time hasn't elapsed, delay the stop
setTimeout(() => {
if (!this.loadingScreenElement || !this.loadingAnimationElement) {
return;
}
measureAndReport({
name: Measure.SplashScreen,
startMark: 0,
canFail: false,
labels: {
page_type: pageType,
},
});
this.isLoading = false;
this.loadingScreenElement.className = LOADING_COMPLETE_CLASS_FOR_SCREEN;
this.loadingAnimationElement.className = LOADING_COMPLETE_CLASS_FOR_ANIMATION;
measureAndReport({
name: Measure.SplashScreen,
startMark: 0,
canFail: false,
labels: {
page_type: pageType,
},
});
}, remainingTime);
}
}

4752
webapp/channels/src/components/initial_loading_screen/initial_loading_screen_template.html
View file

File diff suppressed because it is too large Load diff

8
webapp/channels/src/components/invitation_modal/no_permissions_view.tsx
View file

@ -5,7 +5,7 @@ import React from 'react';
import {Modal} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
import AccessDeniedSvg from 'components/common/svg_images_components/access_denied_svg';
import AccessProblemSVG from 'components/common/svg_images_components/access_problem_svg';
import './no_permissions_view.scss';
@ -38,9 +38,9 @@ export default function NoPermissionsView(props: Props) {
defaultMessage='You do not have permissions to add users or guests. If this seems like an error, please reach out to your system administrator.'
/>
</div>
<AccessDeniedSvg
width={211}
height={156}
<AccessProblemSVG
width={222}
height={136}
/>
</div>
</Modal.Body>

2
webapp/channels/src/components/login/login_mfa.tsx
View file

@ -5,7 +5,7 @@ import React, {type ReactNode, useState} from 'react';
import {useIntl} from 'react-intl';
import type {SubmitOptions} from 'components/claim/components/email_to_ldap';
import ShieldWithCheckmarkSVG from 'components/common/svg_images_components/shield_with_checkmark';
import ShieldWithCheckmarkSVG from 'components/common/svg_images_components/shield_with_checkmark_svg';
import ColumnLayout from 'components/header_footer_route/content_layouts/column';
import SaveButton from 'components/save_button';
import Input, {SIZE} from 'components/widgets/inputs/input/input';

1094
webapp/channels/src/components/preparing_workspace/invite_members_illustration.tsx
View file

File diff suppressed because one or more lines are too long

7
webapp/channels/src/components/preparing_workspace/organization.tsx
View file

@ -12,7 +12,7 @@ import type {Team} from '@mattermost/types/teams';
import {getTeams} from 'mattermost-redux/actions/teams';
import {getActiveTeamsList} from 'mattermost-redux/selectors/entities/teams';
import OrganizationSVG from 'components/common/svg_images_components/organization-building_svg';
import CompanySVG from 'components/common/svg_images_components/company_svg';
import QuickInput from 'components/quick_input';
import Constants from 'utils/constants';
@ -133,7 +133,10 @@ const Organization = (props: Props) => {
<div className='Organization-right-col'>
<div className='Organization-form-wrapper'>
<div className='Organization__progress-path'>
<OrganizationSVG/>
<CompanySVG
width={205}
height={180}
/>
<PageLine
style={{
marginTop: '5px',

8
webapp/channels/src/components/preparing_workspace/preparing_workspace.scss
View file

@ -90,12 +90,12 @@
&__invite-members-illustration {
position: absolute;
top: 25%;
right: -651px;
right: -697px;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
@include mixins.sideIllustrationKeyframe(invitation, -651, 0);
@include mixins.sideIllustrationKeyframe(invitation, -697, 48);
&.enter {
animation-name: invitationSlideInRight;
@ -136,9 +136,9 @@
}
}
@media screen and (min-width: 1200px) and (max-width: 1500px) {
@media screen and (min-width: 1200px) and (max-width: 1680px) {
.PreparingWorkspace__invite-members-illustration {
@include mixins.sideIllustrationKeyframe(invitation, -651, -200);
@include mixins.sideIllustrationKeyframe(invitation, -697, -200);
&.enter {
animation-name: invitationSlideInRight;

13
webapp/channels/src/components/preparing_workspace/preparing_workspace.tsx
View file

@ -14,7 +14,7 @@ import {sendEmailInvitesToTeamGracefully} from 'mattermost-redux/actions/teams';
import {Client4} from 'mattermost-redux/client';
import {General} from 'mattermost-redux/constants';
import {getFirstAdminSetupComplete, getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
import {getIsOnboardingFlowEnabled} from 'mattermost-redux/selectors/entities/preferences';
import {getIsOnboardingFlowEnabled, getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getCurrentTeam, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
import {isFirstAdmin} from 'mattermost-redux/selectors/entities/users';
import type {ActionResult} from 'mattermost-redux/types/actions';
@ -24,6 +24,7 @@ import LogoSvg from 'components/common/svg_images_components/logo_dark_blue_svg'
import Constants from 'utils/constants';
import {makeNewTeam} from 'utils/team_utils';
import {getSiteURL, teamNameToUrl} from 'utils/url';
import {applyTheme, resetTheme} from 'utils/utils';
import InviteMembers from './invite_members';
import InviteMembersIllustration from './invite_members_illustration';
@ -82,6 +83,7 @@ const PreparingWorkspace = ({
});
const isUserFirstAdmin = useSelector(isFirstAdmin);
const onboardingFlowEnabled = useSelector(getIsOnboardingFlowEnabled);
const currentTheme = useSelector(getTheme);
const currentTeam = useSelector(getCurrentTeam);
const myTeams = useSelector(getMyTeams);
@ -116,6 +118,15 @@ const PreparingWorkspace = ({
...emptyForm,
});
// Apply denim theme on mount, restore user theme on unmount
useEffect(() => {
resetTheme();
return () => {
applyTheme(currentTheme);
};
}, []);
useEffect(() => {
if (!pluginsEnabled) {
if (!form.plugins.skipped) {

2
webapp/channels/src/components/preparing_workspace/title.scss
View file

@ -2,7 +2,7 @@
display: flex;
margin-top: 0;
margin-bottom: 12px;
color: var(--sidebar-header-bg);
color: var(--indigo-400);
font-size: 56px;
letter-spacing: -0.01em;

8
webapp/channels/src/components/screening_in_progress_modal/index.tsx
View file

@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
import {GenericModal} from '@mattermost/components';
import {useControlScreeningInProgressModal} from 'components/common/hooks/useControlModal';
import AccessDeniedHappySvg from 'components/common/svg_images_components/access_denied_happy_svg';
import AccessProblemSVG from 'components/common/svg_images_components/access_problem_svg';
import './content.scss';
@ -32,9 +32,9 @@ export default function ScreeningInProgressModal() {
>
<div className='ScreeningInProgressModal__content'>
<div className='ScreeningInProgressModal__illustration'>
<AccessDeniedHappySvg
height={350}
width={350}
<AccessProblemSVG
width={320}
height={190}
/>
</div>
<div className='ScreeningInProgressModal__title'>

4
webapp/channels/src/components/should_verify_email/should_verify_email.tsx
View file

@ -9,7 +9,7 @@ import {useLocation, useHistory} from 'react-router-dom';
import {sendVerificationEmail} from 'mattermost-redux/actions/users';
import ManWithMailboxSVG from 'components/common/svg_images_components/man_with_mailbox_svg';
import EmailInboxSVG from 'components/common/svg_images_components/email_inbox_svg';
import ColumnLayout from 'components/header_footer_route/content_layouts/column';
import SaveButton from 'components/save_button';
@ -61,7 +61,7 @@ const ShouldVerifyEmail = () => {
<ColumnLayout
title={formatMessage({id: 'email_verify.almost', defaultMessage: 'You’re almost done!'})}
message={formatMessage({id: 'email_verify.notVerifiedBody', defaultMessage: 'Please verify your email address. Check your inbox for an email.'})}
SVGElement={<ManWithMailboxSVG width={284}/>}
SVGElement={<EmailInboxSVG width={284}/>}
extraContent={(
<div className='should-verify-body-content-extra'>
<div className='should-verify-body-content-buttons'>

2
webapp/channels/src/components/threading/global_threads/global_threads.tsx
View file

@ -28,7 +28,7 @@ import {getSelectedThreadIdInCurrentTeam} from 'selectors/views/threads';
import {useGlobalState} from 'stores/hooks';
import LocalStorageStore from 'stores/local_storage_store';
import ChatIllustration from 'components/common/svg_images_components/chat_illustration';
import ChatIllustration from 'components/common/svg_images_components/chat_illustration_svg';
import LoadingScreen from 'components/loading_screen';
import NoResultsIndicator from 'components/no_results_indicator';

13
webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss
View file

@ -156,3 +156,16 @@
margin-right: 10px;
}
}
.no-results__wrapper {
.thread-no-results-subtitle-shortcut {
.shortcut-key{
padding: 2px 5px;
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
font-weight: 600;
line-height: 16px;
}
}
}

8
webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/virtualized_thread_list_row.test.tsx.snap
View file

@ -19,7 +19,11 @@ exports[`components/threading/global_threads/thread_list/virtualized_thread_list
exports[`components/threading/global_threads/thread_list/virtualized_thread_list_row should support item search guidance 1`] = `
<NoResultsIndicator
iconGraphic={<SearchHintSVG />}
iconGraphic={
<SearchSVG
className="no-results__icon"
/>
}
layout={1}
style={
Object {
@ -35,7 +39,7 @@ exports[`components/threading/global_threads/thread_list/virtualized_thread_list
Object {
"searchShortcut": <SearchShortcut
className="thread-no-results-subtitle-shortcut"
variant="tutorialTip"
variant="contrast"
/>,
}
}

6
webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss
View file

@ -90,5 +90,11 @@
.virtualized-thread-list {
scrollbar-color: var(--center-channel-color-32) #fff0;
scrollbar-width: thin;
.no-results__icon svg {
width: 92px;
height: 73px;
margin-bottom: 0px;
}
}
}

6
webapp/channels/src/components/threading/global_threads/thread_list/virtualized_thread_list_row.tsx
View file

@ -7,7 +7,7 @@ import {areEqual} from 'react-window';
import type {UserThread} from '@mattermost/types/threads';
import SearchHintSVG from 'components/common/svg_images_components/search_hint_svg';
import {SearchSVG} from 'components/common/svg_images_components/search_svg';
import LoadingScreen from 'components/loading_screen';
import NoResultsIndicator from 'components/no_results_indicator';
import {NoResultsLayout} from 'components/no_results_indicator/types';
@ -44,7 +44,7 @@ function Row({index, style, data}: Props) {
return (
<NoResultsIndicator
style={{...style, padding: '16px 16px 16px 24px', background: 'rgba(var(--center-channel-color-rgb), 0.04)'}}
iconGraphic={<SearchHintSVG/>}
iconGraphic={<SearchSVG className='no-results__icon'/>}
title={
<FormattedMessage
id='globalThreads.searchGuidance.title'
@ -59,7 +59,7 @@ function Row({index, style, data}: Props) {
searchShortcut: (
<SearchShortcut
className='thread-no-results-subtitle-shortcut'
variant={ShortcutKeyVariant.TutorialTip}
variant={ShortcutKeyVariant.Contrast}
/>
),
}}

2
webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx
View file

@ -19,7 +19,7 @@ import Carousel from 'components/common/carousel/carousel';
import useOpenInvitePeopleModal from 'components/common/hooks/useOpenInvitePeopleModal';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
import PersonWithChecklistSvg from 'components/common/svg_images_components/person_with_checklist';
import PersonWithChecklistSvg from 'components/common/svg_images_components/person_with_checklist_svg';
import SuccessSvg from 'components/common/svg_images_components/success_svg';
import {ConsolePages, DocLinks, ModalIdentifiers} from 'utils/constants';