diff --git a/app/screens/onboarding/illustrations/calls.tsx b/app/screens/onboarding/illustrations/calls.tsx index 31813a95e..1e0cfe727 100644 --- a/app/screens/onboarding/illustrations/calls.tsx +++ b/app/screens/onboarding/illustrations/calls.tsx @@ -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; }; -const CallsSvg = ({styles}: SvgProps) => { +const CallsSvg = ({theme, styles}: Props) => { return ( { cy={116.733} rx={72.9374} ry={72.8026} - fill='#fff' + fill={theme.centerChannelBg} /> { cy={116.733} rx={72.9374} ry={72.8026} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.16} /> { ry={72.8026} fill='#fff' /> - { /> { /> ; }; -const ChatSvg = ({styles}: SvgProps) => { +const ChatSvg = ({theme, styles}: Props) => { return ( { /> { /> { /> { /> { /> { /> { fillOpacity={0.12} /> - - - - - - - - - - - - - - - - - - - - - ); }; diff --git a/app/screens/onboarding/illustrations/integrations.tsx b/app/screens/onboarding/illustrations/integrations.tsx index 641150b53..bbae61885 100644 --- a/app/screens/onboarding/illustrations/integrations.tsx +++ b/app/screens/onboarding/illustrations/integrations.tsx @@ -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; }; -const IntegrationsSvg = ({styles}: SvgProps) => { +const IntegrationsSvg = ({theme, styles}: Props) => { return ( { /> { cy={142.286} rx={5.31027} ry={5.31027} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={36.1098} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={36.1098} height={2.12411} rx={1.06206} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={36.1098} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={50.9786} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={50.9786} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={50.9786} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={25.4893} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={25.4893} height={2.12411} rx={1.06206} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={25.4893} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={55.2268} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={55.2268} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={55.2268} height={2.12411} rx={1.06205} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.24} /> { width={25.8032} height={1.84308} rx={0.921542} - fill='#fff' + fill={theme.sidebarText} /> { width={6.14362} height={6.14362} rx={2} - fill='#fff' + fill={theme.sidebarText} /> { width={6.14362} height={6.14362} rx={2} - fill='#fff' + fill={theme.sidebarText} /> { width={93} height={181} rx={16} - fill='#D9D9D9' + fill='#fff' /> ; -}; +} -const TeamCommunicationSvg = ({styles}: SvgProps) => { +const TeamCommunicationSvg = ({theme, styles}: Props) => { return ( { cy={90.6649} rx={66.4115} ry={66.2887} - fill='#fff' + fill={theme.centerChannelBg} /> { cy={90.6649} rx={66.4115} ry={66.2887} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.16} /> { /> { /> { cy={150.952} rx={53.6174} ry={53.5182} - fill='#fff' + fill={theme.centerChannelBg} /> { cy={150.952} rx={53.6174} ry={53.5182} - fill='#3F4350' + fill={theme.centerChannelColor} fillOpacity={0.16} /> { { /> { /> { /> { 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} /> - - - - - ); }; diff --git a/app/screens/onboarding/slides_data.tsx b/app/screens/onboarding/slides_data.tsx index b5d2eed8f..b75516a78 100644 --- a/app/screens/onboarding/slides_data.tsx +++ b/app/screens/onboarding/slides_data.tsx @@ -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 = (); - const chatSvg = (); - const teamCommunicationSvg = (); - const integrationsSvg = (); + const theme = useTheme(); + const callsSvg = ( + + ); + const chatSvg = ( + + ); + const teamCommunicationSvg = ( + + ); + const integrationsSvg = ( + + ); const slidesData: OnboardingItem[] = [ {