diff --git a/app/components/no_results_with_term/index.tsx b/app/components/no_results_with_term/index.tsx
index c7887a983..3320fe73f 100644
--- a/app/components/no_results_with_term/index.tsx
+++ b/app/components/no_results_with_term/index.tsx
@@ -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'),
diff --git a/app/components/no_results_with_term/search_files_illustration.tsx b/app/components/no_results_with_term/search_files_illustration.tsx
index ddb8ea5cd..f85319f9c 100644
--- a/app/components/no_results_with_term/search_files_illustration.tsx
+++ b/app/components/no_results_with_term/search_files_illustration.tsx
@@ -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 (
-
);
}
diff --git a/app/components/no_results_with_term/search_illustration.tsx b/app/components/no_results_with_term/search_illustration.tsx
index 2c9443765..81f3af532 100644
--- a/app/components/no_results_with_term/search_illustration.tsx
+++ b/app/components/no_results_with_term/search_illustration.tsx
@@ -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 (
);
}
diff --git a/app/components/user_list/__snapshots__/index.test.tsx.snap b/app/components/user_list/__snapshots__/index.test.tsx.snap
index d3377ea71..081638a9d 100644
--- a/app/components/user_list/__snapshots__/index.test.tsx.snap
+++ b/app/components/user_list/__snapshots__/index.test.tsx.snap
@@ -65,11 +65,11 @@ exports[`components/channel_list_row should show no results 1`] = `
>
-
-
+
-
-
+
-
-
+
+ fillOpacity={0.12}
+ height={27}
+ propList={
+ [
+ "fill",
+ "fillOpacity",
+ ]
+ }
+ rx={3.75}
+ width={76}
+ x={46.255}
+ y={67}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(
);
diff --git a/app/screens/channel/channel_post_list/intro/illustration/public.tsx b/app/screens/channel/channel_post_list/intro/illustration/public.tsx
index 95cad2725..faf9edfe2 100644
--- a/app/screens/channel/channel_post_list/intro/illustration/public.tsx
+++ b/app/screens/channel/channel_post_list/intro/illustration/public.tsx
@@ -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) => (
);
diff --git a/app/screens/channel/channel_post_list/intro/illustration/town_square.tsx b/app/screens/channel/channel_post_list/intro/illustration/town_square.tsx
index 0bea3d2ad..18fb85915 100644
--- a/app/screens/channel/channel_post_list/intro/illustration/town_square.tsx
+++ b/app/screens/channel/channel_post_list/intro/illustration/town_square.tsx
@@ -3,17 +3,12 @@
import * as React from 'react';
import Svg, {
+ Circle,
+ ClipPath,
+ Defs,
G,
Path,
- Mask,
- Ellipse,
- Defs,
- Pattern,
- Use,
- Image,
- LinearGradient,
- Stop,
- ClipPath,
+ Rect,
} from 'react-native-svg';
type Props = {
@@ -22,310 +17,217 @@ type Props = {
const TownSquareIllustration = ({theme}: Props) => (
);
diff --git a/app/screens/global_threads/threads_list/illustrations/empty_state.tsx b/app/screens/global_threads/threads_list/illustrations/empty_state.tsx
index 4b3cfb6c8..f42bf5be3 100644
--- a/app/screens/global_threads/threads_list/illustrations/empty_state.tsx
+++ b/app/screens/global_threads/threads_list/illustrations/empty_state.tsx
@@ -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 (
);
diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/empty_unreads.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/empty_unreads.tsx
index b519b22b1..00220f5ea 100644
--- a/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/empty_unreads.tsx
+++ b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/empty_unreads.tsx
@@ -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 (
);
}
diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx
index 203936a4c..68d865a5c 100644
--- a/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx
+++ b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx
@@ -31,6 +31,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
top: -20,
},
title: {
+ marginTop: 24,
color: theme.sidebarText,
textAlign: 'center',
...typography('Heading', 400, 'SemiBold'),
diff --git a/app/screens/home/recent_mentions/components/mention_icon.tsx b/app/screens/home/recent_mentions/components/mention_icon.tsx
index 58fa027d6..f6d2d227b 100644
--- a/app/screens/home/recent_mentions/components/mention_icon.tsx
+++ b/app/screens/home/recent_mentions/components/mention_icon.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 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 (
);
}
diff --git a/app/screens/home/saved_messages/components/saved_posts_icon.tsx b/app/screens/home/saved_messages/components/saved_posts_icon.tsx
index e0a946259..321d80664 100644
--- a/app/screens/home/saved_messages/components/saved_posts_icon.tsx
+++ b/app/screens/home/saved_messages/components/saved_posts_icon.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 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 (
);
}