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