updating illustrations
This commit is contained in:
Matthew Birtch
parent
b8535c09bd
commit
2295ab46b5
5 changed files with 101 additions and 227 deletions
|
|
@ -1,15 +1,21 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import {StyleProp, ViewStyle} from 'react-native';
|
||||
import Svg, {Ellipse, Path, Mask, G} from 'react-native-svg';
|
||||
import Svg, {
|
||||
Ellipse,
|
||||
Path,
|
||||
Mask,
|
||||
G,
|
||||
} from 'react-native-svg';
|
||||
|
||||
type SvgProps = {
|
||||
type Props = {
|
||||
theme: Theme;
|
||||
styles: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
const CallsSvg = ({styles}: SvgProps) => {
|
||||
const CallsSvg = ({theme, styles}: Props) => {
|
||||
return (
|
||||
<Svg
|
||||
width={284}
|
||||
|
|
@ -23,11 +29,11 @@ const CallsSvg = ({styles}: SvgProps) => {
|
|||
cy={116.733}
|
||||
rx={72.9374}
|
||||
ry={72.8026}
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M129.562 190.036c40.558 0 73.438-32.818 73.438-73.303 0-40.484-32.88-73.302-73.438-73.302-40.557 0-73.437 32.818-73.437 73.302 0 40.485 32.88 73.303 73.437 73.303z'
|
||||
stroke='#3F4350'
|
||||
stroke={theme.centerChannelColor}
|
||||
strokeOpacity={0.16}
|
||||
/>
|
||||
<Ellipse
|
||||
|
|
@ -35,16 +41,12 @@ const CallsSvg = ({styles}: SvgProps) => {
|
|||
cy={116.733}
|
||||
rx={72.9374}
|
||||
ry={72.8026}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<Mask
|
||||
id='a'
|
||||
maskUnits='userSpaceOnUse'
|
||||
x={55}
|
||||
y={42}
|
||||
width={149}
|
||||
height={149}
|
||||
>
|
||||
<Ellipse
|
||||
cx={129.562}
|
||||
|
|
@ -53,16 +55,11 @@ const CallsSvg = ({styles}: SvgProps) => {
|
|||
ry={72.8026}
|
||||
fill='#fff'
|
||||
/>
|
||||
<Path
|
||||
d='M129.562 190.036c40.558 0 73.438-32.818 73.438-73.303 0-40.484-32.88-73.302-73.438-73.302-40.557 0-73.437 32.818-73.437 73.302 0 40.485 32.88 73.303 73.437 73.303z'
|
||||
stroke='#3F4350'
|
||||
strokeOpacity={0.16}
|
||||
/>
|
||||
</Mask>
|
||||
<G mask='url(#a)'>
|
||||
<Path
|
||||
d='M89.869 169.039c-.092 8.613.367 15.76 1.344 21.675a109.548 109.548 0 0013.337 4.419c.102.03.193.051.295.081.468.122.937.244 1.415.356a103.56 103.56 0 008.99 1.853 113.578 113.578 0 0018.539 1.507c19.089 0 37.069-4.683 52.869-12.98a110.39 110.39 0 0014.182-8.817c.947-12.787 4.011-32.334 4.215-46.343.835-56.412 1.578-61.767-38.789-63.763a987.79 987.79 0 00-12.268-.509c-5.64-.204-10.792-.336-15.495-.367-2.474-.02-4.826 0-7.055.051-18 .377-28.262 2.973-34.096 10.344-5.834 7.381-7.218 19.517-7.473 38.993-.122 9.152 0 19.924.04 32.599.011 2.983.011 6.068 0 9.244 0 3.736-.01 7.615-.05 11.657z'
|
||||
fill='#1C58D9'
|
||||
fill={theme.buttonBg}
|
||||
/>
|
||||
<Path
|
||||
d='M89.869 169.039c-.092 8.613.367 15.76 1.344 21.675a109.994 109.994 0 0013.632 4.5c0-52.757-1.14-71.754-.713-77.018-1.435-.509-5.08-1.364-14.253-2.657-.122 9.152 0 19.924.04 32.599.011 2.983.011 6.068 0 9.244 0 3.736-.01 7.615-.05 11.657z'
|
||||
|
|
@ -128,7 +125,7 @@ const CallsSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M119.726 83.78a7.5 7.5 0 017.5-7.5h148.74a7.5 7.5 0 017.5 7.5v38.914a7.5 7.5 0 01-7.5 7.5h-156.24V83.78z'
|
||||
stroke='#3F4350'
|
||||
stroke={theme.centerChannelColor}
|
||||
strokeOpacity={0.16}
|
||||
/>
|
||||
<Ellipse
|
||||
|
|
@ -210,7 +207,7 @@ const CallsSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M43.998 22.217l-.217.457a.808.808 0 00.088.833l2.13 2.813a.072.072 0 00.12-.012.07.07 0 00.007-.046c-.159-.708-.657-2.521-1.85-4.076a.166.166 0 00-.147-.059.167.167 0 00-.13.09zM46.643 23.159s-.304-.211-.451.095c-.105.219.31 1.004.562 1.446a.093.093 0 00.174-.048c-.023-.51-.09-1.392-.285-1.493zM48.174 19.925l-.165.023a.423.423 0 00-.277.163.413.413 0 00-.08.31l.727 5.014c.003.013.01.024.02.033a.057.057 0 00.09-.033l.727-5.014a.414.414 0 00-.079-.31.424.424 0 00-.277-.163l-.163-.023a1.842 1.842 0 00-.523 0zM52.87 22.217l.218.457a.804.804 0 01-.088.833L50.87 26.32a.072.072 0 01-.119-.012.07.07 0 01-.007-.046c.159-.708.657-2.521 1.85-4.076a.166.166 0 01.147-.059.168.168 0 01.13.09zM50.228 23.159s.302-.211.45.095c.104.219-.31 1.004-.563 1.446a.092.092 0 01-.157.011.09.09 0 01-.015-.059c.021-.51.087-1.392.285-1.493z'
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
/>
|
||||
<Path
|
||||
d='M37.423 84.01s.554-6.606 4.046-9.936c3.491-3.329 6.832-5.533 13.882-5.963 7.05-.43 11.468 6.683 12.152 7.951.685 1.268 2.713 5.03 2.713 7.948 0 2.916.02 9.044-4.158 11.765-4.18 2.722-8.201 4.308-11.086 4.157-2.885-.15-10.177-.754-13.444-5.292-3.267-4.538-4.105-5.988-4.105-10.63z'
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import {StyleProp, ViewStyle} from 'react-native';
|
||||
import Svg, {
|
||||
Rect,
|
||||
|
|
@ -15,11 +15,12 @@ import Svg, {
|
|||
Stop,
|
||||
} from 'react-native-svg';
|
||||
|
||||
type SvgProps = {
|
||||
type Props = {
|
||||
theme: Theme;
|
||||
styles: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
const IntegrationsSvg = ({styles}: SvgProps) => {
|
||||
const IntegrationsSvg = ({theme, styles}: Props) => {
|
||||
return (
|
||||
<Svg
|
||||
width={246}
|
||||
|
|
@ -52,20 +53,20 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M156.819 51.92H78.181v135.774h78.638V51.92z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Circle
|
||||
cx={87.6638}
|
||||
cy={78.5625}
|
||||
r={5.31027}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Circle
|
||||
cx={87.6638}
|
||||
cy={110.424}
|
||||
r={5.31027}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Ellipse
|
||||
|
|
@ -73,7 +74,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
cy={142.286}
|
||||
rx={5.31027}
|
||||
ry={5.31027}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -82,7 +83,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={36.1098}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -91,7 +92,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={36.1098}
|
||||
height={2.12411}
|
||||
rx={1.06206}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -100,7 +101,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={36.1098}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -109,7 +110,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={50.9786}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -118,7 +119,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={50.9786}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -127,7 +128,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={50.9786}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -136,7 +137,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={25.4893}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -145,7 +146,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={25.4893}
|
||||
height={2.12411}
|
||||
rx={1.06206}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -154,7 +155,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={25.4893}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -163,7 +164,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={55.2268}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -172,7 +173,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={55.2268}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -181,11 +182,11 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={55.2268}
|
||||
height={2.12411}
|
||||
rx={1.06205}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.24}
|
||||
/>
|
||||
<Path
|
||||
fill='#1E325C'
|
||||
fill={theme.sidebarBg}
|
||||
d='M78.1808 51.9202H156.8191V66.6649H78.1808z'
|
||||
/>
|
||||
<Rect
|
||||
|
|
@ -195,7 +196,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={25.8032}
|
||||
height={1.84308}
|
||||
rx={0.921542}
|
||||
fill='#fff'
|
||||
fill={theme.sidebarText}
|
||||
/>
|
||||
<Rect
|
||||
opacity={0.4}
|
||||
|
|
@ -204,7 +205,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={6.14362}
|
||||
height={6.14362}
|
||||
rx={2}
|
||||
fill='#fff'
|
||||
fill={theme.sidebarText}
|
||||
/>
|
||||
<Rect
|
||||
opacity={0.4}
|
||||
|
|
@ -213,20 +214,11 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={6.14362}
|
||||
height={6.14362}
|
||||
rx={2}
|
||||
fill='#fff'
|
||||
fill={theme.sidebarText}
|
||||
/>
|
||||
<Mask
|
||||
id='a'
|
||||
|
||||
// @ts-expect-error style not intrinsic
|
||||
style={{
|
||||
maskType: 'alpha',
|
||||
}}
|
||||
maskUnits='userSpaceOnUse'
|
||||
x={71}
|
||||
y={29}
|
||||
width={93}
|
||||
height={181}
|
||||
>
|
||||
<Rect
|
||||
x={71}
|
||||
|
|
@ -234,7 +226,7 @@ const IntegrationsSvg = ({styles}: SvgProps) => {
|
|||
width={93}
|
||||
height={181}
|
||||
rx={16}
|
||||
fill='#D9D9D9'
|
||||
fill='#fff'
|
||||
/>
|
||||
</Mask>
|
||||
<G
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import {StyleProp, ViewStyle} from 'react-native';
|
||||
import Svg, {Ellipse, Path, Mask, G, Defs, ClipPath} from 'react-native-svg';
|
||||
import Svg, {
|
||||
Ellipse,
|
||||
Path,
|
||||
Mask,
|
||||
G,
|
||||
} from 'react-native-svg';
|
||||
|
||||
type SvgProps = {
|
||||
type Props = {
|
||||
theme: Theme;
|
||||
styles: StyleProp<ViewStyle>;
|
||||
};
|
||||
}
|
||||
|
||||
const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
||||
const TeamCommunicationSvg = ({theme, styles}: Props) => {
|
||||
return (
|
||||
<Svg
|
||||
width={253}
|
||||
|
|
@ -23,11 +29,11 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
cy={90.6649}
|
||||
rx={66.4115}
|
||||
ry={66.2887}
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M67.493 157.454c36.953 0 66.911-29.902 66.911-66.79 0-36.886-29.958-66.788-66.911-66.788S.582 53.778.582 90.665s29.958 66.789 66.911 66.789z'
|
||||
stroke='#3F4350'
|
||||
stroke={theme.centerChannelColor}
|
||||
strokeOpacity={0.16}
|
||||
/>
|
||||
<Ellipse
|
||||
|
|
@ -35,21 +41,12 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
cy={90.6649}
|
||||
rx={66.4115}
|
||||
ry={66.2887}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<Mask
|
||||
id='a'
|
||||
|
||||
// @ts-expect-error style not intrinsic
|
||||
style={{
|
||||
maskType: 'alpha',
|
||||
}}
|
||||
maskUnits='userSpaceOnUse'
|
||||
x={1}
|
||||
y={24}
|
||||
width={133}
|
||||
height={133}
|
||||
>
|
||||
<Ellipse
|
||||
cx={67.493}
|
||||
|
|
@ -73,7 +70,7 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M87.955 155.09c-7.675 2.795-15.96 4.315-24.605 4.315-4.954 0-9.793-.502-14.467-1.455-15.364-3.139-28.948-11.158-39.05-22.366-.179-5.382-.193-11.689.03-19.063 1.342-43.75 4.12-41.615 42.488-41.901 43.38-.323 37.45 17.937 38.01 33.309.358 9.789-.92 32.263-2.406 47.161z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M45.76 84.853c2.721 1.01 9.98.538 11.48-1.634 1.034-1.505 2.018-3.053 3.03-4.572.812-1.225 1.608-2.45 2.384-3.698-3.08-.243-6.498-.358-10.303-.33-5.083.036-9.527.036-13.44.1 3.748 4.143 1.644 8.206 6.85 10.134zM90.353 98.304c-1.343.093-2.664.301-3.906.51-6.39 1.081-2.9 3.152-2.663 26.701.122 11.903 2.204 18.69.947 30.579 0 .028-.014.05-.014.079a64.146 64.146 0 003.245-1.09c1.486-14.899 2.764-37.372 2.405-47.161-.115-3.147.043-6.414 0-9.625l-.014.007zM73.502 147.351c-.265 7.374-.983 6.163-7.086 2.2-4.703-3.053-12.622 4.464-24.18 6.7a71.825 71.825 0 01-25.819-14.246c-4.975-12.126-6.002-28.859-6.002-38.362 0-.953 22.566 1.226 22.566 1.226-.13 17.249 1.6 37.379 15.902 34.835 14.302-2.537 24.892.273 24.62 7.647z'
|
||||
|
|
@ -106,7 +103,7 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M106.409 36.705c.892 0 1.763.266 2.505.763a4.522 4.522 0 011.66 2.03 4.543 4.543 0 01-.977 4.933 4.492 4.492 0 01-4.913.98 4.533 4.533 0 01-2.783-4.18 4.535 4.535 0 011.318-3.202 4.51 4.51 0 013.19-1.324zM123.503 36.705c.892 0 1.764.266 2.505.763a4.535 4.535 0 01.683 6.963 4.502 4.502 0 01-4.913.98 4.533 4.533 0 01-2.783-4.18 4.517 4.517 0 011.319-3.202 4.506 4.506 0 013.189-1.324zM140.579 36.705a4.495 4.495 0 012.506.76 4.522 4.522 0 011.663 2.03 4.545 4.545 0 01-.973 4.934 4.49 4.49 0 01-4.914.984 4.517 4.517 0 01-2.025-1.668 4.543 4.543 0 01.557-5.714 4.503 4.503 0 013.186-1.326z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M96.666 31.688a14.254 14.254 0 012.53-4.967 14.194 14.194 0 014.235-3.61.494.494 0 00-.2-.93c-3.156-.19-9.525.486-7.528 9.46a.5.5 0 00.463.403.495.495 0 00.5-.356z'
|
||||
|
|
@ -117,11 +114,11 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
cy={150.952}
|
||||
rx={53.6174}
|
||||
ry={53.5182}
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M198.383 204.97c29.887 0 54.117-24.184 54.117-54.018 0-29.835-24.23-54.019-54.117-54.019-29.888 0-54.118 24.184-54.118 54.019 0 29.834 24.23 54.018 54.118 54.018z'
|
||||
stroke='#3F4350'
|
||||
stroke={theme.centerChannelColor}
|
||||
strokeOpacity={0.16}
|
||||
/>
|
||||
<Ellipse
|
||||
|
|
@ -129,21 +126,12 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
cy={150.952}
|
||||
rx={53.6174}
|
||||
ry={53.5182}
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<Mask
|
||||
id='b'
|
||||
|
||||
// @ts-expect-error style not intrinsic
|
||||
style={{
|
||||
maskType: 'alpha',
|
||||
}}
|
||||
maskUnits='userSpaceOnUse'
|
||||
x={144}
|
||||
y={97}
|
||||
width={109}
|
||||
height={108}
|
||||
>
|
||||
<Ellipse
|
||||
cx={198.383}
|
||||
|
|
@ -156,7 +144,7 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
<G mask='url(#b)'>
|
||||
<Path
|
||||
d='M210.875 125.784c-3.074 0-5.757.121-8.091.386-17.64 1.983-10.847 10.028-13.268 32.765-2.738 25.751-8.427 41.419 18.763 44.087 27.19 2.668 31.165-13.17 33.438-42.502 2.273-29.326-3.975-34.736-30.842-34.736z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M197.734 185.922s.014 6.945-2.067 14.057c-.499 1.715-1.118 3.436-1.9 5.069h-26.26a165.66 165.66 0 003.003-39.886c-.033-.861-1.387-.861-1.347 0a164.613 164.613 0 01-3.03 39.886h-22.207c.532-.497.128-44.256 13.296-60.075a18.558 18.558 0 013.623-3.368c9.174-6.481 15.741-3.94 21.324 4.417 1.192 1.781 2.337 3.825 3.455 6.111 2.425 4.961 4.715 11.025 7.025 17.876a584.942 584.942 0 013.22 9.93c.269.867.545 1.741.822 2.628.343 1.11.693 2.226 1.043 3.355z'
|
||||
|
|
@ -176,7 +164,7 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M202.936 126.362c-11.177.942-39.797-1.45-44.092 11.581-3.912 11.851 8.658 10.218 12.071 18.797 3.407 8.579 3.602 15.66 6.82 8.023 3.219-7.637-.592-17.361-2.194-21.555-1.596-4.195 12.482 8.579 21.261 4.005 8.779-4.574 6.134-20.851 6.134-20.851z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M160.343 135.237c-.639.857-1.157 1.788-1.5 2.834-3.907 11.801 8.648 10.175 12.058 18.717 3.403 8.542 3.598 15.593 6.812 7.989 3.215-7.604-.592-17.287-2.192-21.463-2.045-7.274-11.251-8.907-15.178-8.077z'
|
||||
|
|
@ -184,12 +172,12 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M228.89 144.895c-.1-.845-.976-.772-.916.087 1.639 22.147-8.434 28.823-8.434 28.823 9.874-5.585 10.703-17.733 9.35-28.91zM190.175 137.256c-.447 2.401-1.53 5.579-1.333 8.096.072.907.604 1.732.689 2.666.151 1.562.355 5.033.276 6.616-.039.872 1.326-5.743.407-8.491-.873-2.612.387-5.756.906-8.519.157-.852-.788-1.213-.945-.361v-.007z'
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.64}
|
||||
/>
|
||||
<Path
|
||||
d='M189.745 173.227h-6.484c-.804 0-1.532-.473-1.827-1.199l-4.643-11.221c-.522-1.252.432-2.623 1.827-2.623h6.484c.803 0 1.532.473 1.827 1.198l4.643 11.221c.522 1.252-.433 2.624-1.827 2.624z'
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
/>
|
||||
<Path
|
||||
d='M222.202 126.369c20.056 1.498 25.161 7.51 25.161 30.04 0 35.031-20.789 38.181-36.466 31.108-15.677-7.067-24.335-13.415-27.29-18.957-2.384-4.467 2.902 0 8.98 1.216 1.525.302 2.909 1.135 4.319 1.518 31.939 8.679 36.164-4.305 34.337-19.614-1.827-15.309-9.035-25.318-9.035-25.318l-.006.007z'
|
||||
|
|
@ -197,7 +185,7 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
/>
|
||||
<Path
|
||||
d='M222.249 126.362s5.42 8.321 7.251 23.638c1.254 10.527-5 22-10.068 23.677-.134 5.435-1.381 10.829-3.95 15.545 14.841 4.494 31.881-1.075 31.881-32.817 0-22.532-5.097-28.545-25.121-30.043h.007z'
|
||||
fill='#fff'
|
||||
fill={theme.centerChannelBg}
|
||||
/>
|
||||
<Path
|
||||
d='M154.275 202.801h-33.368a2.26 2.26 0 01-1.386-.663 2.309 2.309 0 01-.655-1.404v-43.883a2.3 2.3 0 01.658-1.421 2.268 2.268 0 011.404-.666h24.745l10.715 10.727v35.222c.006.264-.041.527-.138.773a1.926 1.926 0 01-.429.653c-.418.404-.968.64-1.546.662z'
|
||||
|
|
@ -263,18 +251,9 @@ const TeamCommunicationSvg = ({styles}: SvgProps) => {
|
|||
fillRule='evenodd'
|
||||
clipRule='evenodd'
|
||||
d='M161.915 54.431a1.5 1.5 0 011.626-1.362c4.754.418 12.243 3.2 19.554 7.49 6.326 3.711 12.707 8.66 17.203 14.432l2.18-9.876a1.501 1.501 0 012.93.647l-2.91 13.182a1.501 1.501 0 01-1.789 1.141l-13.182-2.91a1.5 1.5 0 11.647-2.93l9.339 2.063c-4.155-5.145-9.993-9.675-15.936-13.162-7.141-4.189-14.182-6.726-18.3-7.089a1.5 1.5 0 01-1.362-1.626zM102.839 185.763a1.5 1.5 0 01-1.439 1.559c-4.086.162-10.71-1.381-17.324-4.201-5.578-2.377-11.338-5.741-15.723-9.971l-.909 10.107a1.5 1.5 0 01-2.987-.268l1.209-13.446a1.5 1.5 0 011.628-1.36l13.446 1.209a1.501 1.501 0 01-.269 2.988l-9.463-.851c3.957 3.641 9.106 6.642 14.244 8.833 6.433 2.742 12.581 4.099 16.029 3.962a1.5 1.5 0 011.558 1.439z'
|
||||
fill='#3F4350'
|
||||
fill={theme.centerChannelColor}
|
||||
fillOpacity={0.32}
|
||||
/>
|
||||
<Defs>
|
||||
<ClipPath id='clip0_418_7357'>
|
||||
<Path
|
||||
fill='#fff'
|
||||
transform='translate(113.846 147.763)'
|
||||
d='M0 0H37.4959V48.0372H0z'
|
||||
/>
|
||||
</ClipPath>
|
||||
</Defs>
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import React from 'react';
|
|||
import {useIntl} from 'react-intl';
|
||||
import {StyleSheet} from 'react-native';
|
||||
|
||||
import {useTheme} from '@context/theme';
|
||||
import {OnboardingItem} from '@typings/screens/onboarding';
|
||||
|
||||
import CallsSvg from './illustrations/calls';
|
||||
|
|
@ -24,10 +25,31 @@ const styles = StyleSheet.create({
|
|||
|
||||
const useSalidesData = () => {
|
||||
const intl = useIntl();
|
||||
const callsSvg = (<CallsSvg styles={styles.image}/>);
|
||||
const chatSvg = (<ChatSvg styles={styles.image}/>);
|
||||
const teamCommunicationSvg = (<TeamCommunicationSvg styles={styles.image}/>);
|
||||
const integrationsSvg = (<IntegrationsSvg styles={[styles.image, styles.lastSlideImage]}/>);
|
||||
const theme = useTheme();
|
||||
const callsSvg = (
|
||||
<CallsSvg
|
||||
styles={styles.image}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
const chatSvg = (
|
||||
<ChatSvg
|
||||
styles={styles.image}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
const teamCommunicationSvg = (
|
||||
<TeamCommunicationSvg
|
||||
styles={styles.image}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
const integrationsSvg = (
|
||||
<IntegrationsSvg
|
||||
styles={[styles.image, styles.lastSlideImage]}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
|
||||
const slidesData: OnboardingItem[] = [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue