diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx index 6e245a9ef3..1971791917 100644 --- a/webapp/components/about_build_modal.jsx +++ b/webapp/components/about_build_modal.jsx @@ -135,7 +135,7 @@ export default class AboutBuildModal extends React.Component { id='about.version' defaultMessage='Version:' /> - {'\u00a0' + config.Version + '\u00a0' + config.BuildNumber} + {'\u00a0' + config.Version + '\u00a0 (' + config.BuildNumber + ')'}
diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx index d5bbae4c95..a3dd7ff1d8 100644 --- a/webapp/components/file_attachment.jsx +++ b/webapp/components/file_attachment.jsx @@ -206,7 +206,11 @@ class FileAttachment extends React.Component { className='post-image__name' rel='noopener noreferrer' > - {trimmedFilename} + + {trimmedFilename} ); diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 40c8b81d66..46ce43a6f2 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -57,7 +57,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - +
); @@ -73,7 +73,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - +
); @@ -96,7 +96,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - + ); diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 16ee096ed2..89b184ea66 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -318,9 +318,10 @@ class FileUpload extends React.Component { ref='input' className='btn btn-file' > - - - + @@ -99,6 +110,7 @@ export default class GetLinkModal extends React.Component {

{this.props.title}

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 3bed4c4774..c8fa29e34f 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -387,7 +387,7 @@ export default class Navbar extends React.Component { aria-expanded='true' > {channelTitle} - +
    - + ); diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx index 5aabcb55ca..19ad388870 100644 --- a/webapp/components/needs_team.jsx +++ b/webapp/components/needs_team.jsx @@ -122,7 +122,7 @@ export default class NeedsTeam extends React.Component {
    - + {content} diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 6633bd9b9a..0a4840050b 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -104,6 +104,11 @@ export default class Post extends React.Component { type = 'Comment'; } + let hideControls = ''; + if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) { + hideControls = 'post--hide-controls'; + } + const commentCount = this.props.commentCount; let rootUser; @@ -113,13 +118,6 @@ export default class Post extends React.Component { rootUser = 'other--root'; } - let postType = ''; - if (type !== 'Post') { - postType = 'post--comment'; - } else if (commentCount > 0) { - postType = 'post--root'; - } - let currentUserCss = ''; if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) { currentUserCss = 'current--user'; @@ -142,9 +140,22 @@ export default class Post extends React.Component { shouldHighlightClass = 'post--highlight'; } + let postType = ''; + if (type !== 'Post') { + postType = 'post--comment'; + } else if (commentCount > 0) { + postType = 'post--root'; + sameUserClass = ''; + rootUser = ''; + } + let systemMessageClass = ''; if (PostUtils.isSystemMessage(post)) { systemMessageClass = 'post--system'; + sameUserClass = ''; + currentUserCss = ''; + postType = ''; + rootUser = ''; } let profilePic = ( @@ -170,18 +181,20 @@ export default class Post extends React.Component { } let compactClass = ''; + let profilePicContainer = (
    {profilePic}
    ); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } return (
    -
    {profilePic}
    + {profilePicContainer}
    + {'×'} + + ); + message = ( - +

    + + {removeButton} +

    ); } else { message = ( diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 2a5ea63956..76d4df1cc3 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -20,7 +20,6 @@ export default class PostInfo extends React.Component { this.dropdownPosition = this.dropdownPosition.bind(this); this.handlePermalink = this.handlePermalink.bind(this); - this.removePost = this.removePost.bind(this); } dropdownPosition(e) { var position = $('#post-list').height() - $(e.target).offset().top; @@ -165,25 +164,6 @@ export default class PostInfo extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } - removePost() { - GlobalActions.emitRemovePost(this.props.post); - } - createRemovePostButton(post) { - if (!Utils.isPostEphemeral(post)) { - return null; - } - - return ( - - {'×'} - - ); - } render() { var post = this.props.post; var comments = ''; @@ -232,7 +212,6 @@ export default class PostInfo extends React.Component { {dropdown}
    {comments} - {this.createRemovePostButton(post)}
); diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 7b754c04f2..249d3f14a3 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -194,9 +194,19 @@ export default class RhsComment extends React.Component { ); } + let profilePic = ( + + ); + let compactClass = ''; + let profilePicContainer = (
{profilePic}
); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } var dropdown = this.createDropdown(); @@ -216,13 +226,7 @@ export default class RhsComment extends React.Component { return (
-
- -
+ {profilePicContainer}
  • diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index b70b284d99..230e4bb2d5 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -230,8 +230,10 @@ export default class RhsRootPost extends React.Component { } let compactClass = ''; + let profilePicContainer = (
    {profilePic}
    ); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } const messageWrapper = ( @@ -246,9 +248,7 @@ export default class RhsRootPost extends React.Component {
    {channelName}
    -
    - {profilePic} -
    + {profilePicContainer}
    • {userProfile}
      • diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 6ebb9cfdcd..d8725a7aa8 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -142,7 +142,7 @@ class SearchBar extends React.Component { render() { var isSearching = null; if (this.state.isSearching) { - isSearching = ; + isSearching = ; } let helpClass = 'search-help-popover'; @@ -174,7 +174,7 @@ class SearchBar extends React.Component { style={{overflow: 'visible'}} autoComplete='off' > - + {team.display_name} + - + ); default: diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 1b6ce3343e..78a499b513 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -189,7 +189,7 @@ export default class UserSettingsDisplay extends React.Component {
    @@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component { title={ } inputs={inputs} @@ -518,6 +518,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayClean' defaultMessage='Standard' /> + {': '} + + +
    @@ -533,6 +540,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayCompact' defaultMessage='Compact' /> + {': '} + + +
@@ -599,7 +613,7 @@ export default class UserSettingsDisplay extends React.Component { if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { const channelDisplayMode = [false, false]; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { channelDisplayMode[0] = true; } else { channelDisplayMode[1] = true; @@ -613,11 +627,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[0]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} />
@@ -628,11 +642,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[1]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} />
@@ -666,18 +680,18 @@ export default class UserSettingsDisplay extends React.Component { ); } else { let describe; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { describe = ( ); } else { describe = ( ); } diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx index 4ceb85bb86..de4745aacf 100644 --- a/webapp/components/user_settings/user_settings_modal.jsx +++ b/webapp/components/user_settings/user_settings_modal.jsx @@ -211,15 +211,15 @@ class UserSettingsModal extends React.Component { } var tabs = []; - tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'}); - tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'}); - tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'}); + tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'}); + tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'}); + tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'}); if (global.window.mm_config.EnableOAuthServiceProvider === 'true') { - tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); + tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'}); } - tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); - tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'}); + tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'}); + tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'}); return ( div { display: none; } @@ -596,6 +630,10 @@ body.ios { } } + .post--fail { + position: relative; + } + p { font-size: .97em; line-height: 1.6em; @@ -634,33 +672,6 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; - &.post--system { - padding: 8px .5em 0 1em; - - .post__header { - height: auto; - margin-bottom: 2px; - - .col__name { - display: inline-block; - } - - .col__reply { - - } - } - - .post__time { - @include opacity(.6); - font-size: .9em; - left: inherit; - line-height: inherit; - position: inherit; - text-rendering: inherit; - top: inherit; - } - } - &:hover { .post__time { @include opacity(.5); @@ -682,7 +693,7 @@ body.ios { } .col__reply { - top: 6px; + top: -1px; } } } @@ -721,7 +732,7 @@ body.ios { .post__header { .col__reply { - top: 53px; + top: -4px; } } } @@ -775,11 +786,14 @@ body.ios { } .col__reply { + border: 1px solid transparent; + border-radius: 2px; + min-width: 70px; + padding: 2px 5px; position: absolute; right: 0; - top: 30px; + top: -4px; white-space: nowrap; - width: 65px; } .permalink-popover { @@ -841,6 +855,7 @@ body.ios { min-width: 130px; padding: 2px 0; right: 0; + top: 20px; li { display: block; @@ -864,15 +879,15 @@ body.ios { @include opacity(.5); color: inherit; display: inline-block; + float: right; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; height: 20px; line-height: 20px; position: relative; - right: 15px; + right: -10px; text-decoration: none; - top: -5px; vertical-align: top; visibility: hidden; width: 20px; @@ -885,9 +900,8 @@ body.ios { .post__body { @include legacy-pie-clearfix; padding: .2em .5em; - width: calc(100% - 75px); + width: 100%; word-wrap: break-word; - position: relative; p { margin: 0 0 .4em; @@ -1013,12 +1027,8 @@ body.ios { } .post__time { - font-size: .9em; - } - - .post__time, - &.post--system .post__body { @include opacity(.6); + font-size: .9em; } .post-loading-gif { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ba72a8119c..9db962ec18 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -85,8 +85,9 @@ margin-bottom: 0; .col__reply { - top: 0; + top: -3px; width: 65px; + z-index: auto; } .col__name { @@ -146,7 +147,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -3px; } } } @@ -158,6 +159,12 @@ } } + &.current--user { + .post__link { + margin: 0 0 8px; + } + } + &.same--root { &.same--user { .post__header { @@ -355,9 +362,10 @@ margin-top: 10px; } - button.close { + .close { font-size: 27px; font-weight: normal; + margin-top: -2px; } .modal-title { @@ -453,8 +461,8 @@ } &.minimize-settings { - padding: 0; display: none; + padding: 0; .user-settings { padding: 70px 20px 30px; @@ -469,13 +477,12 @@ .nav { > li { > a { - border-top: 1px solid #dddddd; + border-top: 1px solid transparent; font-size: 1.1em; line-height: 2.7; - color: #555555; - .glyphicon { - margin-left: 7px; + .icon { + margin: 0 7px; } } } @@ -667,7 +674,8 @@ padding: 7px 20px 0 49px; position: relative; - .glyphicon-refresh-animate { + .icon--refresh { + @include opacity(.6); color: $black; right: 33px; top: 15px; @@ -793,7 +801,6 @@ @include translate3d(100%, 0, 0); right: 0; width: 100%; - z-index: 5; .sidebar__collapse, .sidebar__search-icon { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 69443aafc9..d58e999699 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -16,7 +16,6 @@ .sidebar--right { @include single-transition(all, .5s, ease); @include translateX(100%); - z-index: 5; &.move--left { -webkit-transform: translateX(0) !important; @@ -113,6 +112,18 @@ .post { &.post--compact { + + .channel__wrap & { + .post__time { + font-size: .85em; + left: -70px; + position: absolute; + text-align: right; + top: 6px; + width: 60px; + } + } + &:not(.post--thread) { padding: 5px .5em 0 70px; @@ -121,15 +132,6 @@ vertical-align: bottom; } - .post__time { - font-size: .85em; - left: -70px; - position: absolute; - text-align: right; - top: 4px; - width: 60px; - } - span { p { &:last-child { @@ -156,7 +158,7 @@ } .col__reply { - top: 2px; + top: -1px; } } @@ -176,7 +178,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -1px; } } } @@ -191,7 +193,7 @@ } .post__content { - padding-right: 85px; + padding-right: 45px; } } @@ -202,7 +204,7 @@ .post__header { .col__reply { - top: 4px; + top: -1px; } } @@ -211,6 +213,18 @@ display: none; } } + + &.post--root { + .post__img { + img { + display: block; + } + } + + .post__time { + @include opacity(.6); + } + } } &.post--comment { @@ -241,26 +255,16 @@ &.same--user { .post__time { @include opacity(0); - font-size: 11px; - left: -4px; - line-height: 37px; - position: absolute; - text-rendering: auto; - top: -2px; } - &.post--compact { - &.post--system { - .post__time { - position: absolute; - top: 3px; - } - } - + &:not(.post--compact) { .post__time { - font-size: .85em; - left: -70px; - top: -5px; + font-size: 11px; + left: -4px; + line-height: 37px; + position: absolute; + text-rendering: auto; + top: -2px; } } } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 2a10fc4865..4dba1558c7 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -283,9 +283,22 @@ padding: 10px; .category-icon { + font-size: 15px; + margin-right: 7px; + overflow: hidden; right: 12px; + text-align: center; top: 6px; - width: 17px; + vertical-align: bottom; + width: 16px; + + &.fa-user { + font-size: 14px; + } + + &.fa-bar-chart { + font-size: 16px; + } } } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 5b8c36c5cf..f67d1b49ba 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -342,13 +342,16 @@ a { border-radius: 0; - color: #777; + color: $gray; padding: 8px 5px 8px 15px; } - .glyphicon { + .icon { + font-size: 15px; + margin-right: 10px; + text-align: center; top: 2px; - width: 25px; + width: 14px; } &:hover { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index d3fe0363fc..4dc0dce425 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -291,21 +291,23 @@ color: #444444; } - .glyphicon { - &.glyphicon-ok, - &.glyphicon-refresh { + .fa { + position: relative; + + &.fa-check, + &.fa-refresh { font-size: .9em; left: -2px; margin-right: .5em; } - &.glyphicon-chevron-right { + &.fa-chevron-right { font-size: .8em; - right: -2px; - top: 0px; + right: -5px; + top: 0; } - &.glyphicon-chevron-left { + &.fa-chevron-left { font-size: .8em; left: -2px; top: 0px; @@ -443,19 +445,21 @@ } .signup-team-dir__arrow { - color: #999999; + color: $dark-gray; float: right; - font-size: .9em; - line-height: 3.5em; + font-size: 1.5em; + line-height: 25px; + position: relative; + top: .66em; } } .authorize-box { + border: 1px solid $black; + height: 280px; margin: 100px auto; width: 500px; - height: 280px; - border: 1px solid black; } .authorize-inner { @@ -467,6 +471,6 @@ } .verify_panel { - margin: 60px auto auto auto; + margin: 60px auto auto; max-width: 380px; } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index e748cae4b1..0934e8de96 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -279,6 +279,7 @@ export default { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + ATTACHMENT_ICON_SVG: "", MATTERMOST_ICON_SVG: " ", ONLINE_ICON_SVG: " ", AWAY_ICON_SVG: " ", @@ -548,7 +549,7 @@ export default { CHANNEL_DISPLAY_MODE: 'channel_display_mode', CHANNEL_DISPLAY_MODE_CENTERED: 'centered', CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full', - CHANNEL_DISPLAY_MODE_DEFAULT: 'centered', + CHANNEL_DISPLAY_MODE_DEFAULT: 'full', MESSAGE_DISPLAY: 'message_display', MESSAGE_DISPLAY_CLEAN: 'clean', MESSAGE_DISPLAY_COMPACT: 'compact', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9fc342cb1d..65a203ab07 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -587,6 +587,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); @@ -607,7 +608,9 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); @@ -658,7 +661,7 @@ export function applyTheme(theme) { changeCss('.app__body .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('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); + changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);