diff --git a/app/components/illustrations/draft_empty.tsx b/app/components/illustrations/draft_empty.tsx new file mode 100644 index 000000000..b03c2ac13 --- /dev/null +++ b/app/components/illustrations/draft_empty.tsx @@ -0,0 +1,173 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import Svg, {Circle, ClipPath, Defs, G, Line, Path, Rect} from 'react-native-svg'; + +import {useTheme} from '@context/theme'; + +const DraftEmpty = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DraftEmpty; diff --git a/app/components/illustrations/loading_error.tsx b/app/components/illustrations/loading_error.tsx new file mode 100644 index 000000000..c43fca9d5 --- /dev/null +++ b/app/components/illustrations/loading_error.tsx @@ -0,0 +1,115 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import Svg, {Circle, Ellipse, Path, Rect} from 'react-native-svg'; + +import {useTheme} from '@context/theme'; + +const LoadingError = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default LoadingError; diff --git a/app/components/illustrations/review_app.tsx b/app/components/illustrations/review_app.tsx index 5ebaf5a7d..263eab5ad 100644 --- a/app/components/illustrations/review_app.tsx +++ b/app/components/illustrations/review_app.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import Svg, { Path, - Mask, G, Rect, + Circle, } from 'react-native-svg'; type Props = { @@ -15,180 +15,234 @@ type Props = { function ReviewAppIllustration({theme}: Props) { return ( - - - - - - - - - - - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + ); diff --git a/app/components/loading_error/__snapshots__/index.test.tsx.snap b/app/components/loading_error/__snapshots__/index.test.tsx.snap index 6b65f1227..b5110cafb 100644 --- a/app/components/loading_error/__snapshots__/index.test.tsx.snap +++ b/app/components/loading_error/__snapshots__/index.test.tsx.snap @@ -11,29 +11,361 @@ exports[`Loading Error should match snapshot 1`] = ` } } > - - + - + > + + + + + + + + + + + + + + + + ({ justifyContent: 'center', padding: 20, }, - iconWrapper: { - height: 120, - width: 120, - backgroundColor: changeOpacity(theme.sidebarText, 0.08), - borderRadius: 60, - justifyContent: 'center', - alignItems: 'center', - }, - icon: { - fontSize: 72, - lineHeight: 72, - color: changeOpacity(theme.sidebarText, 0.48), - }, header: { color: theme.sidebarHeaderTextColor, marginTop: 20, @@ -70,12 +57,7 @@ const LoadingError = ({loading, message, onRetry, title}: Props) => { return ( - - - + {title} diff --git a/app/screens/global_drafts/components/draft_empty_component.tsx b/app/screens/global_drafts/components/draft_empty_component.tsx index 046ae00d4..1f1b51437 100644 --- a/app/screens/global_drafts/components/draft_empty_component.tsx +++ b/app/screens/global_drafts/components/draft_empty_component.tsx @@ -1,17 +1,15 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {Image} from 'expo-image'; import React from 'react'; import {View} from 'react-native'; import FormattedText from '@components/formatted_text'; +import DraftEmpty from '@components/illustrations/draft_empty'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -const draft_message_image = require('@assets/images/Draft_Message.png'); - const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { @@ -27,6 +25,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { title: { ...typography('Heading', 400, 'SemiBold'), color: theme.centerChannelColor, + marginTop: 20, }, subtitle: { ...typography('Body'), @@ -45,10 +44,7 @@ const DraftEmptyComponent = () => { style={styles.container} testID='draft_empty_component' > - + - - + - + > + + + + + + + + + + + + + + + + - - + - + > + + + + + + + + + + + + + + + + ({ title: { ...typography('Heading', 600, 'SemiBold'), color: theme.centerChannelColor, - marginTop: 0, + marginTop: 24, marginBottom: 8, textAlign: 'center', }, diff --git a/assets/base/images/Draft_Message.png b/assets/base/images/Draft_Message.png deleted file mode 100644 index 0f065934a..000000000 Binary files a/assets/base/images/Draft_Message.png and /dev/null differ