MM-12301 Add padding for error text on edit profile screen (#2214)

app/components/error_text/__snapshots__/error_text.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorText should match snapshot 1`] = `
+<Component
+  style={
+    Array [
+      Object {
+        "color": "red",
+        "fontSize": 12,
+        "marginBottom": 15,
+        "marginTop": 15,
+        "textAlign": "left",
+      },
+      Object {
+        "color": "#fd5960",
+      },
+      Object {
+        "fontSize": 14,
+        "marginHorizontal": 15,
+      },
+    ]
+  }
+>
+  Username must begin with a letter and contain between 3 and 22 characters including numbers, lowercase letters, and the symbols
+</Component>
+`;

app/components/error_text/error_text.js

@@ -1,18 +1,16 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {connect} from 'react-redux';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Text} from 'react-native';
 
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import FormattedText from 'app/components/formatted_text';
-import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {GlobalStyles} from 'app/styles';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
-class ErrorText extends PureComponent {
+export default class ErrorText extends PureComponent {
     static propTypes = {
         error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
         textStyle: CustomPropTypes.Style,
@@ -54,12 +52,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
     };
 });
-
-function mapStateToProps(state, ownProps) {
-    return {
-        ...ownProps,
-        theme: getTheme(state),
-    };
-}
-
-export default connect(mapStateToProps)(ErrorText);

app/components/error_text/error_text.test.js

@@ -0,0 +1,29 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import ErrorText from './error_text.js';
+
+describe('ErrorText', () => {
+    const baseProps = {
+        textStyle: {
+            fontSize: 14,
+            marginHorizontal: 15,
+        },
+        theme: Preferences.THEMES.default,
+        error: {
+            message: 'Username must begin with a letter and contain between 3 and 22 characters including numbers, lowercase letters, and the symbols',
+        },
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <ErrorText {...baseProps}/>,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});

app/components/error_text/index.js

@@ -0,0 +1,15 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
+
+import ErrorText from './error_text.js';
+
+function mapStateToProps(state) {
+    return {
+        theme: getTheme(state),
+    };
+}
+
+export default connect(mapStateToProps)(ErrorText);

app/screens/edit_profile/edit_profile.js

@@ -550,6 +550,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         errorText: {
             fontSize: 14,
+            marginHorizontal: 15,
         },
         separator: {
             height: 15,
@@ -560,4 +561,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
     };
 });
-