[MM-31177] Use png over Compass icon for logo (#5008)

* Use png over Compass icon for logo

* Update splash screen pngs

* Revert "Update splash screen pngs"

This reverts commit c79c3c1364af93925a96d9420d4799ee87646b62.

* Update logo

app/screens/client_upgrade/client_upgrade.js

@@ -6,6 +6,7 @@ import {Navigation} from 'react-native-navigation';
 import PropTypes from 'prop-types';
 import {
     Alert,
+    Image,
     Linking,
     ScrollView,
     TouchableOpacity,
@@ -15,13 +16,11 @@ import {intlShape} from 'react-intl';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {popTopScreen, dismissModal} from '@actions/navigation';
-import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
 import StatusBar from '@components/status_bar';
 import {UpgradeTypes} from '@constants';
 import {checkUpgradeType, isUpgradeAvailable} from '@utils/client_upgrade';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {GlobalStyles} from 'app/styles';
 
 export default class ClientUpgrade extends PureComponent {
     static propTypes = {
@@ -269,10 +268,9 @@ export default class ClientUpgrade extends PureComponent {
                     style={styles.scrollView}
                     contentContainerStyle={styles.scrollViewContent}
                 >
-                    <CompassIcon
-                        name='mattermost'
-                        size={76}
-                        style={[GlobalStyles.logo, styles.logo]}
+                    <Image
+                        source={require('@assets/images/logo.png')}
+                        style={{height: 72, resizeMode: 'contain'}}
                     />
                     {this.renderMessageContent()}
                 </ScrollView>

app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap

@@ -24,12 +24,16 @@ exports[`ForgotPassword match snapshot after success of sendPasswordResetEmail 1
         }
       }
     >
-      <CompassIcon
-        name="mattermost"
-        size={76}
+      <Image
+        source={
+          Object {
+            "testUri": "../../../dist/assets/images/logo.png",
+          }
+        }
         style={
           Object {
-            "color": "#2389D7",
+            "height": 72,
+            "resizeMode": "contain",
           }
         }
       />
@@ -110,12 +114,16 @@ exports[`ForgotPassword should match snapshot 1`] = `
         }
       }
     >
-      <CompassIcon
-        name="mattermost"
-        size={76}
+      <Image
+        source={
+          Object {
+            "testUri": "../../../dist/assets/images/logo.png",
+          }
+        }
         style={
           Object {
-            "color": "#2389D7",
+            "height": 72,
+            "resizeMode": "contain",
           }
         }
       />
@@ -224,12 +232,16 @@ exports[`ForgotPassword snapshot for error on failure of email regex 1`] = `
         }
       }
     >
-      <CompassIcon
-        name="mattermost"
-        size={76}
+      <Image
+        source={
+          Object {
+            "testUri": "../../../dist/assets/images/logo.png",
+          }
+        }
         style={
           Object {
-            "color": "#2389D7",
+            "height": 72,
+            "resizeMode": "contain",
           }
         }
       />

app/screens/forgot_password/forgot_password.js

@@ -7,6 +7,7 @@ import Button from 'react-native-button';
 import {intlShape} from 'react-intl';
 
 import {
+    Image,
     StyleSheet,
     Text,
     TextInput,
@@ -15,7 +16,6 @@ import {
 } from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
-import CompassIcon from '@components/compass_icon';
 import ErrorText from '@components/error_text';
 import FormattedText from '@components/formatted_text';
 import StatusBar from '@components/status_bar';
@@ -158,10 +158,9 @@ export default class ForgotPassword extends PureComponent {
                     onPress={this.blur}
                 >
                     <View style={style.innerContainer}>
-                        <CompassIcon
-                            name='mattermost'
-                            size={76}
-                            style={GlobalStyles.logo}
+                        <Image
+                            source={require('@assets/images/logo.png')}
+                            style={{height: 72, resizeMode: 'contain'}}
                         />
                         {displayError}
                         {passwordFormView}

app/screens/login/login.js

@@ -7,6 +7,7 @@ import {intlShape} from 'react-intl';
 import {
     ActivityIndicator,
     Dimensions,
+    Image,
     InteractionManager,
     Keyboard,
     StyleSheet,
@@ -20,7 +21,6 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {resetToChannel, goToScreen} from '@actions/navigation';
-import CompassIcon from '@components/compass_icon';
 import ErrorText from '@components/error_text';
 import FormattedText from '@components/formatted_text';
 import StatusBar from '@components/status_bar';
@@ -381,10 +381,9 @@ export default class Login extends PureComponent {
                         keyboardShouldPersistTaps='handled'
                         enableOnAndroid={true}
                     >
-                        <CompassIcon
-                            name='mattermost'
-                            size={76}
-                            style={GlobalStyles.logo}
+                        <Image
+                            source={require('@assets/images/logo.png')}
+                            style={{height: 72, resizeMode: 'contain'}}
                         />
                         <View testID='login.screen'>
                             <Text style={GlobalStyles.header}>

app/screens/login_options/login_options.js

@@ -17,7 +17,6 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import {goToScreen} from '@actions/navigation';
 import LocalConfig from '@assets/config';
 import gitlab from '@assets/images/gitlab.png';
-import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
 import StatusBar from '@components/status_bar';
 import {ViewTypes} from '@constants';
@@ -260,10 +259,9 @@ export default class LoginOptions extends PureComponent {
                     ref={this.scrollRef}
                 >
                     <StatusBar/>
-                    <CompassIcon
-                        name='mattermost'
-                        size={76}
-                        style={GlobalStyles.logo}
+                    <Image
+                        source={require('@assets/images/logo.png')}
+                        style={{height: 72, resizeMode: 'contain'}}
                     />
                     <Text style={GlobalStyles.header}>
                         {this.props.config.SiteName}

app/screens/mfa/mfa.js

@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
     ActivityIndicator,
+    Image,
     Keyboard,
     KeyboardAvoidingView,
     Platform,
@@ -15,7 +16,6 @@ import {
 import Button from 'react-native-button';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
-import CompassIcon from '@components/compass_icon';
 import ErrorText from '@components/error_text';
 import FormattedText from '@components/formatted_text';
 import StatusBar from '@components/status_bar';
@@ -146,10 +146,9 @@ export default class Mfa extends PureComponent {
                     <StatusBar/>
                     <TouchableWithoutFeedback onPress={this.blur}>
                         <View style={[GlobalStyles.container, GlobalStyles.signupContainer]}>
-                            <CompassIcon
-                                name='mattermost'
-                                size={76}
-                                style={GlobalStyles.logo}
+                            <Image
+                                source={require('@assets/images/logo.png')}
+                                style={{height: 72, resizeMode: 'contain'}}
                             />
                             <View>
                                 <FormattedText

app/screens/select_server/select_server.js

@@ -9,6 +9,7 @@ import {
     ActivityIndicator,
     Alert,
     DeviceEventEmitter,
+    Image,
     Keyboard,
     KeyboardAvoidingView,
     Platform,
@@ -28,7 +29,6 @@ import urlParse from 'url-parse';
 import {resetToChannel, goToScreen} from '@actions/navigation';
 import LocalConfig from '@assets/config';
 import AppVersion from '@components/app_version';
-import CompassIcon from '@components/compass_icon';
 import ErrorText from '@components/error_text';
 import FormattedText from '@components/formatted_text';
 import fetchConfig from '@init/fetch';
@@ -514,10 +514,9 @@ export default class SelectServer extends PureComponent {
                         accessible={false}
                     >
                         <View style={[GlobalStyles.container, GlobalStyles.signupContainer]}>
-                            <CompassIcon
-                                name='mattermost'
-                                size={76}
-                                style={GlobalStyles.logo}
+                            <Image
+                                source={require('@assets/images/logo.png')}
+                                style={{height: 72, resizeMode: 'contain'}}
                             />
 
                             <View testID='select_server.header.text'>

app/styles/index.js

@@ -109,7 +109,4 @@ export const GlobalStyles = StyleSheet.create({
         borderRadius: 3,
         color: '#3d3c40',
     },
-    logo: {
-        color: '#2389D7',
-    },
 });