diff --git a/app/screens/background.tsx b/app/screens/background.tsx
index a9c45385b..b160e7eed 100644
--- a/app/screens/background.tsx
+++ b/app/screens/background.tsx
@@ -4,16 +4,18 @@
/* eslint-disable max-lines */
import React from 'react';
+import {StyleSheet} from 'react-native';
import Svg, {
Path,
+ ClipPath,
+ Rect,
G,
Defs,
LinearGradient,
Stop,
} from 'react-native-svg';
-import {useIsTablet} from '@hooks/device';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {makeStyleSheetFromTheme} from '@utils/theme';
type Props = {
theme: Theme;
@@ -21,9 +23,8 @@ type Props = {
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
backgroundGraphic: {
- backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
- position: 'absolute',
- flex: 1,
+ backgroundColor: theme.centerChannelColor,
+ ...StyleSheet.absoluteFillObject,
},
}));
@@ -32,516 +33,100 @@ const Background = ({
}: Props) => {
const styles = getStyleSheet(theme);
- const isTablet = useIsTablet();
-
return (
);
diff --git a/app/screens/forgot_password/inbox.tsx b/app/screens/forgot_password/inbox.tsx
index ddfaa29f1..62edd42a9 100644
--- a/app/screens/forgot_password/inbox.tsx
+++ b/app/screens/forgot_password/inbox.tsx
@@ -3,208 +3,244 @@
import * as React from 'react';
import Svg, {
- type SvgProps,
Path,
Mask,
G,
Defs,
- Pattern,
- Use,
- Image,
+ Ellipse,
+ Rect,
+ ClipPath,
} from 'react-native-svg';
-const Inbox = (props: SvgProps) => (
-
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
export default Inbox;
diff --git a/app/screens/forgot_password/index.tsx b/app/screens/forgot_password/index.tsx
index f3b671818..c5466b5c4 100644
--- a/app/screens/forgot_password/index.tsx
+++ b/app/screens/forgot_password/index.tsx
@@ -80,12 +80,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
flex: 1,
},
successText: {
- color: changeOpacity(theme.centerChannelColor, 0.64),
- ...typography('Body', 200, 'SemiBold'),
+ color: changeOpacity(theme.centerChannelColor, 0.75),
+ ...typography('Body', 200, 'Regular'),
textAlign: 'center',
},
successTitle: {
color: theme.centerChannelColor,
+ marginTop: 24,
marginBottom: 12,
...typography('Heading', 1000),
},
@@ -151,7 +152,7 @@ const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
testID={'password_send.link.sent'}
nativeID={SecurityManager.getShieldScreenId(componentId, false, true)}
>
-
+
({
centered: {
width: '100%',
- maxWidth: 600,
+ maxWidth: 480,
},
container: {
flex: 1,
@@ -57,8 +57,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
header: {
color: theme.centerChannelColor,
+ marginTop: 24,
marginBottom: 12,
...typography('Heading', 1000, 'SemiBold'),
+ textAlign: 'center',
},
innerContainer: {
alignItems: 'center',
@@ -71,12 +73,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
shield: {
alignItems: 'center',
- marginBottom: 56.22,
},
subheader: {
color: changeOpacity(theme.centerChannelColor, 0.6),
marginBottom: 12,
...typography('Body', 200, 'Regular'),
+ textAlign: 'center',
},
}));
@@ -153,7 +155,7 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD
>
-
+
{
+ return (
+
+ );
+};
-const Shield = (props: SvgProps) => (
-
-);
export default Shield;
diff --git a/app/screens/onboarding/illustrations/calls.tsx b/app/screens/onboarding/illustrations/calls.tsx
index 56c532f51..4e53057a4 100644
--- a/app/screens/onboarding/illustrations/calls.tsx
+++ b/app/screens/onboarding/illustrations/calls.tsx
@@ -3,10 +3,9 @@
import React from 'react';
import Svg, {
- Ellipse,
Path,
- Mask,
- G,
+ Rect,
+ Circle,
} from 'react-native-svg';
import type {StyleProp, ViewStyle} from 'react-native';
@@ -19,224 +18,245 @@ type Props = {
const CallsSvg = ({theme, styles}: Props) => {
return (
);
diff --git a/app/screens/onboarding/illustrations/chat.tsx b/app/screens/onboarding/illustrations/chat.tsx
index 91f8b65b5..c80d2c439 100644
--- a/app/screens/onboarding/illustrations/chat.tsx
+++ b/app/screens/onboarding/illustrations/chat.tsx
@@ -5,7 +5,10 @@ import * as React from 'react';
import Svg, {
G,
Path,
- Ellipse,
+ Circle,
+ Rect,
+ Defs,
+ ClipPath,
} from 'react-native-svg';
import type {StyleProp, ViewStyle} from 'react-native';
@@ -18,131 +21,171 @@ type Props = {
const ChatSvg = ({theme, styles}: Props) => {
return (
);
};
diff --git a/app/screens/onboarding/illustrations/integrations.tsx b/app/screens/onboarding/illustrations/integrations.tsx
index 310a29a45..d0c0e63e4 100644
--- a/app/screens/onboarding/illustrations/integrations.tsx
+++ b/app/screens/onboarding/illustrations/integrations.tsx
@@ -1,15 +1,17 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
+/* eslint-disable max-lines */
+
import React from 'react';
import Svg, {
Rect,
Path,
Circle,
Ellipse,
- Mask,
G,
Defs,
+ ClipPath,
LinearGradient,
Stop,
} from 'react-native-svg';
@@ -24,479 +26,516 @@ type Props = {
const IntegrationsSvg = ({theme, styles}: Props) => {
return (
);
diff --git a/app/screens/onboarding/illustrations/team_communication.tsx b/app/screens/onboarding/illustrations/team_communication.tsx
index 95edb4014..0dc03d7a3 100644
--- a/app/screens/onboarding/illustrations/team_communication.tsx
+++ b/app/screens/onboarding/illustrations/team_communication.tsx
@@ -3,10 +3,12 @@
import React from 'react';
import Svg, {
- Ellipse,
Path,
- Mask,
G,
+ Circle,
+ Rect,
+ Defs,
+ ClipPath,
} from 'react-native-svg';
import type {StyleProp, ViewStyle} from 'react-native';
@@ -19,242 +21,327 @@ type Props = {
const TeamCommunicationSvg = ({theme, styles}: Props) => {
return (
);
};