Adding modal changes back again

8 files changed, 105 insertions, 53 deletions

diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx
index 011f3d063..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,43 +117,36 @@ 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'>
-                            <FormattedMessage
-                                id='about.hash'
-                                defaultMessage='Build Hash:'
-                            />
-                        </div>
-                        <div className='col-sm-9'>{config.BuildHash}</div>
                     </div>
                     <div className='about-modal__hash form-group padding-top x2'>
                         <p>
@@ -126,18 +165,6 @@ export default class AboutBuildModal extends React.Component {
                         </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 (
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 3c543a7c5..7dc6486ab 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -3,12 +3,17 @@
   "about.date": "Build Date:",
   "about.enterpriseEditione1": "Enterprise Edition",
   "about.hash": "Build Hash:",
+  "about.copyright": "Copyright 2016 Mattermost, Inc. All rights reserved",
   "about.licensed": "Licensed by:",
   "about.number": "Build Number:",
   "about.teamEditiont0": "Team Edition",
   "about.teamEditiont1": "Enterprise Edition",
   "about.title": "About Mattermost",
   "about.version": "Version:",
+  "about.teamEditionSt": "All your team communication in one place, instantly searchable and accessible anywhere.",
+  "about.teamEditionLearn": "Join the Mattermost community at ",
+  "about.enterpriseEditionSt": "Modern enterprise communication from behind your firewall.",
+  "about.enterpriseEditionLearn": "Learn more about Enterprise Edition at ",
   "access_history.title": "Access History",
   "activity_log.activeSessions": "Active Sessions",
   "activity_log.browser": "Browser: {browser}",
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 259beeb57..1dd2bb827 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -12,7 +12,7 @@
         text-align: left;
 
         &.light {
-            color: $dark-gray;
+            @include opacity(.6);
             font-size: 1.05em;
             font-style: italic;
             font-weight: normal;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index e2bce5562..947a81318 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -644,6 +644,15 @@ body.ios {
     .post__img {
         width: 46px;
 
+        svg {
+            height: 36px;
+            width: 36px;
+        }
+
+        path {
+            fill: inherit;
+        }
+
         img {
             @include border-radius(50px);
             height: 36px;
diff --git a/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss
index b76dd147f..4f3f6f9cd 100644
--- a/webapp/sass/routes/_module.scss
+++ b/webapp/sass/routes/_module.scss
@@ -1,4 +1,5 @@
 // Only for combining all the files in this folder
+@import 'about-modal';
 @import 'access-history';
 @import 'activity-log';
 @import 'admin-console';
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 72c4404c7..d01163b31 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -248,6 +248,7 @@ export default {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    MATTERMOST_ICON_SVG: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='0 0 500 500' style='enable-background:new 0 0 500 500;' xml:space='preserve'> <style type='text/css'> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#222222;} </style> <g id='XMLID_1_'> <g id='XMLID_3_'> <path id='XMLID_4_' class='st0' d='M396.9,47.7l2.6,53.1c43,47.5,60,114.8,38.6,178.1c-32,94.4-137.4,144.1-235.4,110.9 S51.1,253.1,83,158.7C104.5,95.2,159.2,52,222.5,40.5l34.2-40.4C150-2.8,49.3,63.4,13.3,169.9C-31,300.6,39.1,442.5,169.9,486.7 s272.6-25.8,316.9-156.6C522.7,223.9,483.1,110.3,396.9,47.7z'/> </g> <path id='XMLID_2_' class='st0' d='M335.6,204.3l-1.8-74.2l-1.5-42.7l-1-37c0,0,0.2-17.8-0.4-22c-0.1-0.9-0.4-1.6-0.7-2.2 c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.7-1.2-1.8-2.1-3.1-2.6c-1.4-0.5-2.9-0.4-4.2,0.2c0,0-0.1,0-0.1,0 c-0.2,0.1-0.3,0.1-0.4,0.2c-0.6,0.3-1.2,0.7-1.8,1.3c-3,3-13.7,17.2-13.7,17.2l-23.2,28.8l-27.1,33l-46.5,57.8 c0,0-21.3,26.6-16.6,59.4s29.1,48.7,48,55.1c18.9,6.4,48,8.5,71.6-14.7C336.4,238.4,335.6,204.3,335.6,204.3z'/> </g> </svg>",
     ONLINE_ICON_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-243 245 12 12'style='enable-background:new -243 245 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <path class='online--icon' d='M-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5z'/> <ellipse class='online--icon' cx='-238.5' cy='248' rx='2.5' ry='2.5'/> </g> <path class='online--icon' d='M-238.9,253.8c0-0.4,0.1-0.9,0.2-1.3c-2.2-0.2-2.2-2-2.2-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5c0,0.1-0.1,0.5,0,0.6 c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0C-238.7,255.7-238.9,254.8-238.9,253.8z'/> <g> <g> <path class='online--icon' d='M-232.3,250.1l1.3,1.3c0,0,0,0.1,0,0.1l-4.1,4.1c0,0,0,0-0.1,0c0,0,0,0,0,0l-2.7-2.7c0,0,0-0.1,0-0.1l1.2-1.2 c0,0,0.1,0,0.1,0l1.4,1.4l2.9-2.9C-232.4,250.1-232.3,250.1-232.3,250.1z'/> </g> </g> </svg>",
     AWAY_ICON_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-299 391 12 12'style='enable-background:new -299 391 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <ellipse class='away--icon' cx='-294.6' cy='394' rx='2.5' ry='2.5'/> <path class='away--icon' d='M-293.8,399.4c0-0.4,0.1-0.7,0.2-1c-0.3,0.1-0.6,0.2-1,0.2c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.7,0,1.4-0.1,2-0.3 C-293.3,401.5-293.8,400.5-293.8,399.4z'/> </g> <path class='away--icon' d='M-287,400c0,0.1-0.1,0.1-0.1,0.1l-4.9,0c-0.1,0-0.1-0.1-0.1-0.1v-1.6c0-0.1,0.1-0.1,0.1-0.1l4.9,0c0.1,0,0.1,0.1,0.1,0.1 V400z'/> </svg>",
     OFFLINE_ICON_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-299 391 12 12'style='enable-background:new -299 391 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <g> <ellipse class='offline--icon' cx='-294.5' cy='394' rx='2.5' ry='2.5'/> <path class='offline--icon' d='M-294.3,399.7c0-0.4,0.1-0.8,0.2-1.2c-0.1,0-0.2,0-0.4,0c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4h0.1h0.1c0.3,0,0.7,0,1-0.1C-293.9,401.6-294.3,400.7-294.3,399.7z'/> </g> </g> <g> <path class='offline--icon' d='M-288.9,399.4l1.8-1.8c0.1-0.1,0.1-0.3,0-0.3l-0.7-0.7c-0.1-0.1-0.3-0.1-0.3,0l-1.8,1.8l-1.8-1.8c-0.1-0.1-0.3-0.1-0.3,0 l-0.7,0.7c-0.1,0.1-0.1,0.3,0,0.3l1.8,1.8l-1.8,1.8c-0.1,0.1-0.1,0.3,0,0.3l0.7,0.7c0.1,0.1,0.3,0.1,0.3,0l1.8-1.8l1.8,1.8 c0.1,0.1,0.3,0.1,0.3,0l0.7-0.7c0.1-0.1,0.1-0.3,0-0.3L-288.9,399.4z'/> </g> </svg>",
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index b248368fc..ccdc00ea5 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -756,6 +756,7 @@ export function applyTheme(theme) {
         changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1);
         changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4);
+        changeCss('.modal .about-modal .about-modal__logo svg, .post .post__img svg', 'fill:' + theme.centerChannelColor, 1);
     }
 
     if (theme.newMessageSeparator) {