diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx index a47225f7ec..0dd2a7db6a 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 = ( ); + let subTitle = ( + + ); + + let learnMore = ( +
+ + + {'mattermost.org'} + +
+ ); + let licensee; if (config.BuildEnterpriseReady === 'true') { title = ( @@ -36,6 +60,29 @@ export default class AboutBuildModal extends React.Component { defaultMessage='Enterprise Edition' /> ); + + subTitle = ( + + ); + + learnMore = ( +
+ + + {'about.mattermost.com'} + +
+ ); + if (license.IsLicensed === 'true') { title = ( ); licensee = ( -
-
- -
-
{license.Company}
+
+ +  {license.Company}
); } @@ -59,6 +104,7 @@ export default class AboutBuildModal extends React.Component { return ( @@ -71,57 +117,38 @@ export default class AboutBuildModal extends React.Component { -

{'Mattermost'} {title}

- {licensee} -
-
- +
+
-
{config.Version}
+
+

{'Mattermost'} {title}

+

{subTitle}

+
+
+ +  {config.Version} ({config.BuildNumber}) +
+
+ {licensee} +
-
-
+
+ {learnMore} +
-
{config.BuildNumber}
-
-
-
- -
-
{config.BuildDate}
-
-
-
- -
-
{config.BuildHash}
- - - ); } diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx index 30c47ee222..bbf8d9bf62 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 = ( + + ); + } } return ( diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index d58d282bc8..c1450ef489 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -3,10 +3,15 @@ "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.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 ", "about.title": "About Mattermost", "about.version": "Version:", "access_history.title": "Access History", diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 259beeb572..00590495a3 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; @@ -41,10 +41,13 @@ .form-group { margin-bottom: 25px; + } +} - &.less { - margin-bottom: 10px; - } + +.form-group { + &.less { + margin-bottom: 10px; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index e2bce55621..947a81318c 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/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 0e1a471cf5..909d984162 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -786,6 +786,26 @@ } @media screen and (max-width: 640px) { + .modal { + .about-modal { + .about-modal__logo { + float: none; + padding: 0; + text-align: center; + width: 100%; + + svg { + height: 100px; + width: 100px; + } + } + + .about-modal__logo + div { + padding: 2em 0 0; + } + } + } + .access-history__table { > div { display: block; diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss new file mode 100644 index 0000000000..da6a5717a9 --- /dev/null +++ b/webapp/sass/routes/_about-modal.scss @@ -0,0 +1,65 @@ +@charset 'UTF-8'; + +.modal { + .about-modal { + .modal-header { + background: transparent; + border: none; + color: inherit; + padding: 20px 25px 0; + + .close { + color: inherit; + font-weight: normal; + right: 15px; + } + + .modal-title { + color: inherit; + font-size: 16px; + } + } + + .modal-body { + padding: 20px 25px 5px; + } + + .about-modal__content { + @include clearfix; + padding: 1em 0 3em; + } + + .about-modal__copyright { + @include opacity(.6); + margin-top: .5em; + } + + .about-modal__footer { + font-size: 13.5px; + } + + .about-modal__title { + line-height: 1.5; + margin: 0 0 10px; + } + + .about-modal__subtitle { + @include opacity(.6); + } + + .about-modal__logo { + @include opacity(.9); + float: left; + padding: 0 40px 0 20px; + + svg { + height: 125px; + width: 125px; + } + + path { + fill: inherit; + } + } + } +} diff --git a/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss index b76dd147f9..4f3f6f9cd4 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 68df771f90..b876f32218 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -246,6 +246,7 @@ export default { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + MATTERMOST_ICON_SVG: " ", ONLINE_ICON_SVG: " ", AWAY_ICON_SVG: " ", OFFLINE_ICON_SVG: " ", diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index b248368fcb..ccdc00ea5e 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) {