diff options
Diffstat (limited to 'web/react')
24 files changed, 119 insertions, 125 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index 4c4f21f08..6dca391d0 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -172,7 +172,10 @@ export default class AdminController extends React.Component { } return ( - <div id='admin_controller'> + <div + id='admin_controller' + className='admin-controller' + > <div className='sidebar--menu' id='sidebar-menu' @@ -186,7 +189,7 @@ export default class AdminController extends React.Component { removeSelectedTeam={this.removeSelectedTeam} addSelectedTeam={this.addSelectedTeam} /> - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> </div> <div className='row main'> diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx index 256576f9b..708907ddb 100644 --- a/web/react/components/admin_console/team_users.jsx +++ b/web/react/components/admin_console/team_users.jsx @@ -163,7 +163,7 @@ export default class UserList extends React.Component { className='form-horizontal' role='form' > - <table className='table more-table member-list-holder'> + <table className='more-modal__list member-list-holder'> <tbody> {memberList} </tbody> diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx index 7d6cfb5c3..722da922a 100644 --- a/web/react/components/admin_console/user_item.jsx +++ b/web/react/components/admin_console/user_item.jsx @@ -363,15 +363,15 @@ export default class UserItem extends React.Component { return ( <tr> - <td className='row member-div padding--equal'> + <td className='more-modal__row'> <img - className='post-profile-img pull-left' + className='more-modal__image pull-left' src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} height='36' width='36' /> - <span className='more-name'>{Utils.getDisplayName(user)}</span> - <span className='more-description'>{email}</span> + <span className='more-modal__name'>{Utils.getDisplayName(user)}</span> + <span className='more-modal__description'>{email}</span> <div className='dropdown member-drop'> <a href='#' diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx index 35ad7ac10..4b1cebcf4 100644 --- a/web/react/components/authorize.jsx +++ b/web/react/components/authorize.jsx @@ -38,7 +38,7 @@ export default class Authorize extends React.Component { render() { return ( <div className='container-fluid'> - <div className='oauth-prompt'> + <div className='prompt'> <div className='prompt__heading'> <div className='prompt__app-icon'> <img diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index 2ea840c1e..9a5f7a5d1 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component { } return ( - <div className='inner__wrap channel__wrap'> + <div className='inner-wrap channel__wrap'> <div className='row header'> <div id='navbar'> <Navbar/> diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 8abcac8c3..383529212 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -49,8 +49,8 @@ class FileAttachment extends React.Component { if (name in self.refs) { var imgDiv = ReactDOM.findDOMNode(self.refs[name]); - $(imgDiv).removeClass('post__load'); - $(imgDiv).addClass('post__image'); + $(imgDiv).removeClass('post-image__load'); + $(imgDiv).addClass('post-image'); var width = this.width || $(this).width(); var height = this.height || $(this).height(); @@ -134,7 +134,7 @@ class FileAttachment extends React.Component { thumbnail = ( <div ref={filename} - className='post__load' + className='post-image__load' style={{backgroundImage: 'url(/static/images/load.gif)'}} /> ); diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 265d3f367..97949ca3d 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -41,15 +41,15 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div' + className='file-preview' data-filename={originalFilename} > <img - className='preview-img' + className='file-preview__image' src={filename} /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -60,12 +60,12 @@ export default class FilePreview extends React.Component { previews.push( <div key={filename} - className='preview-div custom-file' + className='file-preview custom-file' data-filename={originalFilename} > <div className={'file-icon ' + Utils.getIconClassName(type)}/> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -80,7 +80,7 @@ export default class FilePreview extends React.Component { <div ref={clientId} key={clientId} - className='preview-div' + className='file-preview' data-client-id={clientId} > <img @@ -88,7 +88,7 @@ export default class FilePreview extends React.Component { src='/static/images/load.gif' /> <a - className='remove-preview' + className='file-preview__remove' onClick={this.handleRemove} > <i className='glyphicon glyphicon-remove'/> @@ -98,7 +98,7 @@ export default class FilePreview extends React.Component { }); return ( - <div className='preview-container'> + <div className='file-preview__container'> {previews} </div> ); diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx index ffd6ebf53..77a8c8810 100644 --- a/web/react/components/filtered_user_list.jsx +++ b/web/react/components/filtered_user_list.jsx @@ -27,10 +27,6 @@ class FilteredUserList extends React.Component { }; } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); - } - componentDidUpdate(prevProps, prevState) { if (prevState.filter !== this.state.filter) { $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); @@ -109,7 +105,7 @@ class FilteredUserList extends React.Component { </div> <div ref='userList' - className='user-list' + className='more-modal__list' > <UserList users={users} diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index 3309d690c..dd21f21e0 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component { var copyLinkConfirm = null; if (this.state.copiedLink) { copyLinkConfirm = ( - <p className='alert alert-success copy-link-confirm'> + <p className='alert alert-success alert--confirm'> <i className='fa fa-check'></i> <FormattedMessage id='get_link.clipboard' diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index 3309ef52e..2ba435449 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component { } return ( - <tr key={channel.id}> - <td className='more-row'> - <div className='more-details'> - <p className='more-name'>{channel.display_name}</p> - <p className='more-description'>{channel.purpose}</p> - </div> - <div className='more-actions'> - {joinButton} - </div> - </td> - </tr> + <div + className='more-modal__row' + key={channel.id} + > + <div className='more-modal__details'> + <p className='more-modal__name'>{channel.display_name}</p> + <p className='more-modal__description'>{channel.purpose}</p> + </div> + <div className='more-modal__actions'> + {joinButton} + </div> + </div> ); } render() { @@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component { moreChannels = <LoadingScreen/>; } else if (channels.length) { moreChannels = ( - <table className='more-table table'> - <tbody> - {channels.map(this.createChannelRow)} - </tbody> - </table> + <div className='more-modal__list'> + {channels.map(this.createChannelRow)} + </div> ); } else { moreChannels = ( diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 974f026d0..8382cb47a 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -66,7 +66,7 @@ export default class Navbar extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); ChannelStore.addExtraInfoChangeListener(this.onChange); - $('.inner__wrap').click(this.hideSidebars); + $('.inner-wrap').click(this.hideSidebars); attachFastClick(document.body); } componentWillUnmount() { @@ -101,7 +101,7 @@ export default class Navbar extends React.Component { }); if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { - $('.inner__wrap').removeClass('move--right move--left move--left-small'); + $('.inner-wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); $('.sidebar--menu').removeClass('move--left'); @@ -109,11 +109,11 @@ export default class Navbar extends React.Component { } } toggleLeftSidebar() { - $('.inner__wrap').toggleClass('move--right'); + $('.inner-wrap').toggleClass('move--right'); $('.sidebar--left').toggleClass('move--right'); } toggleRightSidebar() { - $('.inner__wrap').toggleClass('move--left-small'); + $('.inner-wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); } showSearch() { diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx index 7af293e77..cf3effcd5 100644 --- a/web/react/components/not_logged_in.jsx +++ b/web/react/components/not_logged_in.jsx @@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl'; export default class NotLoggedIn extends React.Component { componentDidMount() { - $('body').attr('class', 'white'); + $('body').attr('class', 'sticky'); $('#root').attr('class', 'container-fluid'); } componentWillUnmount() { @@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component { } render() { return ( - <div className='inner__wrap'> + <div className='inner-wrap'> <div className='row content'> {this.props.children} <div className='footer-push'></div> diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 1943fb409..8f6948ee4 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component { if (name) { popoverHtml.push( <div - className='text-nowrap' + className='more-modal__row' key={'popover-member-' + i} > <img - className='profile-img rounded pull-left' + className='more-modal__image' width='26px' height='26px' src={`/api/v1/users/${m.id}/image?time=${m.update_at}`} /> - <div className='pull-left'> + <div className='more-modal__details'> <div - className='more-name' + className='more-modal__name' > {name} </div> </div> <div - className='pull-right' + className='more-modal__actions' > {button} </div> @@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component { title={title} id='member-list-popover' > - {popoverHtml} + <div className='more-modal__list'>{popoverHtml}</div> </Popover> </Overlay> </div> diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index eaf8b5069..3afd0e840 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -164,7 +164,7 @@ class SearchBar extends React.Component { </span> <form role='form' - className='search__form relative-div' + className='search__form' onSubmit={this.handleSubmit} style={{overflow: 'visible'}} autoComplete='off' diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 3a091bdd1..9c3b0336b 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component { if ($(window).width() < 768) { $('.sidebar--right').removeClass('move--left'); - $('.inner__wrap').removeClass('move--left'); + $('.inner-wrap').removeClass('move--left'); } } diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 14853d3a3..fc9888626 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component { var windowWidth = $(window).outerWidth(); var sidebarRightWidth = $('.sidebar--right').outerWidth(); - $('.inner__wrap').removeClass('.move--right'); - $('.inner__wrap').addClass('move--left'); + $('.inner-wrap').removeClass('.move--right'); + $('.inner-wrap').addClass('move--left'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); if (this.state.search_visible || this.state.post_right_visible) { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } } else { if (windowWidth > 960) { - $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); + $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner__wrap, .sidebar--right').attr('style', ''); + $('.inner-wrap, .sidebar--right').attr('style', ''); } - $('.inner__wrap').removeClass('move--left').removeClass('move--right'); + $('.inner-wrap').removeClass('move--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); return ( <div></div> diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx index c5bd13c26..b53b351d9 100644 --- a/web/react/components/suggestion/at_mention_provider.jsx +++ b/web/react/components/suggestion/at_mention_provider.jsx @@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the team' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else if (item.username === 'channel') { username = 'channel'; description = ( @@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component { defaultMessage='Notifies everyone in the channel' /> ); - icon = <i className='mention-img fa fa-users fa-2x'/>; + icon = <i className='mention__image fa fa-users fa-2x'/>; } else { username = item.username; description = Utils.getFullName(item); icon = ( <img - className='mention-img' + className='mention__image' src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at} /> ); } - let className = 'mentions-name'; + let className = 'mentions__name'; if (isSelection) { className += ' suggestion--selected'; } @@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component { <div className='pull-left'> {icon} </div> - <div className='pull-left mention-align'> + <div className='pull-left mention--align'> <span> {'@' + username} </span> - <span className='mention-fullname'> + <span className='mention__fullname'> {description} </span> </div> diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx index 21d6d0e0e..fffb2df07 100644 --- a/web/react/components/suggestion/command_provider.jsx +++ b/web/react/components/suggestion/command_provider.jsx @@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component { render() { const {item, isSelection, onClick} = this.props; - let className = 'command-name'; + let className = 'command'; if (isSelection) { className += ' suggestion--selected'; } diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx index ccebeb990..0f5907179 100644 --- a/web/react/components/suggestion/suggestion_list.jsx +++ b/web/react/components/suggestion/suggestion_list.jsx @@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component { <div className='suggestion-list suggestion-list--top'> <div ref='content' - className='suggestion-content suggestion-content--top' + className='suggestion-list__content suggestion-list__content--top' > {items} </div> diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx index 39453a827..783d552dc 100644 --- a/web/react/components/user_list.jsx +++ b/web/react/components/user_list.jsx @@ -21,23 +21,19 @@ export default class UserList extends React.Component { }); } else { content = ( - <tr key='no-users-found'> - <td> - <FormattedMessage - id='user_list.notFound' - defaultMessage='No users found :(' - /> - </td> - </tr> + <div key='no-users-found'> + <FormattedMessage + id='user_list.notFound' + defaultMessage='No users found :(' + /> + </div> ); } return ( - <table className='more-table table'> - <tbody> - {content} - </tbody> - </table> + <div> + {content} + </div> ); } } diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx index 1ca40687f..8c664ba82 100644 --- a/web/react/components/user_list_row.jsx +++ b/web/react/components/user_list_row.jsx @@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) { }); return ( - <tr> - <td - key={user.id} - style={{display: 'flex'}} + <div + key={user.id} + className='more-modal__row' + > + <img + className='more-modal__image' + width='38' + height='38' + src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} + /> + <div + className='more-modal__details' > - <img - className='profile-img' - src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} - /> - <div - className='user-list-item__details' - > - <div className='more-name'> - {name} - </div> - <div className='more-description'> - {user.email} - </div> + <div className='more-modal__name'> + {name} </div> - <div - className='user-list-item__actions' - > - {buttons} + <div className='more-modal__description'> + {user.email} </div> - </td> - </tr> + </div> + <div + className='more-modal__actions' + > + {buttons} + </div> + </div> ); } diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx index 18cce3bde..bed798b3e 100644 --- a/web/react/utils/emoticons.jsx +++ b/web/react/utils/emoticons.jsx @@ -132,7 +132,7 @@ export function handleEmoticons(text, tokens) { const alias = `MM_EMOTICON${index}`; tokens.set(alias, { - value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`, + value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`, originalText: fullMatch }); diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index a930e9ece..552d93fac 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -187,7 +187,7 @@ function highlightCurrentMentions(text, tokens) { const newAlias = `MM_SELFMENTION${index}`; newTokens.set(newAlias, { - value: `<span class='mention-highlight'>${alias}</span>`, + value: `<span class='mention--highlight'>${alias}</span>`, originalText: token.originalText }); output = output.replace(alias, newAlias); @@ -205,7 +205,7 @@ function highlightCurrentMentions(text, tokens) { const alias = `MM_SELFMENTION${index}`; tokens.set(alias, { - value: `<span class='mention-highlight'>${mention}</span>`, + value: `<span class='mention--highlight'>${mention}</span>`, originalText: mention }); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 88777164b..360d1f4a5 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -676,11 +676,11 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); - changeCss('.post-image__column .post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); + changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1); changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1); changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1); @@ -694,8 +694,8 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); + changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); @@ -709,17 +709,17 @@ export function applyTheme(theme) { changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); - changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2); + changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2); changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); @@ -732,11 +732,11 @@ export function applyTheme(theme) { changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); - changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); + changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); + changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); @@ -759,7 +759,7 @@ export function applyTheme(theme) { if (theme.buttonBg) { changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); - changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); + changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); } if (theme.buttonColor) { @@ -767,7 +767,7 @@ export function applyTheme(theme) { } if (theme.mentionHighlightBg) { - changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); + changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); } if (theme.mentionHighlightBg) { @@ -775,7 +775,7 @@ export function applyTheme(theme) { } if (theme.mentionHighlightLink) { - changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); + changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); } if (!theme.codeTheme) { @@ -946,7 +946,7 @@ export function switchChannel(channel) { updateAddressBar(channel.name); - $('.inner__wrap').removeClass('move--right'); + $('.inner-wrap').removeClass('move--right'); $('.sidebar--left').removeClass('move--right'); client.trackPage(); |