toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated empty state images (#8659)

Browse source 
* Updated search empty images

* Updated channel empty state images

* Styling

* Added unreads, threads, mentions and saved messages empty state images

* Removed withTheme

* Update snapshot

* Fixed color for unread sidebar svg
This commit is contained in:
Maria A Nunez 2025-03-13 17:03:30 -04:00 committed by GitHub
parent a5a1e53827
commit 7063e5efa8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 1825 additions and 1106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/components/no_results_with_term/index.tsx
View file

@ -29,6 +29,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
justifyContent: 'center' as const,
},
result: {
marginTop: 32,
textAlign: 'center',
color: theme.centerChannelColor,
...typography('Heading', 400, 'SemiBold'),

251
app/components/no_results_with_term/search_files_illustration.tsx
View file

@ -1,59 +1,252 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import Svg, {Path, Ellipse} from 'react-native-svg';
import Svg, {Circle, ClipPath, Defs, G, Line, Path, Rect} from 'react-native-svg';
import {useTheme} from '@context/theme';
function SearchFilesIllustration() {
const theme = useTheme();
return (
<Svg
width='185'
height='165'
width={132}
height={108}
viewBox='0 0 132 108'
fill='none'
>
<Ellipse
cx='93.5'
cy='141.5'
rx='57.5'
ry='2.5'
fill='black'
fillOpacity='0.06'
<Rect
x={1}
y={51}
width={131}
height={35}
rx={2}
fill={theme.centerChannelBg}
/>
<Rect
opacity={0.12}
x={1}
y={51}
width={131}
height={35}
rx={2}
fill={theme.buttonBg}
/>
<Path
d='M147.136 140.543H82.8539C81.8443 140.443 80.9001 139.991 80.1829 139.263C79.4657 138.536 79.0201 137.578 78.9222 136.553V51.859C79.0115 50.8213 79.4608 49.8493 80.1902 49.1163C80.9156 48.3805 81.8718 47.9253 82.8932 47.8298H130.564L151.205 68.5346V136.513C151.218 137.023 151.128 137.531 150.94 138.004C150.753 138.477 150.472 138.907 150.114 139.266C149.308 140.045 148.249 140.499 147.136 140.543V140.543Z'
fill='#E8E9ED'
d='M11.5 44.5L11.5 91.5H100'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M121.679 61.9421H87.9061C87.7205 61.9301 87.5393 61.8795 87.3737 61.7934C87.2082 61.7073 87.0618 61.5875 86.9438 61.4416C86.8258 61.2957 86.7387 61.1267 86.6878 60.9452C86.6369 60.7636 86.6233 60.5734 86.648 60.3863C86.648 59.4687 87.0706 59.0099 87.9061 59.0099H121.679C122.524 59.0099 122.947 59.4687 122.947 60.3863C122.972 60.5742 122.958 60.7652 122.906 60.9473C122.855 61.1295 122.767 61.299 122.648 61.445C122.529 61.5911 122.381 61.7107 122.214 61.7962C122.048 61.8818 121.865 61.9314 121.679 61.9421V61.9421ZM116.44 71.8357C116.823 71.8357 117.191 71.6813 117.462 71.4063C117.733 71.1314 117.885 70.7584 117.885 70.3696C117.885 69.9808 117.733 69.6079 117.462 69.3329C117.191 69.058 116.823 68.9035 116.44 68.9035H87.9356C87.5815 68.9455 87.2548 69.1181 87.0177 69.3883C86.7807 69.6586 86.6498 70.0078 86.6498 70.3696C86.6498 70.7314 86.7807 71.0807 87.0177 71.3509C87.2548 71.6212 87.5815 71.7937 87.9356 71.8357H116.44ZM138.831 81.9088C139.03 81.9256 139.23 81.9002 139.419 81.8343C139.608 81.7685 139.781 81.6636 139.928 81.5263C140.075 81.389 140.193 81.2222 140.273 81.0366C140.353 80.851 140.395 80.6505 140.395 80.4478C140.395 80.2451 140.353 80.0445 140.273 79.8589C140.193 79.6733 140.075 79.5065 139.928 79.3692C139.781 79.2319 139.608 79.127 139.419 79.0612C139.23 78.9953 139.03 78.9699 138.831 78.9866H87.9061C87.5596 79.0371 87.2427 79.2126 87.0134 79.481C86.7842 79.7494 86.658 80.0926 86.658 80.4478C86.658 80.8029 86.7842 81.1462 87.0134 81.4146C87.2427 81.6829 87.5596 81.8584 87.9061 81.9088H138.831ZM135.587 91.8124C136.419 91.8124 136.901 91.3238 137.032 90.3464C137.005 89.9667 136.844 89.6097 136.578 89.3405C136.313 89.0713 135.961 88.908 135.587 88.8802H87.9061C87.7205 88.8923 87.5393 88.9429 87.3737 89.029C87.2082 89.1151 87.0618 89.2349 86.9438 89.3808C86.8258 89.5267 86.7387 89.6957 86.6878 89.8772C86.6369 90.0588 86.6233 90.2491 86.648 90.4362C86.648 91.3537 87.0706 91.8124 87.9061 91.8124H135.587ZM116.44 101.886C116.823 101.886 117.191 101.731 117.462 101.456C117.733 101.181 117.885 100.808 117.885 100.419C117.885 100.031 117.733 99.6578 117.462 99.3828C117.191 99.1079 116.823 98.9534 116.44 98.9534H87.9356C87.5815 98.9954 87.2548 99.1679 87.0177 99.4382C86.7807 99.7085 86.6498 100.058 86.6498 100.419C86.6498 100.781 86.7807 101.131 87.0177 101.401C87.2548 101.671 87.5815 101.844 87.9356 101.886H116.44ZM138.831 111.779C139.676 111.779 140.158 111.291 140.276 110.313C140.25 109.933 140.09 109.575 139.824 109.305C139.559 109.035 139.205 108.873 138.831 108.847H87.9061C87.7205 108.859 87.5393 108.91 87.3737 108.996C87.2082 109.082 87.0618 109.202 86.9438 109.348C86.8258 109.493 86.7387 109.662 86.6878 109.844C86.6369 110.026 86.6233 110.216 86.648 110.403C86.648 111.32 87.0706 111.779 87.9061 111.779H138.831ZM138.831 121.862C139.205 121.835 139.557 121.671 139.822 121.402C140.087 121.133 140.248 120.776 140.276 120.396C140.252 120.015 140.093 119.656 139.826 119.386C139.56 119.116 139.206 118.954 138.831 118.93H87.9061C87.5519 118.972 87.2253 119.145 86.9882 119.415C86.7512 119.685 86.6202 120.034 86.6202 120.396C86.6202 120.758 86.7512 121.107 86.9882 121.378C87.2253 121.648 87.5519 121.82 87.9061 121.862H138.831ZM138.831 131.756C139.676 131.756 140.158 131.267 140.276 130.29C140.27 130.107 140.227 129.928 140.15 129.762C140.073 129.597 139.963 129.449 139.828 129.329C139.692 129.208 139.534 129.117 139.362 129.061C139.191 129.005 139.01 128.985 138.831 129.003H87.9061C87.0706 129.003 86.648 129.462 86.648 130.38C86.648 131.297 87.0706 131.756 87.9061 131.756H138.831Z'
fill='#989DAE'
d='M14 20.5L19.5 26V80H40.5'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Rect
x={34}
y={26}
width={67}
height={82}
rx={2}
fill={theme.buttonBg}
/>
<Rect
x={27}
y={13}
width={70.3182}
height={91}
rx={2}
fill={theme.centerChannelBg}
/>
<Rect
x={27.5}
y={13.5}
width={69.3182}
height={90}
rx={1.5}
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Path
d='M130.525 47.8298L150.92 68.5346H134.85C133.713 68.5643 132.611 68.1378 131.783 67.3477C131.358 66.9357 131.024 66.4358 130.805 65.8818C130.587 65.3278 130.488 64.7325 130.515 64.1363L130.525 47.8298Z'
fill='#BABEC9'
d='M37 22H49'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
opacity='0.4'
d='M102.407 37.508C97.653 32.6931 91.6526 30.2132 84.4183 30.0801C77.317 30.2132 71.3529 32.6811 66.526 37.508C61.7112 42.3349 59.2312 48.299 59.0981 55.4003C59.2312 62.6346 61.6991 68.6229 66.526 73.3893C71.3529 78.1437 77.317 80.6599 84.4183 80.9019C91.6526 80.6478 97.6409 78.1437 102.407 73.3893C107.162 68.6229 109.666 62.6225 109.92 55.3882C109.666 48.2869 107.162 42.3228 102.407 37.508Z'
fill='white'
d='M36 68H69'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M61.1129 50.8816C63.2645 43.89 67.3379 38.6565 73.3391 35.1917C79.3403 31.727 85.9093 30.816 93.0401 32.4484C96.9394 33.4443 100.337 35.1659 103.26 37.6111C99.9912 34.044 95.8452 31.5739 90.8322 30.1948C83.7015 28.5624 77.1001 29.492 71.0449 32.9879C64.9898 36.4839 60.884 41.7361 58.7324 48.7277C57.4095 53.7648 57.4756 58.5904 58.9414 63.1982C60.3965 67.8123 63.0084 71.6882 66.7819 74.8091C63.9488 71.7216 61.9993 68.0958 60.9383 63.9149C59.888 59.7278 59.9467 55.3925 61.1129 50.8816Z'
fill='black'
fillOpacity='0.4'
d='M36 86H75'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M53.24 53.4287C53.7476 45.9235 56.7935 39.3323 62.3654 33.6553C68.7108 27.6054 76.0353 24.5745 84.3388 24.5745C92.6423 24.5745 99.9547 27.6054 106.3 33.6553C112.38 39.9698 115.426 47.2465 115.426 55.5095C115.426 63.7725 112.38 71.0612 106.3 77.3637C100.474 82.9204 93.8147 85.9153 86.3331 86.3483C78.8515 86.7933 71.9501 84.7366 65.6046 80.2022L60.8546 84.929L54.775 78.8791L59.525 74.1523C54.8354 67.8498 52.7445 60.9339 53.24 53.4287ZM66.366 73.2983C71.1886 78.0252 77.1473 80.5269 84.2421 80.7675C91.4699 80.5149 97.4528 78.0252 102.215 73.2983C106.965 68.5715 109.467 62.6058 109.721 55.4133C109.467 48.3531 106.965 42.4234 102.215 37.6244C97.4649 32.8374 91.4699 30.3718 84.2421 30.2395C77.1473 30.3718 71.1886 32.8254 66.366 37.6244C61.5556 42.4234 59.0778 48.3531 58.9449 55.4133C59.0778 62.6058 61.5435 68.5715 66.366 73.2983Z'
fill='#BABEC9'
d='M37 27H59'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M33.7979 113.687C35.3653 114.135 36.5259 113.978 37.2797 113.215L61.9397 86.1514C62.6935 85.3885 63.0045 84.4077 62.8849 83.1968C62.7652 81.9859 62.0114 80.6296 60.6235 79.1039C59.1159 77.7114 57.7758 76.9122 56.5793 76.7184C55.3828 76.5247 54.4136 76.8758 53.6598 77.7719L26.7385 102.729C25.9847 103.492 25.8651 104.63 26.3676 106.156C26.8701 107.681 27.8154 109.207 29.1913 110.733C30.687 112.259 32.2305 113.239 33.7979 113.687Z'
fill='#FFBC1F'
d='M36 74H87'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M31.9929 97.8425L42.0738 108.007L54.2274 94.6662L45.3132 85.5606L31.9929 97.8425Z'
fill='#7A5600'
d='M36 92H87'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M37 33H46'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M36 80H55'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M48 33H57'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M60 80H72'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Rect
x={57}
y={43}
width={30}
height={16}
rx={1}
fill={theme.centerChannelColor}
fillOpacity={0.32}
/>
<G clipPath='url(#clip0_4210_65740)'>
<Path
d='M44.0003 51.0001L51.867 52.4611C52.665 48.1187 49.7882 43.9429 45.4448 43.1362C41.0993 42.3295 36.9296 45.1946 36.1337 49.5391C35.3357 53.8815 38.2125 58.0572 42.5559 58.8639C43.869 59.1078 45.166 59.0163 46.3599 58.6485L44.0003 51.0001Z'
fill={theme.centerChannelBg}
/>
<Path
d='M46.3599 58.6485L51.867 52.4611C52.665 48.1187 49.7882 43.9429 45.4448 43.1362C41.0993 42.3295 36.9316 45.1946 36.1337 49.5391C35.3357 53.8815 38.2125 58.0572 42.5559 58.8639C43.869 59.1078 45.166 59.0163 46.3599 58.6485Z'
fill={theme.centerChannelColor}
fillOpacity={0.32}
/>
<Path
d='M46.3596 58.6485C49.1131 57.8011 51.3111 55.4907 51.8667 52.461L44 51L46.3596 58.6485Z'
fill={theme.buttonBg}
/>
<Path
d='M46.62 53.7927C48.1539 52.3373 48.2244 49.9066 46.7774 48.3638C45.3304 46.8209 42.9139 46.75 41.3799 48.2055C39.846 49.6609 39.7756 52.0916 41.2226 53.6344C42.6696 55.1773 45.0861 55.2482 46.62 53.7927Z'
fill={theme.centerChannelBg}
/>
</G>
<Circle
cx={97.8574}
cy={17.8576}
r={17.8576}
fill={theme.centerChannelBg}
/>
<Circle
cx={97.8574}
cy={17.8576}
r={17.1433}
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeWidth={1.42861}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Circle
cx={97.8574}
cy={17.8576}
r={17.1433}
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeWidth={1.42861}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M85 19C85 25.6274 90.3726 31 97 31'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeWidth={1.42861}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Line
x1={110.768}
y1={30.8945}
x2={119.5}
y2={39.6265}
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeWidth={1.42861}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Circle
cx={11.5}
cy={42.5}
r={2.5}
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Circle
cx={12.5}
cy={18.5}
r={2.5}
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Path
d='M119 46.5V68H91.5'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M88 68H82'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
<Path
d='M79 68H73'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
<Defs>
<ClipPath id='clip0_4210_65740'>
<Rect
width={16}
height={16}
fill={theme.centerChannelBg}
x={36}
y={43}
/>
</ClipPath>
</Defs>
</Svg>
);
}

170
app/components/no_results_with_term/search_illustration.tsx
View file

@ -2,46 +2,148 @@
// See LICENSE.txt for license information.
import React from 'react';
import Svg, {Ellipse, Path} from 'react-native-svg';
import Svg, {Circle, ClipPath, Defs, G, Path, Rect} from 'react-native-svg';
import {useTheme} from '@context/theme';
function SearchIllustration() {
const theme = useTheme();
return (
<Svg
width={140}
height={149}
viewBox='0 0 140 149'
width='123'
height='110'
viewBox='0 0 123 110'
fill='none'
>
<Ellipse
cx={70}
cy={122.5}
rx={45}
ry={3}
fill='#000'
fillOpacity={0.06}
/>
<Path
opacity={0.4}
d='M37.593 38.008c4.754-4.815 10.754-7.295 17.989-7.428 7.101.133 13.065 2.601 17.892 7.428 4.815 4.827 7.295 10.791 7.428 17.892-.133 7.235-2.601 13.223-7.428 17.99-4.827 4.754-10.791 7.27-17.892 7.512-7.235-.254-13.223-2.758-17.99-7.513-4.754-4.766-7.258-10.766-7.512-18 .254-7.102 2.758-13.066 7.513-17.881z'
fill='#fff'
/>
<Path
d='M78.887 51.382c-2.152-6.992-6.225-12.225-12.226-15.69-6.001-3.465-12.57-4.376-19.701-2.744-3.9.996-7.297 2.718-10.22 5.163 3.269-3.567 7.415-6.037 12.428-7.416 7.13-1.633 13.732-.703 19.787 2.793s10.16 8.748 12.313 15.74c1.322 5.037 1.256 9.862-.21 14.47-1.455 4.614-4.067 8.49-7.84 11.611 2.833-3.087 4.783-6.713 5.844-10.894 1.05-4.187.991-8.523-.175-13.033z'
fill='#000'
fillOpacity={0.4}
/>
<Path
d='M86.76 53.929c-.508-7.506-3.554-14.097-9.126-19.774-6.345-6.05-13.67-9.08-21.973-9.08-8.303 0-15.616 3.03-21.961 9.08-6.08 6.315-9.126 13.591-9.126 21.855 0 8.262 3.046 15.551 9.126 21.854 5.825 5.556 12.485 8.551 19.967 8.984 7.481.445 14.383-1.611 20.728-6.146l4.75 4.727 6.08-6.05-4.75-4.727c4.69-6.302 6.78-13.218 6.285-20.723zm-13.126 19.87c-4.823 4.726-10.782 7.228-17.876 7.468-7.228-.252-13.211-2.742-17.973-7.469-4.75-4.727-7.252-10.692-7.506-17.885.254-7.06 2.756-12.99 7.506-17.789 4.75-4.787 10.745-7.252 17.973-7.385 7.094.133 13.053 2.586 17.876 7.385 4.81 4.8 7.288 10.73 7.42 17.79-.132 7.192-2.598 13.157-7.42 17.884z'
fill='#BABEC9'
/>
<Path
d='M106.202 114.187c-1.568.448-2.728.291-3.482-.472L78.06 86.651c-.754-.763-1.065-1.743-.945-2.954s.873-2.567 2.261-4.093c1.508-1.393 2.848-2.192 4.044-2.386 1.197-.193 2.166.158 2.92 1.054l26.921 24.957c.754.763.874 1.901.371 3.427-.502 1.525-1.448 3.051-2.824 4.577-1.495 1.526-3.039 2.506-4.606 2.954z'
fill='#FFBC1F'
/>
<Path
d='M108.007 98.343l-10.08 10.164-12.155-13.34 8.915-9.106 13.32 12.281z'
fill='#7A5600'
/>
<G clipPath='url(#clip0_4212_116720)'>
<Rect
x={0.255005}
y={32}
width={107}
height={31}
rx={3.75}
fill={theme.buttonBg}
fillOpacity={0.12}
/>
<Rect
x={46.255}
y={0}
width={76}
height={27}
rx={3.75}
fill={theme.buttonBg}
fillOpacity={0.12}
/>
<Rect
x={46.255}
y={67}
width={76}
height={27}
rx={3.75}
fill={theme.buttonBg}
fillOpacity={0.12}
/>
<Path
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={theme.centerChannelColor}
strokeOpacity={0.48}
/>
<Path
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={theme.centerChannelColor}
strokeOpacity={0.48}
/>
<Rect
x={89.8878}
y={69.3516}
width={33.9752}
height={7.45395}
rx={1}
transform='rotate(45 89.8878 69.3516)'
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Rect
x={89.8878}
y={70.0587}
width={32.9752}
height={6.45395}
rx={0.5}
transform='rotate(45 89.8878 70.0587)'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Path
d='M62.5706 11.2232C72.1732 11.1625 80.6832 14.6952 88.0764 21.8213C95.0689 29.0809 98.5773 37.5423 98.5773 47.2299C98.5652 56.9053 95.0689 65.3789 88.0764 72.6385C80.6832 79.7646 72.1975 83.2973 62.5706 83.2366C52.9559 83.1637 44.4459 79.7039 37.077 72.8206C30.0724 65.3061 26.5761 56.7839 26.564 47.2299C26.5761 37.6759 30.0845 29.1416 37.0892 21.627C44.4702 14.7559 52.968 11.2839 62.5706 11.2232Z'
fill={theme.centerChannelBg}
/>
<Path
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={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Path
fillRule='evenodd'
clipRule='evenodd'
d='M88.076 21.8213C80.6829 14.6952 72.1729 11.1625 62.5703 11.2232C52.9677 11.2839 44.4698 14.7559 37.0888 21.627C30.0841 29.1416 26.5757 37.6759 26.5636 47.2299C26.5757 56.7839 30.072 65.3061 37.0767 72.8206C44.4455 79.7039 52.9555 83.1638 62.5703 83.2366C72.1971 83.2973 80.6829 79.7646 88.076 72.6385C95.0685 65.3789 98.5648 56.9053 98.577 47.2299C98.577 37.5423 95.0685 29.0809 88.076 21.8213ZM84.5637 25.3086C78.1852 19.1606 70.8432 16.1128 62.5586 16.1652C54.274 16.2175 46.9424 19.213 40.5745 25.1411C34.5312 31.6242 31.5043 38.9872 31.4939 47.2299C31.5043 55.4726 34.5207 62.8251 40.564 69.3083C46.9215 75.2468 54.2635 78.2318 62.5586 78.2947C70.8642 78.347 78.1852 75.2992 84.5637 69.1512C90.5965 62.888 93.6129 55.5774 93.6233 47.2299C93.6233 38.872 90.5965 31.5719 84.5637 25.3086Z'
fill={theme.centerChannelBg}
/>
<Path
fillRule='evenodd'
clipRule='evenodd'
d='M88.076 21.8213C80.6828 14.6952 72.1728 11.1625 62.5702 11.2232C52.9676 11.2839 44.4697 14.7559 37.0887 21.627C30.0841 29.1416 26.5757 37.6759 26.5635 47.2299C26.5757 56.7839 30.0719 65.3061 37.0766 72.8206C44.4455 79.7039 52.9555 83.1638 62.5702 83.2366C72.1971 83.2973 80.6828 79.7646 88.076 72.6385C95.0685 65.3789 98.5648 56.9053 98.5769 47.2299C98.5769 37.5423 95.0685 29.0809 88.076 21.8213ZM84.5636 25.3086C78.1852 19.1606 70.8432 16.1128 62.5585 16.1652C54.2739 16.2175 46.9424 19.213 40.5744 25.1411C34.5312 31.6242 31.5043 38.9872 31.4938 47.2299C31.5043 55.4726 34.5207 62.8251 40.564 69.3083C46.9214 75.2468 54.2634 78.2318 62.5585 78.2947C70.8641 78.347 78.1852 75.2992 84.5636 69.1512C90.5964 62.888 93.6128 55.5774 93.6233 47.2299C93.6233 38.872 90.5964 31.5719 84.5636 25.3086Z'
fill={theme.centerChannelColor}
fillOpacity={0.8}
/>
<Path
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={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Circle
cx={51.255}
cy={36}
r={9}
fill={theme.centerChannelColor}
fillOpacity={0.32}
/>
<Path
d='M43.255 56H85.255'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
<Path
d='M43.255 63H65.255'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
<Path
d='M43.255 50H60.255'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
<Path
d='M65.255 50H80.255'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
/>
</G>
<Defs>
<ClipPath id='clip0_4212_116720'>
<Rect
width={122}
height={99}
fill='white'
x={0.255005}
y={0}
/>
</ClipPath>
</Defs>
</Svg>
);
}

504
app/components/user_list/__snapshots__/index.test.tsx.snap
View file

@ -65,11 +65,11 @@ exports[`components/channel_list_row should show no results 1`] = `
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={149}
bbWidth={140}
bbHeight="110"
bbWidth="123"
fill="none"
focusable={false}
height={149}
height="110"
meetOrSlice={0}
minX={0}
minY={0}
@ -81,14 +81,14 @@ exports[`components/channel_list_row should show no results 1`] = `
},
{
"flex": 0,
"height": 149,
"width": 140,
"height": 110,
"width": 123,
},
]
}
vbHeight={149}
vbWidth={140}
width={140}
vbHeight={110}
vbWidth={123}
width="123"
>
<RNSVGGroup
fill={null}
@ -98,98 +98,423 @@ exports[`components/channel_list_row should show no results 1`] = `
]
}
>
<RNSVGEllipse
cx={70}
cy={122.5}
<RNSVGGroup
clipPath="clip0_4212_116720"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
fillOpacity={0.06}
propList={
[
"fill",
"fillOpacity",
]
}
rx={45}
ry={3}
/>
<RNSVGPath
d="M37.593 38.008c4.754-4.815 10.754-7.295 17.989-7.428 7.101.133 13.065 2.601 17.892 7.428 4.815 4.827 7.295 10.791 7.428 17.892-.133 7.235-2.601 13.223-7.428 17.99-4.827 4.754-10.791 7.27-17.892 7.512-7.235-.254-13.223-2.758-17.99-7.513-4.754-4.766-7.258-10.766-7.512-18 .254-7.102 2.758-13.066 7.513-17.881z"
fill={
{
"payload": 4294967295,
"type": 0,
>
<RNSVGRect
fill={
{
"payload": 4280047833,
"type": 0,
}
}
}
opacity={0.4}
propList={
[
"fill",
]
}
/>
<RNSVGPath
d="M78.887 51.382c-2.152-6.992-6.225-12.225-12.226-15.69-6.001-3.465-12.57-4.376-19.701-2.744-3.9.996-7.297 2.718-10.22 5.163 3.269-3.567 7.415-6.037 12.428-7.416 7.13-1.633 13.732-.703 19.787 2.793s10.16 8.748 12.313 15.74c1.322 5.037 1.256 9.862-.21 14.47-1.455 4.614-4.067 8.49-7.84 11.611 2.833-3.087 4.783-6.713 5.844-10.894 1.05-4.187.991-8.523-.175-13.033z"
fill={
{
"payload": 4278190080,
"type": 0,
fillOpacity={0.12}
height={31}
propList={
[
"fill",
"fillOpacity",
]
}
}
fillOpacity={0.4}
propList={
[
"fill",
"fillOpacity",
]
}
/>
<RNSVGPath
d="M86.76 53.929c-.508-7.506-3.554-14.097-9.126-19.774-6.345-6.05-13.67-9.08-21.973-9.08-8.303 0-15.616 3.03-21.961 9.08-6.08 6.315-9.126 13.591-9.126 21.855 0 8.262 3.046 15.551 9.126 21.854 5.825 5.556 12.485 8.551 19.967 8.984 7.481.445 14.383-1.611 20.728-6.146l4.75 4.727 6.08-6.05-4.75-4.727c4.69-6.302 6.78-13.218 6.285-20.723zm-13.126 19.87c-4.823 4.726-10.782 7.228-17.876 7.468-7.228-.252-13.211-2.742-17.973-7.469-4.75-4.727-7.252-10.692-7.506-17.885.254-7.06 2.756-12.99 7.506-17.789 4.75-4.787 10.745-7.252 17.973-7.385 7.094.133 13.053 2.586 17.876 7.385 4.81 4.8 7.288 10.73 7.42 17.79-.132 7.192-2.598 13.157-7.42 17.884z"
fill={
{
"payload": 4290428617,
"type": 0,
rx={3.75}
width={107}
x={0.255005}
y={32}
/>
<RNSVGRect
fill={
{
"payload": 4280047833,
"type": 0,
}
}
}
propList={
[
"fill",
]
}
/>
<RNSVGPath
d="M106.202 114.187c-1.568.448-2.728.291-3.482-.472L78.06 86.651c-.754-.763-1.065-1.743-.945-2.954s.873-2.567 2.261-4.093c1.508-1.393 2.848-2.192 4.044-2.386 1.197-.193 2.166.158 2.92 1.054l26.921 24.957c.754.763.874 1.901.371 3.427-.502 1.525-1.448 3.051-2.824 4.577-1.495 1.526-3.039 2.506-4.606 2.954z"
fill={
{
"payload": 4294949919,
"type": 0,
fillOpacity={0.12}
height={27}
propList={
[
"fill",
"fillOpacity",
]
}
}
propList={
[
"fill",
]
}
/>
<RNSVGPath
d="M108.007 98.343l-10.08 10.164-12.155-13.34 8.915-9.106 13.32 12.281z"
fill={
{
"payload": 4286207488,
"type": 0,
rx={3.75}
width={76}
x={46.255}
y={0}
/>
<RNSVGRect
fill={
{
"payload": 4280047833,
"type": 0,
}
}
}
propList={
[
"fill",
]
}
/>
fillOpacity={0.12}
height={27}
propList={
[
"fill",
"fillOpacity",
]
}
rx={3.75}
width={76}
x={46.255}
y={67}
/>
<RNSVGPath
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"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeOpacity={0.48}
/>
<RNSVGPath
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"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeOpacity={0.48}
/>
<RNSVGRect
fill={
{
"payload": 4282336080,
"type": 0,
}
}
fillOpacity={0.48}
height={7.45395}
matrix={
[
0.7071067811865476,
0.7071067811865475,
-0.7071067811865475,
0.7071067811865476,
75.36651372019682,
-43.24765957207711,
]
}
propList={
[
"fill",
"fillOpacity",
]
}
rx={1}
width={33.9752}
x={89.8878}
y={69.3516}
/>
<RNSVGRect
fill={
{
"payload": 4278190080,
"type": 0,
}
}
height={6.45395}
matrix={
[
0.7071067811865476,
0.7071067811865475,
-0.7071067811865475,
0.7071067811865476,
75.86650892517383,
-43.04055477705411,
]
}
propList={
[
"stroke",
"strokeOpacity",
]
}
rx={0.5}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeOpacity={0.8}
width={32.9752}
x={89.8878}
y={70.0587}
/>
<RNSVGPath
d="M62.5706 11.2232C72.1732 11.1625 80.6832 14.6952 88.0764 21.8213C95.0689 29.0809 98.5773 37.5423 98.5773 47.2299C98.5652 56.9053 95.0689 65.3789 88.0764 72.6385C80.6832 79.7646 72.1975 83.2973 62.5706 83.2366C52.9559 83.1637 44.4459 79.7039 37.077 72.8206C30.0724 65.3061 26.5761 56.7839 26.564 47.2299C26.5761 37.6759 30.0845 29.1416 37.0892 21.627C44.4702 14.7559 52.968 11.2839 62.5706 11.2232Z"
fill={
{
"payload": 4294967295,
"type": 0,
}
}
propList={
[
"fill",
]
}
/>
<RNSVGPath
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"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeOpacity={0.8}
/>
<RNSVGPath
clipRule={0}
d="M88.076 21.8213C80.6829 14.6952 72.1729 11.1625 62.5703 11.2232C52.9677 11.2839 44.4698 14.7559 37.0888 21.627C30.0841 29.1416 26.5757 37.6759 26.5636 47.2299C26.5757 56.7839 30.072 65.3061 37.0767 72.8206C44.4455 79.7039 52.9555 83.1638 62.5703 83.2366C72.1971 83.2973 80.6829 79.7646 88.076 72.6385C95.0685 65.3789 98.5648 56.9053 98.577 47.2299C98.577 37.5423 95.0685 29.0809 88.076 21.8213ZM84.5637 25.3086C78.1852 19.1606 70.8432 16.1128 62.5586 16.1652C54.274 16.2175 46.9424 19.213 40.5745 25.1411C34.5312 31.6242 31.5043 38.9872 31.4939 47.2299C31.5043 55.4726 34.5207 62.8251 40.564 69.3083C46.9215 75.2468 54.2635 78.2318 62.5586 78.2947C70.8642 78.347 78.1852 75.2992 84.5637 69.1512C90.5965 62.888 93.6129 55.5774 93.6233 47.2299C93.6233 38.872 90.5965 31.5719 84.5637 25.3086Z"
fill={
{
"payload": 4294967295,
"type": 0,
}
}
fillRule={0}
propList={
[
"fill",
"fillRule",
]
}
/>
<RNSVGPath
clipRule={0}
d="M88.076 21.8213C80.6828 14.6952 72.1728 11.1625 62.5702 11.2232C52.9676 11.2839 44.4697 14.7559 37.0887 21.627C30.0841 29.1416 26.5757 37.6759 26.5635 47.2299C26.5757 56.7839 30.0719 65.3061 37.0766 72.8206C44.4455 79.7039 52.9555 83.1638 62.5702 83.2366C72.1971 83.2973 80.6828 79.7646 88.076 72.6385C95.0685 65.3789 98.5648 56.9053 98.5769 47.2299C98.5769 37.5423 95.0685 29.0809 88.076 21.8213ZM84.5636 25.3086C78.1852 19.1606 70.8432 16.1128 62.5585 16.1652C54.2739 16.2175 46.9424 19.213 40.5744 25.1411C34.5312 31.6242 31.5043 38.9872 31.4938 47.2299C31.5043 55.4726 34.5207 62.8251 40.564 69.3083C46.9214 75.2468 54.2634 78.2318 62.5585 78.2947C70.8641 78.347 78.1852 75.2992 84.5636 69.1512C90.5964 62.888 93.6128 55.5774 93.6233 47.2299C93.6233 38.872 90.5964 31.5719 84.5636 25.3086Z"
fill={
{
"payload": 4282336080,
"type": 0,
}
}
fillOpacity={0.8}
fillRule={0}
propList={
[
"fill",
"fillOpacity",
"fillRule",
]
}
/>
<RNSVGPath
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"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeOpacity={0.8}
/>
<RNSVGCircle
cx={51.255}
cy={36}
fill={
{
"payload": 4282336080,
"type": 0,
}
}
fillOpacity={0.32}
propList={
[
"fill",
"fillOpacity",
]
}
r={9}
/>
<RNSVGPath
d="M43.255 56H85.255"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
"strokeLinecap",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeLinecap={1}
strokeOpacity={0.8}
/>
<RNSVGPath
d="M43.255 63H65.255"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
"strokeLinecap",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeLinecap={1}
strokeOpacity={0.8}
/>
<RNSVGPath
d="M43.255 50H60.255"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
"strokeLinecap",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeLinecap={1}
strokeOpacity={0.8}
/>
<RNSVGPath
d="M65.255 50H80.255"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
"strokeOpacity",
"strokeLinecap",
]
}
stroke={
{
"payload": 4282336080,
"type": 0,
}
}
strokeLinecap={1}
strokeOpacity={0.8}
/>
</RNSVGGroup>
<RNSVGDefs>
<RNSVGClipPath
fill={
{
"payload": 4278190080,
"type": 0,
}
}
name="clip0_4212_116720"
>
<RNSVGRect
fill={
{
"payload": 4294967295,
"type": 0,
}
}
height={99}
propList={
[
"fill",
]
}
width={122}
x={0.255005}
y={0}
/>
</RNSVGClipPath>
</RNSVGDefs>
</RNSVGGroup>
</RNSVGSvgView>
<Text
@ -200,6 +525,7 @@ exports[`components/channel_list_row should show no results 1`] = `
"fontSize": 20,
"fontWeight": "600",
"lineHeight": 28,
"marginTop": 32,
"textAlign": "center",
}
}

403
app/screens/channel/channel_post_list/intro/illustration/private.tsx
View file

File diff suppressed because one or more lines are too long

343
app/screens/channel/channel_post_list/intro/illustration/public.tsx
View file

@ -1,20 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import Svg, {
G,
Path,
Mask,
Ellipse,
Defs,
Pattern,
Use,
Image,
LinearGradient,
Stop,
ClipPath,
} from 'react-native-svg';
import React from 'react';
import {Circle, ClipPath, Defs, G, Path, Rect, Svg} from 'react-native-svg';
import {changeOpacity} from '@utils/theme';
type Props = {
theme: Theme;
@ -22,218 +12,211 @@ type Props = {
const PublicChannelIllustration = ({theme}: Props) => (
<Svg
width={152}
height={149}
viewBox='0 0 152 149'
width={130}
height={102}
viewBox='0 0 130 102'
fill='none'
>
<G clipPath='url(#clip0_516_33521)'>
<G clipPath='url(#clip0_1_2)'>
<Path
d='M136.746 82.978a48.267 48.267 0 0010.837-15.674 48.123 48.123 0 003.916-18.626 48.138 48.138 0 00-3.615-18.686A48.289 48.289 0 00137.3 14.147a48.501 48.501 0 00-15.909-10.542 48.666 48.666 0 00-37.468.292 48.497 48.497 0 00-15.741 10.79L-22.15 104.63l68.577 68.291 90.319-89.944z'
fill='url(#paint0_linear_516_33521)'
fillOpacity={0.12}
d='M2.50001 16L2.5 31L127.5 31L127.5 75L66 75'
stroke={changeOpacity(theme.centerChannelColor, 0.32)}
strokeLinecap='round'
/>
<Path
d='M76.67 40.442c-2.049 3.408-8.654.681-9.904 7.157 2.432 0 11.4 1.234 11.4 1.234l-1.495-8.391z'
fill='#251204'
d='M2.5 69L2.5 42L29 42'
stroke={changeOpacity(theme.centerChannelColor, 0.32)}
strokeLinecap='round'
/>
<Path
d='M66.472 74.38c-2.89 5.119-26.326 15.22-20.739 41.265 3.956 18.452 12.98 25.813 10.732 28.894-1.667 2.25-2.979 4.99.983 1.752 4.782-3.892 6.483-1.309 3.382-10.688-2.958-8.929-5.56-32.718 9.215-41.156C84.82 86.008 89.642 81.789 82.34 71.428c-2.67-3.803-15.868 2.952-15.868 2.952z'
fill='#AD831F'
d='M18.5 70.5L18.5 56.5L106 56.5'
stroke={changeOpacity(theme.centerChannelColor, 0.32)}
strokeLinecap='round'
/>
<Circle
cx={2.5}
cy={13.5}
r={2.5}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={2.5}
cy={71.5}
r={2.5}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={18.5}
cy={71.5}
r={2.5}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={71}
cy={59}
r={43}
fill={changeOpacity(theme.centerChannelColor, 0.12)}
/>
<Path
d='M54.71 138.159c.491-.136 4.672-1.458 6.257-2.126 2.91 8.861 1.174 6.427-3.518 10.258-3.962 3.238-2.65.498-.984-1.752.902-1.254-.027-3.23-1.756-6.38z'
fill={theme.buttonBg}
d='M110.748 91.5258L119 100V56C119 54.8954 118.105 54 117 54H76.0005C74.8959 54 74.0005 54.8954 74.0005 56V88.9211C74.0005 90.0256 74.8959 90.9211 76.0005 90.9211H109.316C109.855 90.9211 110.372 91.1391 110.748 91.5258Z'
fill={'#28427B'}
/>
<Circle
opacity={0.48}
cx={86.831}
cy={65.831}
r={5.83099}
fill={theme.buttonColor}
/>
<Path
d='M83.433 48.26l.376-7.573 1.018-2.794c-.629-2.781-2.248-4.09-3.156-4.335-2.05-.505-3.21-.587-4.33.286-.616.525-1.565 2.924-1.975 4.805-.219 1.016-.683 1.827 0 2.454.468.367.964.697 1.482.989l.11 4.77 6.475 1.398z'
fill='#AD831F'
opacity={0.4}
d='M96 64H112'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M76.67 35.766a8.726 8.726 0 00-1.85 1.213c-.233.682 1.564 1.363 1.564 1.363l.287-2.576z'
fill='#AD831F'
opacity={0.4}
d='M82 79H103.38'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M79.034 42.718a4.953 4.953 0 01-2.159-.606c-.239-.15.438.443.684.579a2.21 2.21 0 001.065.395c.287 0 .697-.347.41-.368z'
fill='#8B6918'
opacity={0.4}
d='M82 83H96.2535'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M92.375 77.045c1.366 18.867 1.838 44.176 18.888 48.395 17.05 4.219 16.394 2.133 16.394 8.459 0 6.325-1.319 5.391-2.097 1.363-.998-5.208-19.625 4.09-32.263-6.298C80.66 118.576 75.325 98.495 73.4 77.897c-1.353-14.587 18.976-.852 18.976-.852z'
fill='#AD831F'
opacity={0.4}
d='M96 68H110'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M120.662 127.54c7.377 1.561 7.002 1.513 7.002 6.332 0 6.325-1.319 5.392-2.098 1.363-.348-1.806-2.821-1.867-6.427-1.608a29.021 29.021 0 001.523-6.087z'
fill={theme.buttonBg}
opacity={0.4}
d='M82 75H93.0141'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M34.025 49.835c.397-.682 3.703-.79 7.59 2.358 3.886 3.15 10.205 7.069 17.234-1.452 6.305-7.654 10.499-4.771 16.886-4.519 2.268.286 11.421 1.452 13.757 1.663 3.416-.061 9.243 1.561 13.273-7.811 1.544-3.592 3.142-8.759 5.362-12.27 1.523-2.399 3.019-3.864 4.433-4.45 1.046-.43.465.395-.341 1.588-.54.811.061.715-.239 1.745-.178.6-.26.954-.458 1.472-.17.466-.312.942-.423 1.425-.089.368-.178.756-.253 1.172l-.062.286c-.819 4.486-1.263 11.063-1.878 13.708-2.145 9.1-6.831 14.47-15.39 16.359a152.69 152.69 0 01-.267 4.253c-1.536 21.471.65 15.677-13.34 15.677S62.196 89.41 64.3 77.406c.99-5.623.683-12.16 1.77-18.826-2.132 1.322-5.575 4.035-9.031 4.887-10.759 2.631-20.684-11.376-20.78-12.27-.15-1.376-2.623-.66-2.234-1.362z'
fill='#AD831F'
opacity={0.4}
d='M95.6064 75H107.268'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M63.057 61.722c1.427-.892 2.015-2.528 3.012-3.142a75.26 75.26 0 00-.8 7.675c-.115 1.82-.204 3.613-.327 5.351a56.342 56.342 0 01-.642 5.808c-2.104 11.996 1.619 3.64 15.609 3.619 12.247 0 12.097 4.45 12.903-8.861v-.089c.041-.572.075-1.172.116-1.806.09-1.459.192-3.088.321-4.922.11-1.554.205-2.965.267-4.253 3.75-.831 6.762-1.104 9.146-3.306-1.229-3.524-2.807-8.125-5.164-11.049-2.52 1.452-5.089 1.207-7.097 1.139h-.909l-1.209-.123c-.88-.096-2.049-.232-3.285-.382-.684 3.49-6.107 2.972-7.897 1.752a7.208 7.208 0 01-2.452-2.979 48.347 48.347 0 01-2.186-.252c-.704-.095-1.319-.184-1.954-.26-3.846-.463-7.234-.272-11.66 5.1-.273.333-.547.633-.813.927a88.533 88.533 0 005.02 10.053z'
d='M28.605 67.5638L15 81V12C15 10.8954 15.8954 10 17 10H83C84.1046 10 85 10.8954 85 12V64.9868C85 66.0914 84.1046 66.9868 83 66.9868H30.0103C29.4842 66.9868 28.9793 67.1941 28.605 67.5638Z'
fill={theme.centerChannelBg}
/>
<Path
d='M63.057 61.722c1.427-.892 2.015-2.528 3.012-3.142a75.26 75.26 0 00-.8 7.675c-.115 1.82-.204 3.613-.327 5.351a56.315 56.315 0 01-.642 5.808c-2.104 11.996 1.619 3.64 15.609 3.619 12.247 0 12.097 4.45 12.903-8.861v-.089c.041-.573.075-1.172.116-1.806.09-1.459.192-3.088.321-4.922.11-1.554.205-2.965.267-4.253 3.75-.831 6.762-1.104 9.146-3.306-1.229-3.524-2.807-8.125-5.164-11.049-2.52 1.452-5.089 1.207-7.097 1.139h-.909l-1.209-.123c-.88-.096-2.049-.232-3.285-.382-.684 3.49-6.107 2.972-7.897 1.752a7.209 7.209 0 01-2.452-2.979 48.475 48.475 0 01-2.186-.252c-.704-.095-1.319-.184-1.954-.26-3.846-.463-7.234-.272-11.66 5.1-.273.333-.547.633-.813.927a88.533 88.533 0 005.02 10.053z'
fill={theme.centerChannelBg}
d='M28.2536 67.2081L15.5 79.8035V12C15.5 11.1716 16.1716 10.5 17 10.5H83C83.8284 10.5 84.5 11.1716 84.5 12V64.9868C84.5 65.8153 83.8284 66.4868 83 66.4868H30.0103C29.3527 66.4868 28.7215 66.746 28.2536 67.2081Z'
stroke={changeOpacity(theme.centerChannelColor, 0.8)}
/>
<Circle
cx={33}
cy={29}
r={9}
fill={changeOpacity(theme.centerChannelColor, 0.4)}
/>
<Path
d='M63.057 61.722c1.427-.892 2.015-2.528 3.012-3.142a75.26 75.26 0 00-.8 7.675c-.115 1.82-.204 3.613-.327 5.351a56.315 56.315 0 01-.642 5.808c-2.104 11.996 1.619 3.64 15.609 3.619 12.247 0 12.097 4.45 12.903-8.861v-.089c.041-.573.075-1.172.116-1.806.09-1.459.192-3.088.321-4.922.11-1.554.205-2.965.267-4.253 3.75-.831 6.762-1.104 9.146-3.306-1.229-3.524-2.807-8.125-5.164-11.049-2.52 1.452-5.089 1.207-7.097 1.139h-.909l-1.209-.123c-.88-.096-2.049-.232-3.285-.382-.684 3.49-6.107 2.972-7.897 1.752a7.209 7.209 0 01-2.452-2.979 48.475 48.475 0 01-2.186-.252c-.704-.095-1.319-.184-1.954-.26-3.846-.463-7.234-.272-11.66 5.1-.273.333-.547.633-.813.927a88.533 88.533 0 005.02 10.053z'
fill={theme.centerChannelColor}
fillOpacity={0.08}
d='M48 25H64'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Path
d='M53.179 86.888a62.887 62.887 0 009.065 10.19l.293.259a118.05 118.05 0 002.05 1.772c.275-.324.579-.623.908-.893l.3-.252c1.107-.927 2.692-2.045 4.27-3.156a147.865 147.865 0 015.178-3.408c.56 3.08 1.223 6.134 2.001 9.031l.103.389c.13.457.253.913.382 1.363a65.817 65.817 0 0015.288-2.12l.383-.109.785-.238c.09-.029.18-.051.273-.069a56.796 56.796 0 01-.273-1.956c0-.136 0-.266-.048-.402-.942-8.098-1.434-22.691-1.325-25.09v-.09c-.296-.24-.577-.5-.84-.776-.114-.118-.23-.241-.349-.368-2.547-2.85-3.804-6.987-4.535-9.509.252-5.576.772-8.534 3.313-13.544-.321 0-1.62-.088-2.118-.143a36.398 36.398 0 00-2.978 11.758c-4.782-.866-9.564-1.636-14.345-2.372a66.67 66.67 0 011.469-11.247c-.683-.088-1.319-.184-1.954-.259a56.21 56.21 0 00-1.298 12.733c-.273.681-.813 2.727-1.209 3.476a44.579 44.579 0 01-2.732 4.41c-.117 1.82-.205 3.613-.328 5.351-.123 1.738-.28 3.408-.526 5.037-2.37 2.127-6.203 4.908-9.85 8.718-.09.096-.185.191-.274.293-.341.382-.71.791-1.079 1.22z'
fill={theme.buttonBg}
d='M25 49H62'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Path
d='M83.495 75.688a2.463 2.463 0 001.51-.381c.594-.437.82-1.261.983-2.448.41-2.896.212-3.142-.867-4.505-.349-.436-.786-.981-1.325-1.779a14.019 14.019 0 01-1.182-2.045c-.683-1.445-.963-1.772-4.447-2.447-5.636-1.09-6.073-.763-7.712 1.404-.3.395-.635.839-1.06 1.363-2.506 2.959-2.526 3.334-2.602 4.724 0 .375-.047.838-.13 1.452-.122.873-.13 1.452.199 1.881.512.682 1.694.811 4.535 1.159 1.168.143 2.623.32 4.406.586 1.367.205 2.562.395 3.6.566 1.352.25 2.719.406 4.092.47zm-5.37-13.448v.19c3.416.682 3.54.934 4.168 2.236.344.741.748 1.453 1.209 2.127.553.811.99 1.363 1.366 1.806 1.045 1.31 1.175 1.48.792 4.206-.177 1.282-.403 1.875-.826 2.188-.738.539-2.261.286-5.308-.218a206.88 206.88 0 00-3.606-.566c-1.79-.266-3.245-.443-4.413-.586-2.569-.314-3.86-.477-4.27-1.009-.245-.32-.232-.825-.123-1.588.09-.627.11-1.104.13-1.486.075-1.288.089-1.629 2.514-4.492.43-.511.772-.96 1.066-1.363 1.502-1.977 1.776-2.338 7.33-1.261l-.028-.184z'
fill='#2D3039'
d='M25 55H47'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Path
d='M81.377 64.067c.143.296.307.58.492.852.137.211-.198.409-.341.198a6.58 6.58 0 01-.492-.853c-.11-.224.239-.422.341-.197zM82.457 66.03c.232.361.464.682.717 1.05.143.204-.192.402-.342.197a9.525 9.525 0 01-.683-1.05c-.191-.21.178-.408.308-.197zM84.164 68.347c.178.242.375.47.588.682.184.17-.096.45-.28.273a5.416 5.416 0 01-.588-.682c-.15-.198.123-.477.28-.273zM84.943 70.938c0-.253.376-.253.39 0 .02.26.02.522 0 .783 0 .253-.41.253-.39 0 .02-.26.02-.523 0-.783zM84.594 73.044c.041-.252.424-.143.376.102-.048.246-.11.682-.17 1.016-.062.334-.417.143-.376-.11l.17-1.008zM81.52 73.691c.5.137 1.01.233 1.524.287.246 0 .253.415 0 .388a10.03 10.03 0 01-1.626-.293.198.198 0 01-.134-.24.198.198 0 01.237-.142zM77.702 73.255c.5.032.996.091 1.49.177.252.041.143.416-.103.375a13.474 13.474 0 00-1.366-.157c-.274-.02-.274-.395-.02-.395zM73.966 72.826l1.366.17c.246 0 .246.423 0 .389l-1.366-.164c-.246-.034-.253-.43 0-.395zM70.263 72.444l1.148.13c.246 0 .253.422 0 .395l-1.148-.136c-.246-.028-.252-.416 0-.389zM68.296 71.551l.424.389c.184.17-.089.45-.28.28l-.424-.396c-.205-.17.069-.443.28-.273zM67.804 69.268c0-.245.424-.252.396 0-.047.453-.07.908-.068 1.363a.198.198 0 01-.321.116.198.198 0 01-.068-.116c-.008-.455.013-.91.061-1.363zM68.651 67.21l.396-.587c.137-.211.478 0 .335.198l-.39.586c-.143.211-.478.014-.34-.198zM78.358 63.03c.46.023.916.08 1.366.171.246.055.144.43-.102.382a7.119 7.119 0 00-1.257-.157c-.26-.02-.26-.395-.007-.395zM75.373 62.499c.435.02.869.068 1.298.143.252.04.143.416-.103.375a8.764 8.764 0 00-1.195-.123c-.246-.013-.246-.402 0-.395zM72.798 62.349c.3-.05.604-.073.908-.068a.198.198 0 01.162.194.198.198 0 01-.162.194 4.421 4.421 0 00-.799.062c-.253.034-.355-.341-.11-.382zM71.028 64.264l.458-.681c.143-.205.485 0 .335.198l-.458.681c-.157.205-.499.014-.335-.198zM69.894 66.242l.396-.524c.15-.198.492 0 .342.197l-.396.525c-.15.211-.492.02-.342-.198z'
fill='#2D3039'
d='M48 31H73'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Path
d='M86.104 57.857c1.496.41 1.735.103 1.544 2.148-.191 2.044 0 1.847-1.933 1.485-1.366-.265-1.086-.681-.854-1.963.232-1.281.41-1.895 1.243-1.67zM69.737 55.697c1.537.21 1.735-.13 1.817 1.922.082 2.051-.334 1.901-1.721 1.724-1.387-.177-1.161-.504-1.107-1.827.055-1.322.157-1.935 1.011-1.82z'
fill='#FFBC1F'
d='M25 43H42'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Path
d='M82.368 42.582s-1.654.982-.909 3.906c-2.008-2.986.629-7.082.629-7.082a.682.682 0 001.12 0c1.994-2.045.567-2.727 0-2.488a9.934 9.934 0 01-2.193.463c-1.161.191-2.295-1.683-2.295-1.683l.293.852a3.297 3.297 0 01-1.673-2.727c1.059-3.374 7.582-3.974 10.014 1.118 2.432 5.092 0 13.878 7.104 12.855-14.112 6.237-12.09-5.214-12.09-5.214z'
fill='#251204'
d='M46 43H64'
stroke={changeOpacity(theme.centerChannelColor, 0.4)}
strokeLinecap='round'
/>
<Circle
cx={78}
cy={19}
r={19}
fill={'#32539A'}
/>
<Mask
id='a'
style={{
maskType: 'alpha',
}}
maskUnits='userSpaceOnUse'
x={77}
y={31}
width={18}
height={19}
>
<Path
d='M82.368 42.583s-1.654.981-.909 3.905c-2.008-2.985.629-7.082.629-7.082a.682.682 0 00.876.215.682.682 0 00.244-.215c1.994-2.044.567-2.726 0-2.488a9.928 9.928 0 01-2.193.464c-1.161.19-2.295-1.684-2.295-1.684l.293.852a3.296 3.296 0 01-1.673-2.726c1.059-3.374 7.582-3.974 10.014 1.118 2.432 5.091 0 13.877 7.104 12.855-14.112 6.237-12.09-5.214-12.09-5.214z'
fill='#66320A'
/>
</Mask>
<G mask='url(#a)'>
<Path
transform='matrix(-1 0 0 1 94.604 31.044)'
fill='url(#pattern0)'
d='M0 0H17.2626V18.687H0z'
/>
</G>
<Path
d='M54.566 85.36c4.037 5.692 11.223 12.59 11.223 12.59M77.245 100.418c7.042.266 16.94-2.727 16.94-2.727'
stroke='#1E325C'
strokeWidth={0.58}
strokeMiterlimit={10}
d='M98 49L80 49'
stroke={changeOpacity(theme.centerChannelColor, 0.8)}
strokeLinecap='round'
strokeLinejoin='round'
/>
<G clipPath='url(#clip1_516_33521)'>
<Path
d='M42.952 9.718h25.591a3.546 3.546 0 012.529 1.046 3.6 3.6 0 011.054 2.542v16.396a3.626 3.626 0 01-1.054 2.542 3.57 3.57 0 01-2.529 1.046h-3.777v6.138l-5.665-6.138h-16.14a3.547 3.547 0 01-2.528-1.046 3.602 3.602 0 01-1.055-2.542V13.306a3.615 3.615 0 011.051-2.539 3.557 3.557 0 012.523-1.05z'
fill={theme.buttonBg}
/>
<Path
d='M59.102 33.29h-16.14a3.547 3.547 0 01-2.53-1.046 3.602 3.602 0 01-1.054-2.542v-9.954s1.127 9.205 1.33 10.015c.202.81.604 2.022 2.507 2.223 1.904.201 15.887 1.304 15.887 1.304z'
fill='#000'
fillOpacity={0.16}
/>
<Path
d='M64.489 19.16c-.456 0-.902.136-1.281.392a2.32 2.32 0 00-.85 1.043 2.341 2.341 0 00.5 2.533 2.299 2.299 0 002.513.503 2.31 2.31 0 001.034-.856 2.338 2.338 0 00-1.034-3.439 2.287 2.287 0 00-.882-.176zM55.748 19.16c-.456 0-.902.136-1.281.392a2.32 2.32 0 00-.85 1.043 2.342 2.342 0 00.5 2.533 2.3 2.3 0 002.513.503 2.31 2.31 0 001.034-.856 2.338 2.338 0 00-1.034-3.439 2.288 2.288 0 00-.882-.176zM47.016 19.16c-.456 0-.902.135-1.282.39a2.32 2.32 0 00-.85 1.043 2.342 2.342 0 00.498 2.533 2.288 2.288 0 002.513.505 2.309 2.309 0 001.035-.855 2.337 2.337 0 00-1.032-3.439 2.286 2.286 0 00-.882-.177z'
fill={theme.centerChannelBg}
/>
<Path
d='M69.47 16.583a7.332 7.332 0 00-1.293-2.55 7.267 7.267 0 00-2.166-1.854.252.252 0 01-.132-.28.254.254 0 01.235-.198c1.613-.098 4.87.25 3.85 4.858a.256.256 0 01-.238.207.253.253 0 01-.255-.183z'
fill='#fff'
fillOpacity={0.16}
/>
</G>
<G clipPath='url(#clip2_516_33521)'>
<Path
d='M38.63 26.523H5.622a4.63 4.63 0 00-3.262 1.33A4.577 4.577 0 001 31.085v20.847a4.552 4.552 0 001.36 3.232 4.61 4.61 0 003.262 1.33h4.871v7.803l7.308-7.803h20.818a4.634 4.634 0 003.262-1.33 4.576 4.576 0 001.36-3.232V31.085a4.563 4.563 0 00-1.356-3.228 4.62 4.62 0 00-3.255-1.334z'
fill='#FFBC1F'
/>
<Path
d='M17.8 56.494H38.62a4.631 4.631 0 003.261-1.33 4.576 4.576 0 001.36-3.232V39.276s-1.453 11.703-1.714 12.733c-.261 1.03-.78 2.572-3.235 2.827-2.455.256-20.49 1.658-20.49 1.658z'
fill='#CC8F00'
/>
<Path
d='M10.852 38.529c.588 0 1.163.173 1.652.497.489.325.87.787 1.095 1.326a2.937 2.937 0 01-.645 3.22 2.99 2.99 0 01-3.24.64 2.97 2.97 0 01-1.334-1.087 2.942 2.942 0 01.368-3.732 2.97 2.97 0 012.104-.864zM22.127 38.529c.588 0 1.163.173 1.652.497.488.325.87.787 1.095 1.326a2.938 2.938 0 01-.645 3.22 2.99 2.99 0 01-3.24.64 2.97 2.97 0 01-1.335-1.087 2.942 2.942 0 01.369-3.732 2.972 2.972 0 012.104-.864zM33.389 38.529c.588-.001 1.163.171 1.653.495.49.325.871.786 1.097 1.326a2.938 2.938 0 01-.642 3.221 2.98 2.98 0 01-3.241.643 2.97 2.97 0 01-1.335-1.089 2.942 2.942 0 01.367-3.73 2.972 2.972 0 012.1-.867z'
fill={theme.centerChannelBg}
/>
<Path
d='M4.426 35.252a9.273 9.273 0 011.668-3.243 9.337 9.337 0 012.794-2.357.323.323 0 00.17-.354.32.32 0 00-.303-.254c-2.08-.123-6.282.318-4.964 6.177a.325.325 0 00.305.264.329.329 0 00.33-.233z'
fill='#FFD470'
/>
</G>
<Ellipse
cx={82.245}
cy={147.747}
rx={26.4894}
ry={1.33551}
fill='#000'
fillOpacity={0.12}
<Path
d='M76 49L70 49'
stroke={changeOpacity(theme.centerChannelColor, 0.8)}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M67 49L65 49'
stroke={changeOpacity(theme.centerChannelColor, 0.8)}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Circle
cx={44}
cy={75}
r={2}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={52}
cy={75}
r={2}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={60}
cy={75}
r={2}
fill={changeOpacity(theme.centerChannelColor, 0.32)}
/>
<Circle
cx={78}
cy={19}
r={9.5}
stroke={theme.buttonColor}
/>
<Path
d='M87.5 20.2525C86.1859 21.8482 82.4292 23 78 23C73.5708 23 69.8141 21.8482 68.5 20.2525'
stroke={theme.buttonColor}
/>
<Path
d='M86.6622 15C84.9331 16.1956 81.7014 17 78 17C74.2986 17 71.0669 16.1956 69.3378 15'
stroke={theme.buttonColor}
/>
<Path
d='M81.5 19C81.5 21.7141 81.059 24.1482 80.3642 25.8854C80.0162 26.7553 79.6144 27.4258 79.1937 27.8706C78.7741 28.3143 78.3705 28.5 78 28.5C77.6295 28.5 77.2259 28.3143 76.8063 27.8706C76.3856 27.4258 75.9838 26.7553 75.6358 25.8854C74.941 24.1482 74.5 21.7141 74.5 19C74.5 16.2859 74.941 13.8518 75.6358 12.1146C75.9838 11.2447 76.3856 10.5742 76.8063 10.1294C77.2259 9.6857 77.6295 9.5 78 9.5C78.3705 9.5 78.7741 9.6857 79.1937 10.1294C79.6144 10.5742 80.0162 11.2447 80.3642 12.1146C81.059 13.8518 81.5 16.2859 81.5 19Z'
stroke={theme.buttonColor}
/>
</G>
<Defs>
<Pattern
id='pattern0'
patternContentUnits='objectBoundingBox'
width={1}
height={1}
>
<Use
xlinkHref='#image0_516_33521'
transform='scale(.01408 .01299)'
/>
</Pattern>
<LinearGradient
id='paint0_linear_516_33521'
x1={64.6751}
y1={-0.0000118542}
x2={-44.8162}
y2={109.952}
gradientUnits='userSpaceOnUse'
>
<Stop
offset={0.0104167}
stopColor={theme.buttonBg}
/>
<Stop
offset={0.765625}
stopColor={theme.buttonBg}
stopOpacity={0}
/>
</LinearGradient>
<ClipPath id='clip0_516_33521'>
<Path
<ClipPath id='clip0_4212_90121'>
<Rect
width={130}
height={102}
fill={theme.centerChannelBg}
transform='translate(.5)'
d='M0 0H151V149H0z'
/>
</ClipPath>
<ClipPath id='clip1_516_33521'>
<Path
fill={theme.centerChannelBg}
transform='matrix(-1 0 0 1 79.432 .683)'
d='M0 0H47.3591V47.844H0z'
/>
</ClipPath>
<ClipPath id='clip2_516_33521'>
<Path
fill={theme.centerChannelBg}
transform='translate(-8.423 15.037)'
d='M0 0H61.0864V60.8303H0z'
/>
</ClipPath>
<Image
id='image0_516_33521'
width={72}
height={77}
xlinkHref='data:image/png;base64,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'
/>
</Defs>
</Svg>
);

492
app/screens/channel/channel_post_list/intro/illustration/town_square.tsx
View file

File diff suppressed because one or more lines are too long

297
app/screens/global_threads/threads_list/illustrations/empty_state.tsx
View file

@ -3,10 +3,12 @@
import React from 'react';
import Svg, {
Circle,
ClipPath,
Defs,
G,
Path,
Defs,
ClipPath,
Rect,
} from 'react-native-svg';
type Props = {
@ -16,166 +18,161 @@ type Props = {
function EmptyStateIllustration({theme}: Props) {
return (
<Svg
width='228'
height='201'
viewBox='0 0 228 201'
width={125}
height={97}
viewBox='0 0 125 97'
fill='none'
>
<Path
d='M76.5 199.378C111.018 199.378 139 171.396 139 136.878C139 102.361 111.018 74.3785 76.5 74.3785C41.9822 74.3785 14 102.361 14 136.878C14 171.396 41.9822 199.378 76.5 199.378Z'
fill={theme.centerChannelBg}
/>
<Path
d='M76.5 199.378C111.018 199.378 139 171.396 139 136.878C139 102.361 111.018 74.3785 76.5 74.3785C41.9822 74.3785 14 102.361 14 136.878C14 171.396 41.9822 199.378 76.5 199.378Z'
fill={theme.centerChannelColor}
fillOpacity='0.16'
/>
<Path
d='M89.6523 103.062C91.1459 102.792 92.6812 102.82 94.1631 103.145C95.6169 103.562 96.9528 104.751 97 106.213C96.9429 107.201 96.5757 108.15 95.947 108.932C94.0916 111.638 91.7369 113.992 89 115.878C89 115.878 89.3772 105.599 89.6523 103.062Z'
fill='#FFBC1F'
/>
<Path
d='M61.8881 100.9C60.5985 100.621 59.2878 100.455 57.9702 100.402C57.2069 100.324 56.4364 100.443 55.7313 100.749C54.5522 101.361 54.0373 102.811 54 104.147C54.018 105.47 54.3127 106.773 54.8645 107.972C55.4163 109.171 56.2128 110.238 57.2015 111.103C59.1924 112.813 61.5051 114.097 64 114.878C63.1567 111.239 61.8881 100.9 61.8881 100.9Z'
fill='#FFBC1F'
/>
<G clipPath='url(#Mask0)'>
<G clipPath='url(#clip0_4210_74752)'>
<Rect
opacity={0.08}
x={0.004}
width={50}
height={50}
rx={2}
fill={theme.buttonBg}
/>
<Rect
opacity={0.12}
x={30.004}
y={50}
width={95}
height={28}
rx={2}
fill={theme.buttonBg}
/>
<Circle
cx={95.504}
cy={32.5}
r={2.5}
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Circle
cx={109.004}
cy={32.5}
r={2.5}
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Circle
cx={122.504}
cy={32.5}
r={2.5}
fill={theme.centerChannelColor}
fillOpacity={0.48}
/>
<Path
d='M141 180.509C133.276 174.256 123.746 170.784 114.869 166.304C107.487 162.577 100.497 158.12 94.0041 153C90.476 150.21 86.9555 147.034 85.4987 142.781C83.7536 137.687 85.2863 132.123 86.7582 126.946C88.2757 121.574 89.7249 116.181 91.1057 110.769C92.6232 104.826 93.6399 97.2073 92.995 92.712C92.6763 90.4379 91.0147 86.5946 89.5579 84.3052C87.1427 80.639 83.4063 78.0435 79.1254 77.0583C76.8757 76.6614 74.5591 76.9247 72.4561 77.8163C69.5013 78.9728 66.8499 80.7882 64.704 83.124C62.5581 85.4598 60.9744 88.2543 60.0736 91.2945C56.6593 103.15 64.277 115.476 63.6927 127.802C63.493 131.435 62.6531 135.005 61.2117 138.347C60.2283 140.792 58.8293 143.048 57.0766 145.017C54.459 147.837 51.0067 149.664 47.5697 151.446L21.0747 165.265C18.0398 166.842 15.0049 168.419 12.1748 170.268C9.67857 178.607 34.178 208.33 68.9963 210.073C114.733 212.385 131.986 201.462 141 180.509Z'
d='M95.0482 87.1199L105.004 97V46C105.004 44.8954 104.108 44 103.004 44H55.0039C53.8993 44 53.0039 44.8954 53.0039 46V84.5395C53.0039 85.644 53.8993 86.5395 55.0039 86.5395H93.6394C94.1672 86.5395 94.6736 86.7481 95.0482 87.1199Z'
fill='#32539A'
/>
<Path
d='M67.0039 65H97.0039'
stroke={theme.centerChannelBg}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M67.0039 72H86.0039'
stroke={theme.centerChannelBg}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M67.0039 59H77.0039'
stroke={theme.centerChannelBg}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M80.0039 59H93.0039'
stroke={theme.centerChannelBg}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M27.6089 69.5638L14.0039 83V14C14.0039 12.8954 14.8993 12 16.0039 12H82.0039C83.1085 12 84.0039 12.8954 84.0039 14V66.9868C84.0039 68.0914 83.1085 68.9868 82.0039 68.9868H29.0142C28.4881 68.9868 27.9832 69.1941 27.6089 69.5638Z'
fill={theme.centerChannelBg}
/>
<Path
d='M141 180.509C133.276 174.256 123.746 170.784 114.869 166.304C107.487 162.577 100.497 158.12 94.0041 153C90.476 150.21 86.9555 147.034 85.4987 142.781C83.7536 137.687 85.2863 132.123 86.7582 126.946C88.2757 121.574 89.7249 116.181 91.1057 110.769C92.6232 104.826 93.6399 97.2073 92.995 92.712C92.6763 90.4379 91.0147 86.5946 89.5579 84.3052C87.1427 80.639 83.4063 78.0435 79.1254 77.0583C76.8757 76.6614 74.5591 76.9247 72.4561 77.8163C69.5013 78.9728 66.8499 80.7882 64.704 83.124C62.5581 85.4598 60.9744 88.2543 60.0736 91.2945C56.6593 103.15 64.277 115.476 63.6927 127.802C63.493 131.435 62.6531 135.005 61.2117 138.347C60.2283 140.792 58.8293 143.048 57.0766 145.017C54.459 147.837 51.0067 149.664 47.5697 151.446L21.0747 165.265C18.0398 166.842 15.0049 168.419 12.1748 170.268C9.67857 178.607 34.178 208.33 68.9963 210.073C114.733 212.385 131.986 201.462 141 180.509Z'
d='M27.2575 69.2081L14.5039 81.8035V14C14.5039 13.1716 15.1755 12.5 16.0039 12.5H82.0039C82.8323 12.5 83.5039 13.1716 83.5039 14V66.9868C83.5039 67.8153 82.8323 68.4868 82.0039 68.4868H29.0142C28.3566 68.4868 27.7254 68.746 27.2575 69.2081Z'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Circle
cx={32.004}
cy={31}
r={9}
fill={theme.centerChannelColor}
fillOpacity='0.04'
fillOpacity={0.32}
/>
<Path
d='M47.0039 27H63.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M24.0039 51H74.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M24.0039 58H46.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M47.0039 33H72.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M24.0039 45H41.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M45.0039 45H63.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M9.0039 39.5L9.0039 58L19.5039 58'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M9.00391 36.5L9.00391 30.5'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M9.00391 27.5L9.00391 25.5'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
</G>
<Path
d='M72.3684 169.667C94.0078 169.538 99.9495 161.228 102.107 158.84C99.3264 156.995 96.6215 155.039 93.9926 152.971C90.4595 150.181 86.9339 147.004 85.4751 142.75C83.7276 137.655 85.2624 132.09 86.7364 126.911C88.256 121.538 89.7072 116.144 91.0901 110.73C92.6097 104.786 93.6279 97.1658 92.982 92.6696C92.6629 90.3949 90.9989 86.5507 89.5401 84.2609C87.1214 80.5937 83.3798 77.9977 79.0927 77.0122C76.8398 76.6152 74.5199 76.8786 72.414 77.7705C69.4544 78.9263 66.7987 80.7417 64.6496 83.0782C62.5005 85.4146 60.9149 88.2103 60.0139 91.2517C56.5872 103.11 64.2233 115.439 63.6382 127.768C63.4382 131.402 62.5971 134.972 61.1536 138.315C60.1688 140.76 58.7679 143.018 57.0127 144.987C54.3913 147.808 50.9342 149.635 47.4923 151.417L43.6932 153.388C44.9621 155.284 52.2487 169.789 72.3684 169.667Z'
fill='#FFBC1F'
/>
<Path
d='M84.9205 138.14C84.8876 137.284 84.9488 136.428 85.1028 135.585C85.1061 135.565 85.1061 135.545 85.1028 135.524C85.1001 133.503 85.5328 131.504 86.3717 129.663L86.2729 129.762C83.3029 132.637 79.3404 134.266 75.2025 134.311C73.5359 134.313 71.8803 134.041 70.3017 133.508C70.2068 133.475 70.1029 133.479 70.0112 133.52C69.9195 133.561 69.8468 133.635 69.8079 133.727V133.727C69.7785 133.797 69.77 133.873 69.7835 133.947C69.797 134.021 69.8319 134.09 69.8839 134.144C76.6386 140.301 84.7989 138.815 84.9433 138.633C84.9205 138.497 84.9205 138.315 84.9205 138.14Z'
fill='#CC8F00'
/>
<Path
d='M74.3606 118.774C74.9163 119.24 75.5645 119.583 76.2626 119.78C76.9606 119.978 77.6927 120.025 78.4105 119.92C79.1284 119.815 79.8158 119.559 80.4273 119.169C81.0389 118.779 81.5608 118.265 81.9587 117.66C82.3158 117.098 81.4268 116.59 81.0773 117.144C80.7606 117.617 80.3487 118.018 79.8679 118.323C79.387 118.628 78.8478 118.83 78.2846 118.915C77.7213 119.001 77.1464 118.969 76.5964 118.82C76.0464 118.672 75.5334 118.411 75.09 118.054C74.5886 117.629 73.8591 118.349 74.3302 118.774H74.3606Z'
fill='#66320A'
/>
<Path
d='M64.901 99.3407C66.9981 98.8934 70.3488 98.355 72.4307 99.2346C74.5126 100.114 74.0795 101.449 74.0035 103.094C73.9992 103.771 73.8543 104.44 73.578 105.058C73.1297 106.104 72.7118 106.233 71.6633 106.521C69.5358 107.12 66.0711 107.408 64.3539 105.801C63.0775 104.61 62.5684 99.7881 64.8554 99.3786C65.5012 99.2649 65.2277 98.2792 64.5819 98.393C64.0758 98.4575 63.6028 98.6787 63.2293 99.0255C62.8558 99.3724 62.6008 99.8274 62.5 100.326C62.1077 102.207 62.2687 104.161 62.9635 105.952C63.5941 107.257 65.2429 107.567 66.565 107.787C68.4492 108.102 70.3809 107.98 72.2104 107.431C73.6084 107.006 74.6721 106.385 74.9229 104.861C75.1508 103.458 75.5307 100.986 74.8469 99.6744C74.1631 98.3626 72.7194 98.2034 71.5037 98.0366C69.2103 97.7476 66.8842 97.8553 64.6275 98.355C63.9816 98.4915 64.2552 99.4772 64.901 99.3407V99.3407Z'
fill={theme.centerChannelBg}
/>
<Path
d='M89.382 99.7047C87.1863 98.935 84.8706 98.5627 82.5437 98.6053C81.3205 98.6053 79.7932 98.7342 79.0562 99.8867C78.7236 100.598 78.5647 101.377 78.5927 102.161C78.4209 103.239 78.3699 104.333 78.4408 105.422C78.6611 106.84 79.9072 107.461 81.1229 107.954C83.4403 108.894 88.9793 110.009 90.3394 107.067C91.3195 104.959 92.3833 100.63 89.382 99.7199C89.2511 99.6837 89.111 99.7009 88.9928 99.7677C88.8745 99.8345 88.7877 99.9455 88.7514 100.076C88.7151 100.207 88.7324 100.347 88.7993 100.465C88.8663 100.583 88.9775 100.669 89.1085 100.706C91.3044 101.373 90.0355 106.514 88.5538 107.476C87.6876 108.038 85.8641 107.878 84.8612 107.803C83.6141 107.718 82.3907 107.42 81.2445 106.923C79.6337 106.21 79.4665 104.861 79.5805 103.291C79.6945 101.722 79.7552 100 81.5788 99.7199C84.134 99.4495 86.717 99.7873 89.1161 100.706C89.7391 100.918 90.0127 99.9473 89.3896 99.7274L89.382 99.7047Z'
fill={theme.centerChannelBg}
/>
<Path
d='M74.8469 101.039C76.1119 100.68 77.4654 100.802 78.6459 101.38C79.231 101.676 79.7552 100.789 79.1626 100.501C77.7398 99.785 76.1003 99.6254 74.5658 100.053C74.4348 100.089 74.3232 100.174 74.2555 100.292C74.1878 100.409 74.1696 100.548 74.2048 100.679C74.2401 100.81 74.326 100.921 74.4435 100.989C74.5611 101.056 74.7007 101.074 74.8317 101.039H74.8469Z'
fill={theme.centerChannelBg}
/>
<Path
d='M93.4622 102.04C92.5832 102.065 91.7337 102.362 91.0308 102.889C90.5066 103.276 91.0308 104.163 91.5475 103.769C92.0977 103.343 92.7664 103.096 93.4622 103.064C94.1156 103.064 94.1232 102.017 93.4622 102.04V102.04Z'
fill={theme.centerChannelBg}
/>
<Path
d='M59.1492 100.857C60.1784 100.527 61.2937 100.589 62.2796 101.032C62.8723 101.305 63.3966 100.425 62.7963 100.152C61.5696 99.5763 60.1722 99.4763 58.8757 99.8715C58.8108 99.8894 58.7501 99.9199 58.6971 99.9612C58.6441 100.003 58.5997 100.054 58.5665 100.112C58.5334 100.171 58.5121 100.235 58.5038 100.302C58.4956 100.368 58.5006 100.436 58.5186 100.501C58.5365 100.566 58.5671 100.626 58.6085 100.679C58.6499 100.732 58.7014 100.776 58.7599 100.809C58.8185 100.842 58.883 100.864 58.9498 100.872C59.0166 100.88 59.0844 100.875 59.1492 100.857V100.857Z'
fill={theme.centerChannelBg}
/>
<Path
d='M67.9402 103.61C68.7417 103.248 69.6279 103.114 70.5008 103.223C71.1542 103.299 71.1542 102.275 70.5008 102.207C69.4463 102.093 68.3809 102.274 67.4235 102.73C66.8233 103.011 67.34 103.89 67.9402 103.61V103.61Z'
fill='#66320A'
/>
<Path
d='M83.6835 104.193C84.0466 104.158 84.413 104.199 84.7596 104.312C85.1061 104.426 85.4253 104.61 85.697 104.853C86.1832 105.293 86.9127 104.572 86.4188 104.133C86.0536 103.793 85.6223 103.533 85.1516 103.367C84.681 103.201 84.1812 103.134 83.6835 103.17C83.03 103.215 83.0224 104.239 83.6835 104.193V104.193Z'
fill='#66320A'
/>
<Path
d='M75.7815 101.191C75.6143 104.11 75.2724 107.014 75.0217 109.933C74.8697 111.753 74.3227 114.968 77.4379 113.724C78.0381 113.482 77.7798 112.488 77.1643 112.739C75.5763 113.383 75.8574 112.428 75.9334 111.313C76.0094 110.199 76.1234 108.963 76.2298 107.795C76.4197 105.596 76.6628 103.405 76.792 101.206C76.83 100.546 75.8043 100.546 75.7663 101.206L75.7815 101.191Z'
fill='#66320A'
/>
<Path
d='M95.9605 81.0128C95.8076 79.6869 95.3539 78.4132 94.6337 77.2885C93.9135 76.1639 92.9459 75.2179 91.8044 74.5224C88.6588 72.6496 84.7154 72.9377 81.0683 73.2941C81.3418 71.7776 79.5866 70.5721 78.029 70.4128C75.4381 70.155 72.9535 71.3909 70.6893 72.6875C67.917 74.1405 65.3976 76.03 63.228 78.2832C63.1423 78.3017 63.0637 78.3444 63.0017 78.4062C62.9397 78.4681 62.8969 78.5465 62.8784 78.632C62.875 78.6521 62.875 78.6726 62.8784 78.6926C61.8807 79.8823 61.0897 81.2304 60.5382 82.6809C60.2916 83.1174 60.1099 83.5874 59.9988 84.076C59.5914 85.6228 59.5783 87.2467 59.9608 88.7998C59.9642 89.0773 60.0635 89.3451 60.2419 89.558L60.3331 89.7476C60.2156 89.7368 60.0982 89.7684 60.0021 89.8365C59.9059 89.9047 59.8374 90.0049 59.8088 90.1191C59.7176 90.6423 59.6341 91.173 59.5429 91.6962C59.512 91.8277 59.5326 91.966 59.6003 92.083C59.6681 92.1999 59.778 92.2866 59.9076 92.3255C60.0376 92.3604 60.1761 92.3424 60.2928 92.2757C60.4096 92.2089 60.4951 92.0987 60.5306 91.9692C60.6218 91.4384 60.7054 90.9152 60.7966 90.3845C60.8176 90.2581 60.799 90.1284 60.7434 90.0129C60.7986 90.0238 60.8554 90.0238 60.9105 90.0129H60.9561C61.0647 90.0736 61.1917 90.0925 61.3132 90.066C63.9569 89.461 66.3073 87.9572 67.9616 85.8124C70.7957 85.2968 74.7011 85.6986 78.7661 86.1232C79.1896 86.6397 79.7047 87.0741 80.2857 87.4046C81.2329 87.858 82.2748 88.0789 83.3249 88.0491C84.9232 88.1033 86.5041 87.7036 87.8838 86.8966C87.9229 87.5975 88.2226 88.2587 88.7242 88.7508C89.2259 89.243 89.8933 89.5308 90.5963 89.558C90.974 89.5537 91.3476 89.4791 91.698 89.3381C92.1173 90.7068 92.3298 92.1302 92.3286 93.5614C92.3439 93.6864 92.4045 93.8016 92.499 93.885C92.5935 93.9685 92.7153 94.0146 92.8415 94.0146C92.9677 94.0146 93.0895 93.9685 93.184 93.885C93.2785 93.8016 93.3391 93.6864 93.3544 93.5614C93.3428 91.9575 93.0866 90.3647 92.5946 88.8377C92.8408 88.6649 93.0744 88.4749 93.2936 88.269C94.2643 87.3434 95.0095 86.208 95.4718 84.9501C95.9341 83.6922 96.1013 82.3453 95.9605 81.0128V81.0128Z'
fill='#66320A'
/>
<Path
d='M59.9228 93.6145C59.8733 93.564 59.8142 93.524 59.7489 93.4966C59.6837 93.4693 59.6136 93.4552 59.5429 93.4552C59.4721 93.4552 59.4021 93.4693 59.3368 93.4966C59.2716 93.524 59.2125 93.564 59.163 93.6145C59.1115 93.6633 59.0705 93.7221 59.0425 93.7873C59.0145 93.8525 59 93.9227 59 93.9936C59 94.0645 59.0145 94.1347 59.0425 94.1998C59.0705 94.265 59.1115 94.3238 59.163 94.3727L59.277 94.4864C59.3752 94.577 59.5041 94.6273 59.6379 94.6273C59.7716 94.6273 59.9005 94.577 59.9988 94.4864C60.0503 94.4376 60.0913 94.3787 60.1193 94.3136C60.1473 94.2484 60.1618 94.1782 60.1618 94.1073C60.1618 94.0364 60.1473 93.9662 60.1193 93.901C60.0913 93.8359 60.0503 93.7771 59.9988 93.7282L59.9228 93.6145Z'
fill='#66320A'
/>
<Path
d='M92.9897 94.3727C92.8546 94.3766 92.7262 94.4324 92.6314 94.5285C92.5365 94.6246 92.4825 94.7535 92.4806 94.8883V95.6466C92.4806 95.7813 92.5342 95.9105 92.6297 96.0058C92.7252 96.101 92.8547 96.1546 92.9897 96.1546C93.1247 96.1546 93.2542 96.101 93.3497 96.0058C93.4451 95.9105 93.4988 95.7813 93.4988 95.6466V94.8883C93.4969 94.7535 93.4429 94.6246 93.348 94.5285C93.2531 94.4324 93.1248 94.3766 92.9897 94.3727Z'
fill='#66320A'
/>
<Path
d='M43.5 153.378C50.6949 164.128 58.5583 171.905 80.5 169.41'
stroke='#66320A'
strokeWidth='0.91'
strokeMiterlimit='10'
strokeLinecap='round'
/>
<Path
d='M128.698 24.8786H215.802C217.398 24.8726 218.979 25.1799 220.456 25.7831C221.933 26.3862 223.276 27.2733 224.408 28.3937C225.541 29.5141 226.441 30.8459 227.058 32.313C227.674 33.7801 227.994 35.3538 228 36.9443V92.1179C227.995 93.709 227.676 95.2835 227.06 96.7515C226.444 98.2195 225.544 99.5522 224.411 100.673C223.278 101.795 221.935 102.682 220.458 103.286C218.98 103.89 217.398 104.197 215.802 104.191H202.95V124.878L183.643 104.184H128.698C127.102 104.19 125.521 103.882 124.044 103.279C122.567 102.676 121.224 101.789 120.092 100.669C118.959 99.5481 118.059 98.2163 117.442 96.7492C116.826 95.2821 116.506 93.7084 116.5 92.1179V36.9443C116.506 35.3538 116.826 33.7801 117.442 32.313C118.059 30.8459 118.959 29.5141 120.092 28.3937C121.224 27.2733 122.567 26.3862 124.044 25.7831C125.521 25.1799 127.102 24.8726 128.698 24.8786V24.8786Z'
fill={theme.buttonBg}
/>
<Path
d='M161.5 104.378H215.919C217.499 104.384 219.066 104.077 220.528 103.475C221.991 102.873 223.321 101.987 224.443 100.868C225.565 99.749 226.456 98.419 227.067 96.9539C227.677 95.4887 227.994 93.9171 228 92.3287V58.8785C228 58.8785 224.201 89.8115 223.524 92.5328C222.847 95.2542 221.493 99.3363 215.069 100.009C208.644 100.682 161.5 104.378 161.5 104.378Z'
fill='black'
fillOpacity='0.32'
/>
<Path
d='M141.5 56.8785C143.082 56.8785 144.629 57.3477 145.945 58.2267C147.26 59.1058 148.286 60.3552 148.891 61.817C149.497 63.2788 149.655 64.8874 149.346 66.4392C149.038 67.9911 148.276 69.4165 147.157 70.5353C146.038 71.6541 144.613 72.4161 143.061 72.7248C141.509 73.0334 139.9 72.875 138.439 72.2695C136.977 71.664 135.727 70.6386 134.848 69.323C133.969 68.0075 133.5 66.4607 133.5 64.8785C133.502 62.7574 134.346 60.7237 135.845 59.2239C137.345 57.724 139.379 56.8805 141.5 56.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M171.508 56.8785C173.09 56.88 174.636 57.3505 175.95 58.2305C177.265 59.1105 178.289 60.3604 178.893 61.8224C179.498 63.2843 179.655 64.8926 179.345 66.444C179.036 67.9953 178.273 69.42 177.154 70.5381C176.035 71.6561 174.61 72.4173 173.058 72.7253C171.506 73.0334 169.898 72.8745 168.437 72.2688C166.975 71.663 165.726 70.6377 164.848 69.3222C163.969 68.0068 163.5 66.4604 163.5 64.8785C163.5 63.8273 163.707 62.7863 164.11 61.8152C164.512 60.8441 165.102 59.9619 165.846 59.2189C166.59 58.4759 167.472 57.8868 168.444 57.4852C169.415 57.0836 170.457 56.8775 171.508 56.8785V56.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M201.5 56.8785C203.082 56.8785 204.629 57.3477 205.945 58.2267C207.26 59.1058 208.286 60.3552 208.891 61.817C209.497 63.2788 209.655 64.8874 209.346 66.4392C209.038 67.9911 208.276 69.4165 207.157 70.5353C206.038 71.6541 204.613 72.4161 203.061 72.7248C201.509 73.0334 199.9 72.875 198.439 72.2695C196.977 71.664 195.727 70.6386 194.848 69.323C193.969 68.0075 193.5 66.4607 193.5 64.8785C193.5 62.7567 194.343 60.7219 195.843 59.2216C197.343 57.7213 199.378 56.8785 201.5 56.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M125.898 47.7743C126.814 44.666 128.358 41.7626 130.441 39.2305C132.525 36.6984 135.107 34.5875 138.039 33.0188C138.207 32.9305 138.341 32.7917 138.421 32.6236C138.5 32.4555 138.521 32.2671 138.479 32.0868C138.438 31.9065 138.336 31.7441 138.191 31.624C138.045 31.5039 137.863 31.4328 137.671 31.4212C132.016 31.0972 120.594 32.2577 124.185 47.6914C124.223 47.8778 124.325 48.0466 124.474 48.1709C124.623 48.2952 124.811 48.3679 125.008 48.3774C125.205 48.3869 125.4 48.3327 125.561 48.2235C125.722 48.1142 125.841 47.9561 125.898 47.7743V47.7743Z'
fill='white'
fillOpacity='0.24'
/>
<Path
d='M73.4957 0.378531H9.02713C7.84566 0.374539 6.67498 0.602539 5.58192 1.04951C4.48886 1.49648 3.49483 2.15366 2.65658 2.98354C1.81833 3.81343 1.15228 4.79975 0.696467 5.8862C0.24065 6.97265 0.00399142 8.13796 0 9.31558V50.1544C0.00399142 51.332 0.24065 52.4973 0.696467 53.5838C1.15228 54.6702 1.81833 55.6565 2.65658 56.4864C3.49483 57.3163 4.48886 57.9735 5.58192 58.4204C6.67498 58.8674 7.84566 59.0954 9.02713 59.0914H18.5414V74.3785L32.8128 59.0914H73.4729C74.6543 59.0954 75.825 58.8674 76.9181 58.4204C78.0112 57.9735 79.0052 57.3163 79.8434 56.4864C80.6817 55.6565 81.3477 54.6702 81.8035 53.5838C82.2593 52.4973 82.496 51.332 82.5 50.1544V9.31558C82.4919 6.94123 81.5395 4.66697 79.8515 2.9916C78.1635 1.31623 75.8778 0.376508 73.4957 0.378531V0.378531Z'
fill='#FFBC1F'
/>
<Path
d='M32.5 58.8784H73.4161C74.605 58.8823 75.783 58.6593 76.883 58.222C77.9829 57.7847 78.9832 57.1417 79.8267 56.3298C80.6702 55.5179 81.3405 54.5529 81.7991 53.49C82.2578 52.427 82.496 51.287 82.5 50.1349V25.8785C82.5 25.8785 79.6431 48.3089 79.1299 50.2833C78.6167 52.2577 77.598 55.2118 72.7727 55.7016C67.9473 56.1915 32.5 58.8784 32.5 58.8784Z'
fill='black'
fillOpacity='0.32'
/>
<Path
d='M19 23.8785C20.1867 23.8785 21.3467 24.2304 22.3334 24.8897C23.3201 25.5489 24.0892 26.486 24.5433 27.5824C24.9974 28.6787 25.1162 29.8851 24.8847 31.049C24.6532 32.2129 24.0818 33.282 23.2426 34.1211C22.4035 34.9602 21.3344 35.5317 20.1705 35.7632C19.0067 35.9947 17.8003 35.8759 16.7039 35.4218C15.6075 34.9676 14.6705 34.1986 14.0112 33.2119C13.3519 32.2252 13 31.0652 13 29.8785C12.999 29.0903 13.1535 28.3096 13.4546 27.5811C13.7558 26.8527 14.1977 26.1909 14.7551 25.6335C15.3124 25.0762 15.9743 24.6343 16.7027 24.3331C17.4311 24.0319 18.2118 23.8774 19 23.8785V23.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M41.5 23.8785C42.6867 23.8785 43.8467 24.2304 44.8334 24.8897C45.8201 25.5489 46.5892 26.486 47.0433 27.5824C47.4974 28.6787 47.6162 29.8851 47.3847 31.049C47.1532 32.2129 46.5818 33.282 45.7426 34.1211C44.9035 34.9602 43.8344 35.5317 42.6705 35.7632C41.5067 35.9947 40.3003 35.8759 39.2039 35.4218C38.1075 34.9676 37.1705 34.1986 36.5112 33.2119C35.8519 32.2252 35.5 31.0652 35.5 29.8785C35.499 29.0903 35.6535 28.3096 35.9546 27.5811C36.2558 26.8527 36.6977 26.1909 37.2551 25.6335C37.8124 25.0762 38.4743 24.6343 39.2027 24.3331C39.9311 24.0319 40.7118 23.8774 41.5 23.8785V23.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M63.9921 23.8785C65.1792 23.8769 66.34 24.2275 67.3277 24.8858C68.3154 25.5442 69.0857 26.4807 69.541 27.5769C69.9963 28.6731 70.1163 29.8798 69.8857 31.0442C69.6551 32.2086 69.0842 33.2784 68.2454 34.1183C67.4066 34.9582 66.3375 35.5305 65.1734 35.7626C64.0093 35.9948 62.8025 35.8764 61.7057 35.4225C60.6089 34.9686 59.6714 34.1996 59.0117 33.2127C58.3521 32.2259 58 31.0655 58 29.8785C57.999 29.0909 58.1532 28.3109 58.4539 27.583C58.7545 26.8551 59.1957 26.1936 59.7523 25.6363C60.3088 25.0791 60.9697 24.637 61.6972 24.3354C62.4247 24.0337 63.2046 23.8785 63.9921 23.8785V23.8785Z'
fill={theme.centerChannelBg}
/>
<Path
d='M6.7637 16.9281C7.43137 14.6443 8.55997 12.5107 10.0845 10.6501C11.609 8.78959 13.4993 7.23886 15.6466 6.08727C15.7738 6.02514 15.8761 5.92399 15.9374 5.79966C15.9987 5.67533 16.0156 5.53486 15.9854 5.40026C15.9552 5.26565 15.8797 5.14452 15.7707 5.05584C15.6616 4.96717 15.5252 4.91596 15.3828 4.91024C11.2401 4.67033 2.87695 5.525 5.49915 16.8681C5.52681 17.0065 5.60175 17.132 5.71197 17.2244C5.8222 17.3168 5.96133 17.3708 6.10707 17.3777C6.25282 17.3846 6.39675 17.3441 6.51581 17.2625C6.63486 17.181 6.72215 17.0632 6.7637 16.9281V16.9281Z'
fill='white'
fillOpacity='0.32'
/>
<Defs>
<ClipPath
id='Mask0'
>
<Path
d='M76.5 199.378C111.018 199.378 139 171.396 139 136.878C139 102.361 111.018 74.3784 76.5 74.3784C41.9822 74.3784 14 102.361 14 136.878C14 171.396 41.9822 199.378 76.5 199.378Z'
fill='#ffffff'
transform='translate(0 0)'
<ClipPath id='clip0_4210_74752'>
<Rect
width={125}
height={97}
fill='white'
transform='translate(0.004)'
/>
</ClipPath>
</Defs>
</Svg>
);

159
app/screens/home/channel_list/categories_list/categories/unreads/empty_state/empty_unreads.tsx
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import * as React from 'react';
import Svg, {Ellipse, Path} from 'react-native-svg';
import Svg, {Circle, Path, G, Defs, ClipPath, Rect} from 'react-native-svg';
import {useTheme} from '@context/theme';
@ -11,35 +11,138 @@ function SvgComponent() {
return (
<Svg
width={140}
height={140}
viewBox='0 0 140 140'
width={125}
height={97}
viewBox='0 0 125 97'
fill='none'
>
<Ellipse
cx={70}
cy={114}
rx={45}
ry={3}
fill='#000'
fillOpacity={0.08}
/>
<Path
d='M107.838 26.436h-75.65a10.577 10.577 0 00-7.475 3.06 10.533 10.533 0 00-3.117 7.44v47.977a10.516 10.516 0 003.117 7.44 10.56 10.56 0 007.475 3.06h11.165v17.959l16.746-17.96h47.712a10.576 10.576 0 007.476-3.06 10.52 10.52 0 003.117-7.439V36.937a10.521 10.521 0 00-3.108-7.43 10.567 10.567 0 00-7.458-3.07z'
fill='#FFBC1F'
/>
<Path
d='M60.1 95.413h47.711a10.576 10.576 0 007.476-3.06 10.52 10.52 0 003.117-7.439V55.785s-3.331 26.935-3.93 29.306c-.598 2.37-1.786 5.918-7.413 6.506-5.627.588-46.962 3.815-46.962 3.815z'
fill='#CC8F00'
/>
<Path
d='M29.447 46.526a21.375 21.375 0 013.823-7.464 21.426 21.426 0 016.403-5.424.74.74 0 00-.303-1.4c-4.77-.285-14.398.731-11.38 14.217a.749.749 0 001.171.469.748.748 0 00.286-.398z'
fill='#FFD470'
/>
<Path
d='M86.565 44.167L66.313 66.44l-5.878-4.455h-3.268l9.146 14.848 23.52-32.664h-3.268z'
fill={theme.sidebarBg}
/>
<G clipPath='url(#clip0_4425_147238)'>
<Rect
opacity={0.08}
width={50}
height={50}
rx={2}
fill={theme.sidebarText}
/>
<Rect
x={30}
y={50}
width={95}
height={28}
rx={2}
fill={theme.sidebarText}
fillOpacity={0.08}
/>
<Circle
cx={92.5}
cy={35.5}
r={2.5}
fill={theme.sidebarText}
fillOpacity={0.32}
/>
<Circle
cx={104}
cy={35.5}
r={2.5}
fill={theme.sidebarText}
fillOpacity={0.32}
/>
<Circle
cx={115.5}
cy={35.5}
r={2.5}
fill={theme.sidebarText}
fillOpacity={0.32}
/>
<Path
d='M95.0443 87.1199L105 97V46C105 44.8954 104.105 44 103 44H55C53.8954 44 53 44.8954 53 46V84.5395C53 85.644 53.8954 86.5395 55 86.5395H93.6355C94.1633 86.5395 94.6697 86.7481 95.0443 87.1199Z'
fill='#32539A'
/>
<Path
opacity={0.4}
d='M67 65H97'
stroke={'white'}
strokeLinecap='round'
/>
<Path
opacity={0.4}
d='M67 72H86'
stroke={'white'}
strokeLinecap='round'
/>
<Path
opacity={0.4}
d='M67 59H77'
stroke={'white'}
strokeLinecap='round'
/>
<Path
opacity={0.4}
d='M80 59H93'
stroke={'white'}
strokeLinecap='round'
/>
<Path
d='M27.2536 69.2081L14.5 81.8035V14C14.5 13.1716 15.1716 12.5 16 12.5H82C82.8284 12.5 83.5 13.1716 83.5 14V66.9868C83.5 67.8153 82.8284 68.4868 82 68.4868H29.0103C28.3527 68.4868 27.7215 68.746 27.2536 69.2081Z'
fill={theme.sidebarBg}
stroke={theme.sidebarText}
/>
<Path
d='M47 27H63'
stroke={theme.sidebarText}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M24 51H74'
stroke={theme.sidebarText}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M24 58H46'
stroke={theme.sidebarText}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M47 33H72'
stroke={theme.sidebarText}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M24 45H41'
stroke={theme.sidebarText}
strokeOpacity={0.64}
strokeLinecap='round'
/>
<Path
d='M45 45H63'
stroke={theme.sidebarText}
strokeOpacity={0.56}
strokeLinecap='round'
/>
<Path
d='M32 40C36.9706 40 41 35.9706 41 31C41 26.0294 36.9706 22 32 22C27.0294 22 23 26.0294 23 31C23 35.9706 27.0294 40 32 40Z'
fill={theme.onlineIndicator}
/>
<Path
d='M28 31.5L31 34.5L37 28.5'
stroke={theme.sidebarBg}
strokeLinecap='round'
strokeLinejoin='round'
/>
</G>
<Defs>
<ClipPath id='clip0_4425_147238'>
<Rect
width={125}
height={97}
fill='white'
/>
</ClipPath>
</Defs>
</Svg>
);
}

1
app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx
View file

@ -31,6 +31,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
top: -20,
},
title: {
marginTop: 24,
color: theme.sidebarText,
textAlign: 'center',
...typography('Heading', 400, 'SemiBold'),

142
app/screens/home/recent_mentions/components/mention_icon.tsx
View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import Svg, {Path, Ellipse} from 'react-native-svg';
import Svg, {Circle, Path} from 'react-native-svg';
import {useTheme} from '@context/theme';
@ -16,49 +16,135 @@ function MentionIcon({style}: Props) {
return (
<Svg
width={155}
height={153}
width={97}
height={87}
viewBox='0 0 97 87'
fill='none'
style={style}
>
<Ellipse
cx={80.5}
cy={133}
rx={54.5}
ry={3}
fill='#000'
fillOpacity={0.06}
<Path
d='M3.00001 35L3.00001 56L15 56'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M70.27 59.771h59.439a8.307 8.307 0 0 1 5.874 2.405 8.274 8.274 0 0 1 2.449 5.845v37.697a8.271 8.271 0 0 1-5.147 7.63 8.31 8.31 0 0 1-3.176.619h-8.772v14.111l-13.158-14.111H70.291a8.315 8.315 0 0 1-5.873-2.404 8.279 8.279 0 0 1-2.45-5.845V68.021a8.269 8.269 0 0 1 2.442-5.838 8.303 8.303 0 0 1 5.86-2.412Z'
fill='#1E325C'
d='M3 31L3 25'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M107.779 113.967H70.291a8.315 8.315 0 0 1-5.873-2.404 8.276 8.276 0 0 1-2.45-5.845V82.832s2.618 21.163 3.088 23.026c.47 1.863 1.403 4.65 5.825 5.112 4.42.462 36.898 2.997 36.898 2.997Z'
fill='#0A111F'
d='M3 22L3 20'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M131.863 75.556a16.796 16.796 0 0 0-3.004-5.864 16.836 16.836 0 0 0-5.031-4.262.585.585 0 0 1-.306-.642.577.577 0 0 1 .545-.458c3.747-.224 11.312.575 8.94 11.17a.591.591 0 0 1-1.144.056Z'
fill='#32539A'
/>
<Path
d='M107.838 26.436h-75.65a10.576 10.576 0 0 0-7.475 3.06 10.535 10.535 0 0 0-3.117 7.44v47.977a10.516 10.516 0 0 0 3.117 7.44 10.558 10.558 0 0 0 7.475 3.06h11.165v17.959l16.746-17.96h47.712a10.575 10.575 0 0 0 7.476-3.06 10.52 10.52 0 0 0 3.117-7.439V36.937a10.521 10.521 0 0 0-3.108-7.43 10.567 10.567 0 0 0-7.458-3.07Z'
opacity={0.16}
d='M81.8691 78.899L90 87V45C90 43.8954 89.1046 43 88 43H49C47.8954 43 47 43.8954 47 45V76.3158C47 77.4204 47.8954 78.3158 49 78.3158H80.4575C80.9867 78.3158 81.4943 78.5255 81.8691 78.899Z'
fill={theme.buttonBg}
/>
<Path
d='M60.1 95.413h47.711a10.573 10.573 0 0 0 7.476-3.06 10.53 10.53 0 0 0 3.117-7.44V55.786s-3.331 26.935-3.93 29.306c-.598 2.37-1.786 5.918-7.413 6.506-5.627.588-46.962 3.815-46.962 3.815Z'
fill='#000'
fillOpacity={0.16}
d='M65.7695 65.5385H73.4618'
stroke={theme.centerChannelBg}
strokeLinecap='round'
/>
<Path
d='M29.447 46.526a21.375 21.375 0 0 1 3.823-7.464 21.426 21.426 0 0 1 6.403-5.424.74.74 0 0 0-.303-1.4c-4.77-.285-14.398.731-11.38 14.217a.749.749 0 0 0 1.171.469.748.748 0 0 0 .286-.398Z'
fill='#fff'
fillOpacity={0.16}
/>
<Path
d='M70.393 66.965c1.645 0 3.105-.62 4.38-1.863 1.277-1.276 1.915-2.753 1.915-4.432 0-1.712-.622-3.189-1.864-4.431s-2.72-1.864-4.431-1.864c-1.68 0-3.156.638-4.432 1.914-1.242 1.276-1.863 2.736-1.863 4.381 0 1.612.62 3.09 1.863 4.432 1.343 1.242 2.82 1.863 4.432 1.863Zm0-27.295c5.74 0 10.676 2.065 14.805 6.195 4.13 4.13 6.195 9.064 6.195 14.805v3.022c0 2.014-.706 3.81-2.115 5.389-1.41 1.376-3.156 2.064-5.238 2.064-2.518 0-4.583-1.04-6.194-3.122-2.082 2.082-4.55 3.122-7.403 3.122-2.854 0-5.321-1.04-7.403-3.122-2.081-2.082-3.122-4.532-3.122-7.353 0-2.82 1.024-5.304 3.072-7.453 2.081-2.014 4.549-3.021 7.403-3.021 2.853 0 5.338 1.007 7.453 3.021 2.014 2.115 3.021 4.6 3.021 7.453v3.022c0 .84.32 1.595.957 2.266.638.672 1.377 1.007 2.216 1.007.873 0 1.612-.319 2.216-.957.604-.637.906-1.41.906-2.316V60.67c0-4.633-1.645-8.578-4.935-11.834-3.257-3.29-7.201-4.935-11.834-4.935s-8.595 1.645-11.885 4.935c-3.257 3.257-4.885 7.201-4.885 11.834s1.628 8.595 4.885 11.885c3.29 3.257 7.252 4.885 11.885 4.885h10.474v4.23H70.393c-5.674 0-10.593-2.081-14.756-6.244s-6.244-9.099-6.244-14.806c0-5.707 2.081-10.626 6.244-14.755 4.163-4.13 9.082-6.195 14.756-6.195Z'
d='M23.605 67.5638L10 81V12C10 10.8954 10.8954 10 12 10H78C79.1046 10 80 10.8954 80 12V64.9868C80 66.0914 79.1046 66.9868 78 66.9868H25.0103C24.4842 66.9868 23.9793 67.1941 23.605 67.5638Z'
fill={theme.centerChannelBg}
/>
<Path
d='M23.2536 67.2081L10.5 79.8035V12C10.5 11.1716 11.1716 10.5 12 10.5H78C78.8284 10.5 79.5 11.1716 79.5 12V64.9868C79.5 65.8153 78.8284 66.4868 78 66.4868H25.0103C24.3527 66.4868 23.7215 66.746 23.2536 67.2081Z'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Circle
cx={28}
cy={29}
r={9}
fill={theme.centerChannelColor}
fillOpacity={0.32}
/>
<Path
d='M43 25H59'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20 49H53'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20 56H42'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M43 31H68'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20 43H37'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M41 43H59'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Circle
cx={78}
cy={19}
r={19}
fill={'#32539A'}
/>
<Path
d='M73 49L94 49L94 37'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M69 49L63 49'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M60 49L58 49'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Circle
cx={77.9922}
cy={19}
r={5}
stroke={theme.buttonColor}
/>
<Path
d='M82.9922 19C82.9922 19.1667 82.9922 19.8 82.9922 21C82.9922 22.2 83.9922 24 85.4922 24C86.9922 24 87.9922 23 87.9922 19'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
<Path
d='M87.9922 19C87.9922 13.4772 83.515 9 77.9922 9C72.4693 9 67.9922 13.4772 67.9922 19C67.9922 24.5228 72.4693 29 77.9922 29C79.4144 29 80.7673 28.7031 81.9922 28.1679'
stroke={theme.buttonColor}
strokeLinecap='round'
/>
</Svg>
);
}

168
app/screens/home/saved_messages/components/saved_posts_icon.tsx
View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import Svg, {Path, Ellipse} from 'react-native-svg';
import Svg, {Circle, Path, G, Defs, ClipPath, Rect} from 'react-native-svg';
import {useTheme} from '@context/theme';
@ -16,49 +16,135 @@ export default function SavedPostsIcon({style}: Props) {
return (
<Svg
width={155}
height={153}
width={97}
height={87}
viewBox='0 0 97 87'
fill='none'
style={style}
>
<Ellipse
cx={80.5}
cy={133}
rx={54.5}
ry={3}
fill='#000'
fillOpacity={0.06}
/>
<Path
d='M70.27 59.771h59.439a8.307 8.307 0 0 1 5.874 2.405 8.274 8.274 0 0 1 2.449 5.845v37.697a8.271 8.271 0 0 1-5.147 7.63 8.31 8.31 0 0 1-3.176.619h-8.772v14.111l-13.158-14.111H70.291a8.315 8.315 0 0 1-5.873-2.404 8.276 8.276 0 0 1-2.45-5.845V68.021a8.27 8.27 0 0 1 2.442-5.838 8.303 8.303 0 0 1 5.86-2.412Z'
fill={theme.buttonBg}
/>
<Path
d='M107.779 113.967H70.291a8.315 8.315 0 0 1-5.874-2.404 8.279 8.279 0 0 1-2.449-5.845V82.832s2.618 21.163 3.088 23.026c.47 1.863 1.403 4.65 5.824 5.112 4.422.462 36.899 2.997 36.899 2.997Z'
fill='#000'
fillOpacity={0.16}
/>
<Path
d='M131.863 75.556a16.796 16.796 0 0 0-3.004-5.864 16.836 16.836 0 0 0-5.031-4.262.585.585 0 0 1-.306-.642.577.577 0 0 1 .545-.458c3.747-.224 11.312.575 8.94 11.17a.591.591 0 0 1-1.144.056Z'
fill='#fff'
fillOpacity={0.16}
/>
<Path
d='M107.838 26.436h-75.65a10.577 10.577 0 0 0-7.475 3.06 10.533 10.533 0 0 0-3.117 7.44v47.977a10.516 10.516 0 0 0 3.117 7.44 10.56 10.56 0 0 0 7.475 3.06h11.165v17.959l16.746-17.96h47.712a10.578 10.578 0 0 0 7.476-3.06 10.52 10.52 0 0 0 3.117-7.439V36.937a10.521 10.521 0 0 0-3.108-7.43 10.567 10.567 0 0 0-7.458-3.07Z'
fill='#FFBC1F'
/>
<Path
d='M60.1 95.413h47.711a10.573 10.573 0 0 0 7.476-3.06 10.53 10.53 0 0 0 3.117-7.44V55.787s-3.331 26.935-3.93 29.306c-.598 2.37-1.786 5.918-7.413 6.506-5.627.588-46.962 3.815-46.962 3.815Z'
fill='#CC8F00'
/>
<Path
d='M29.447 46.526a21.375 21.375 0 0 1 3.823-7.464 21.426 21.426 0 0 1 6.403-5.424.74.74 0 0 0-.303-1.4c-4.77-.285-14.398.731-11.38 14.217a.749.749 0 0 0 1.171.469.748.748 0 0 0 .286-.398Z'
fill='#FFD470'
/>
<Path
d='M81.253 75.167 69.5 70.192l-11.753 4.975v-29.63h23.506v29.63Zm0-34.167H57.747c-1.319 0-2.45.456-3.39 1.367-.905.874-1.357 1.931-1.357 3.17V82l16.5-6.833L86 82V45.537c0-1.239-.47-2.296-1.413-3.17-.904-.911-2.015-1.367-3.334-1.367Z'
fill={theme.centerChannelBg}
/>
<G clipPath='url(#clip0_4210_81120)'>
<Path
d='M3.00391 35L3.00392 56L15.0039 56'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M3.00391 31L3.00391 25'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
d='M3.00391 22L3.00391 20'
stroke={theme.centerChannelColor}
strokeOpacity={0.32}
strokeLinecap='round'
/>
<Path
opacity={0.16}
d='M81.873 78.899L90.0039 87V45C90.0039 43.8954 89.1085 43 88.0039 43H49.0039C47.8993 43 47.0039 43.8954 47.0039 45V76.3158C47.0039 77.4204 47.8993 78.3158 49.0039 78.3158H80.4614C80.9906 78.3158 81.4982 78.5255 81.873 78.899Z'
fill={theme.buttonBg}
/>
<Path
d='M65.7734 65.5385H73.4657'
stroke={theme.centerChannelBg}
strokeLinecap='round'
/>
<Path
d='M23.6089 67.5638L10.0039 81V12C10.0039 10.8954 10.8993 10 12.0039 10H78.0039C79.1085 10 80.0039 10.8954 80.0039 12V64.9868C80.0039 66.0914 79.1085 66.9868 78.0039 66.9868H25.0142C24.4881 66.9868 23.9832 67.1941 23.6089 67.5638Z'
fill={theme.centerChannelBg}
/>
<Path
d='M23.2575 67.2081L10.5039 79.8035V12C10.5039 11.1716 11.1755 10.5 12.0039 10.5H78.0039C78.8323 10.5 79.5039 11.1716 79.5039 12V64.9868C79.5039 65.8153 78.8323 66.4868 78.0039 66.4868H25.0142C24.3566 66.4868 23.7254 66.746 23.2575 67.2081Z'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
/>
<Circle
cx={28.0039}
cy={29}
r={9}
fill={theme.centerChannelColor}
fillOpacity={0.32}
/>
<Path
d='M43.0039 25H59.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20.0039 49H53.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20.0039 56H42.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M43.0039 31H68.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M20.0039 43H37.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Path
d='M41.0039 43H59.0039'
stroke={theme.centerChannelColor}
strokeOpacity={0.48}
strokeLinecap='round'
/>
<Circle
cx={78.0039}
cy={19}
r={19}
fill='#32539A'
/>
<Path
d='M70.9922 12V27L77.9922 24L84.9922 27V12C84.9922 10.8954 84.0968 10 82.9922 10H72.9922C71.8876 10 70.9922 10.8954 70.9922 12Z'
stroke={theme.buttonColor}
/>
<Path
d='M73.0039 49L94.0039 49L94.0039 37'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M69.0039 49L63.0039 49'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
<Path
d='M60.0039 49L58.0039 49'
stroke={theme.centerChannelColor}
strokeOpacity={0.8}
strokeLinecap='round'
strokeLinejoin='round'
/>
</G>
<Defs>
<ClipPath id='clip0_4210_81120'>
<Rect
width={97}
height={87}
fill='white'
transform='translate(0.00390625)'
/>
</ClipPath>
</Defs>
</Svg>
);
}