Merge pull request #2621 from asaadmahmoodspin/ui-improvements

PLT-2027- Improvements to about dialog

2 files changed, 98 insertions, 47 deletions

diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx
index a47225f7e..4fd946401 100644
--- a/webapp/components/about_build_modal.jsx
+++ b/webapp/components/about_build_modal.jsx
@@ -6,6 +6,7 @@ import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import React from 'react';
+import Constants from 'utils/constants.jsx';
 
 export default class AboutBuildModal extends React.Component {
     constructor(props) {
@@ -20,6 +21,7 @@ export default class AboutBuildModal extends React.Component {
     render() {
         const config = global.window.mm_config;
         const license = global.window.mm_license;
+        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
 
         let title = (
             <FormattedMessage
@@ -28,6 +30,28 @@ export default class AboutBuildModal extends React.Component {
             />
         );
 
+        let subTitle = (
+            <FormattedMessage
+                id='about.teamEditionSt'
+                defaultMessage='All your team communication in one place, instantly searchable and accessible anywhere.'
+            />
+        );
+
+        let learnMore = (
+            <div>
+                <FormattedMessage
+                    id='about.teamEditionLearn'
+                    defaultMessage='Join the Mattermost community at '
+                />
+                <a
+                    target='_blank'
+                    href='http://www.mattermost.org/'
+                >
+                    {'mattermost.org'}
+                </a>
+            </div>
+        );
+
         let licensee;
         if (config.BuildEnterpriseReady === 'true') {
             title = (
@@ -36,6 +60,29 @@ export default class AboutBuildModal extends React.Component {
                     defaultMessage='Enterprise Edition'
                 />
             );
+
+            subTitle = (
+                <FormattedMessage
+                    id='about.enterpriseEditionSt'
+                    defaultMessage='Modern enterprise communication from behind your firewall.'
+                />
+            );
+
+            learnMore = (
+                <div>
+                    <FormattedMessage
+                        id='about.enterpriseEditionLearn'
+                        defaultMessage='Learn more about Enterprise Edition at '
+                    />
+                    <a
+                        target='_blank'
+                        href='http://about.mattermost.com/'
+                    >
+                        {'about.mattermost.com'}
+                    </a>
+                </div>
+            );
+
             if (license.IsLicensed === 'true') {
                 title = (
                     <FormattedMessage
@@ -44,14 +91,12 @@ export default class AboutBuildModal extends React.Component {
                     />
                 );
                 licensee = (
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
-                            <FormattedMessage
-                                id='about.licensed'
-                                defaultMessage='Licensed by:'
-                            />
-                        </div>
-                        <div className='col-sm-9'>{license.Company}</div>
+                    <div className='form-group'>
+                        <FormattedMessage
+                            id='about.licensed'
+                            defaultMessage='Licensed by:'
+                        />
+                        &nbsp;{license.Company}
                     </div>
                 );
             }
@@ -59,6 +104,7 @@ export default class AboutBuildModal extends React.Component {
 
         return (
             <Modal
+                dialogClassName='about-modal'
                 show={this.props.show}
                 onHide={this.doHide}
             >
@@ -71,57 +117,54 @@ export default class AboutBuildModal extends React.Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <h4 className='padding-bottom x2'>{'Mattermost'} {title}</h4>
-                    {licensee}
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
-                            <FormattedMessage
-                                id='about.version'
-                                defaultMessage='Version:'
+                    <div className='about-modal__content'>
+                        <div className='about-modal__logo'>
+                            <span
+                                className='icon'
+                                dangerouslySetInnerHTML={{__html: mattermostLogo}}
                             />
                         </div>
-                        <div className='col-sm-9'>{config.Version}</div>
-                    </div>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
-                            <FormattedMessage
-                                id='about.number'
-                                defaultMessage='Build Number:'
-                            />
+                        <div>
+                            <h3 className='about-modal__title'>{'Mattermost'} {title}</h3>
+                            <p className='about-modal__subtitle padding-bottom'>{subTitle}</p>
+                            <div className='form-group less'>
+                                <div>
+                                    <FormattedMessage
+                                        id='about.version'
+                                        defaultMessage='Version:'
+                                    />
+                                    &nbsp;{config.Version}&nbsp;({config.BuildNumber})
+                                </div>
+                            </div>
+                            {licensee}
                         </div>
-                        <div className='col-sm-9'>{config.BuildNumber}</div>
                     </div>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
+                    <div className='about-modal__footer'>
+                        {learnMore}
+                        <div className='form-group about-modal__copyright'>
                             <FormattedMessage
-                                id='about.date'
-                                defaultMessage='Build Date:'
+                                id='about.copyright'
+                                defaultMessage='Copyright 2016 Mattermost, Inc. All rights reserved'
                             />
                         </div>
-                        <div className='col-sm-9'>{config.BuildDate}</div>
                     </div>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
+                    <div className='about-modal__hash form-group padding-top x2'>
+                        <p>
                             <FormattedMessage
                                 id='about.hash'
                                 defaultMessage='Build Hash:'
                             />
-                        </div>
-                        <div className='col-sm-9'>{config.BuildHash}</div>
+                            &nbsp;{config.BuildHash}
+                        </p>
+                        <p>
+                            <FormattedMessage
+                                id='about.date'
+                                defaultMessage='Build Date:'
+                            />
+                            &nbsp;{config.BuildDate}
+                        </p>
                     </div>
                 </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={this.doHide}
-                    >
-                        <FormattedMessage
-                            id='about.close'
-                            defaultMessage='Close'
-                        />
-                    </button>
-                </Modal.Footer>
             </Modal>
         );
     }
diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx
index 30c47ee22..bbf8d9bf6 100644
--- a/webapp/components/post.jsx
+++ b/webapp/components/post.jsx
@@ -129,6 +129,7 @@ export default class Post extends React.Component {
         const post = this.props.post;
         const parentPost = this.props.parentPost;
         const posts = this.props.posts;
+        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
 
         if (!post.props) {
             post.props = {};
@@ -191,8 +192,6 @@ export default class Post extends React.Component {
                 } else {
                     src = Constants.DEFAULT_WEBHOOK_LOGO;
                 }
-            } else if (Utils.isSystemMessage(post)) {
-                src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
             }
 
             profilePic = (
@@ -202,6 +201,15 @@ export default class Post extends React.Component {
                     width='36'
                 />
             );
+
+            if (Utils.isSystemMessage(post)) {
+                profilePic = (
+                    <span
+                        className='icon'
+                        dangerouslySetInnerHTML={{__html: mattermostLogo}}
+                    />
+                );
+            }
         }
 
         return (