White label about modal. Move strings to config. (#943)

* White label about modal. Move strings to config.

* Refactor styling and add powered by Mattermost

* Review feedback

* Use full bundle ids for about modal check

app/components/post_profile_picture/post_profile_picture.js

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Image, TouchableOpacity, View} from 'react-native';
 
-import MattermostIcon from 'app/components/mattermost_icon';
+import AppIcon from 'app/components/app_icon';
 import ProfilePicture from 'app/components/profile_picture';
 import {emptyFunction} from 'app/utils/general';
 import webhookIcon from 'assets/images/icons/webhook.jpg';
@@ -25,7 +25,7 @@ function PostProfilePicture(props) {
     if (isSystemMessage) {
         return (
             <View>
-                <MattermostIcon
+                <AppIcon
                     color={theme.centerChannelColor}
                     height={PROFILE_PICTURE_SIZE}
                     width={PROFILE_PICTURE_SIZE}

app/screens/about/about.js

@@ -16,9 +16,11 @@ import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
-import MattermostIcon from 'app/components/mattermost_icon';
+import AppIcon from 'app/components/app_icon';
 import Config from 'assets/config';
 
+const MATTERMOST_BUNDLE_IDS = ['com.mattermost.rnbeta', 'com.mattermost.rn'];
+
 export default class About extends PureComponent {
     static propTypes = {
         config: PropTypes.object.isRequired,
@@ -27,11 +29,11 @@ export default class About extends PureComponent {
     };
 
     handleAboutTeam = () => {
-        Linking.openURL('http://www.mattermost.org/');
+        Linking.openURL(Config.AboutTeamURL);
     };
 
     handleAboutEnterprise = () => {
-        Linking.openURL('http://about.mattermost.com/');
+        Linking.openURL(Config.AboutEnterpriseURL);
     };
 
     handlePlatformNotice = () => {
@@ -73,7 +75,7 @@ export default class About extends PureComponent {
                     onPress={this.handleAboutTeam}
                 >
                     <Text style={style.learnLink}>
-                        {'mattermost.org'}
+                        {Config.TeamEditionLearnURL}
                     </Text>
                 </TouchableOpacity>
             </View>
@@ -108,7 +110,7 @@ export default class About extends PureComponent {
                         onPress={this.handleAboutEnterprise}
                     >
                         <Text style={style.learnLink}>
-                            {'about.mattermost.com'}
+                            {Config.EELearnURL}
                         </Text>
                     </TouchableOpacity>
                 </View>
@@ -126,13 +128,13 @@ export default class About extends PureComponent {
                 licensee = (
                     <View style={style.licenseContainer}>
                         <FormattedText
-                            id='about.licensed'
-                            defaultMessage='Licensed to:'
+                            id='mobile.about.licensed'
+                            defaultMessage='Licensed to: {company}'
                             style={style.info}
+                            values={{
+                                company: license.Company
+                            }}
                         />
-                        <Text style={style.info}>
-                            {'\u00a0' + license.Company}
-                        </Text>
                     </View>
                 );
             }
@@ -172,7 +174,7 @@ export default class About extends PureComponent {
                     contentContainerStyle={style.scrollViewContent}
                 >
                     <View style={style.logoContainer}>
-                        <MattermostIcon
+                        <AppIcon
                             color={theme.centerChannelColor}
                             height={120}
                             width={120}
@@ -181,7 +183,7 @@ export default class About extends PureComponent {
                     <View style={style.infoContainer}>
                         <View style={style.titleContainer}>
                             <Text style={style.title}>
-                                {'Mattermost '}
+                                {`${config.SiteName} `}
                             </Text>
                             {title}
                         </View>
@@ -206,6 +208,16 @@ export default class About extends PureComponent {
                         />
                         {licensee}
                         {learnMore}
+                        {!MATTERMOST_BUNDLE_IDS.includes(DeviceInfo.getBundleId()) &&
+                            <FormattedText
+                                id='mobile.about.powered_by'
+                                defaultMessage='{site} is powered by Mattermost'
+                                style={style.footerText}
+                                values={{
+                                    site: this.props.config.SiteName
+                                }}
+                            />
+                        }
                         <FormattedText
                             id='mobile.about.copyright'
                             defaultMessage='Copyright 2015-{currentYear} Mattermost, Inc. All rights reserved'
@@ -339,12 +351,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         licenseContainer: {
             flex: 1,
             flexDirection: 'row',
-            marginVertical: 20
+            marginTop: 20
         },
         noticeContainer: {
             flex: 1,
-            flexDirection: 'column',
-            marginTop: 10
+            flexDirection: 'column'
         },
         noticeLink: {
             color: theme.linkColor,
@@ -353,8 +364,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         hashContainer: {
             flex: 1,
-            flexDirection: 'column',
-            marginVertical: 15
+            flexDirection: 'column'
         },
         footerGroup: {
             flex: 1,
@@ -363,7 +373,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         footerText: {
             color: changeOpacity(theme.centerChannelColor, 0.5),
             fontSize: 11,
-            lineHeight: 13
+            lineHeight: 13,
+            marginBottom: 10
         }
     };
 });

assets/base/config.json

@@ -4,6 +4,10 @@
     "DefaultTheme": "default",
     "ShowErrorsList": false,
     "MinServerVersion": "4.0.0",
+    "EELearnURL": "about.mattermost.com",
+    "TeamEditionLearnURL": "mattermost.org",
+    "AboutTeamURL": "http://www.mattermost.org/",
+    "AboutEnterpriseURL": "http://about.mattermost.com/",
     "PlatformNoticeURL": "https://about.mattermost.com/platform-notice-txt/",
     "MobileNoticeURL": "https://about.mattermost.com/mobile-notice-txt/",
     "SegmentApiKey": "3MT7rAoC0OP7yy3ThzqFSAtKzmzqtUPX",

assets/base/i18n/en.json

@@ -1865,6 +1865,8 @@
   "mobile.about.appVersion": "App Version: {version} (Build {number})",
   "mobile.about.copyright": "Copyright 2015-{currentYear} Mattermost, Inc. All rights reserved",
   "mobile.about.database": "Database: {type}",
+  "mobile.about.licensed": "Licensed to: {company}",
+  "mobile.about.powered_by": "{site} is powered by Mattermost",
   "mobile.about.serverVersion": "Server Version: {version} (Build {number})",
   "mobile.about.serverVersionNoBuild": "Server Version: {version}",
   "mobile.account.notifications.email.footer": "When offline or away for more than five minutes",