diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx index f8f916bd00..d2b88d09a3 100644 --- a/web/react/components/user_settings/premade_theme_chooser.jsx +++ b/web/react/components/user_settings/premade_theme_chooser.jsx @@ -24,7 +24,7 @@ export default class PremadeThemeChooser extends React.Component { premadeThemes.push(
{Utils.toTitleCase(premadeTheme.type)}
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 4372069e70..e9ca0f4a52 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -214,14 +214,15 @@ export default class UserSettingsAppearance extends React.Component {
{themeUI}
+
+ + {'Import from Slack'} +
-
- - {'Import from Slack'} -
); } diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index da59f8e5a7..67414dc3bc 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -179,7 +179,7 @@ module.exports = { centerChannelColor: '#DDDDDD', newMessageSeparator: '#5de5da', linkColor: '#A4FFEB', - buttonBg: '#1dacfc', + buttonBg: '#4CBBA4', buttonColor: '#FFFFFF' }, windows10: { diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 8b20e2adf9..9a3141d515 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -395,35 +395,39 @@ export function toTitleCase(str) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.sidebar--left', 'background:' + theme.sidebarBg, 1); + changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); } if (theme.sidebarText) { - changeCss('.sidebar--left .nav li>a, .sidebar--right', 'color:' + theme.sidebarText, 1); + changeCss('.sidebar--left .nav li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + theme.sidebarText, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left .nav li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 1); changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } if (theme.sidebarUnreadText) { - changeCss('.sidebar--left .nav li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 1); + changeCss('.sidebar--left .nav li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextHoverColor) { - changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus', 'color:' + theme.sidebarTextHoverColor, 2); + changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + theme.sidebarTextHoverColor, 2); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2); } if (theme.sidebarTextActiveBg) { - changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + theme.sidebarTextActiveBg, 1); + changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'background:' + theme.sidebarTextActiveBg, 1); } if (theme.sidebarTextActiveColor) { - changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'color:' + theme.sidebarTextActiveColor, 2); + changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); } if (theme.sidebarHeaderBg) { @@ -458,7 +462,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box, .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); @@ -467,7 +471,7 @@ export function applyTheme(theme) { } if (theme.centerChannelColor) { - changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name, .modal .modal-content', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); @@ -477,7 +481,7 @@ 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, .command-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 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, .command-box, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.command-name', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); @@ -487,14 +491,15 @@ export function applyTheme(theme) { changeCss('.search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); - changeCss('.date-separator .separator__hr, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.channel-intro', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 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, .sidebar--right .sidebar--right__header', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.post:hover, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--before:after, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--after:before, .new-separator.hovered--after:before, .command-name:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user:hover .post-body ', 'background: none;', 1); @@ -507,7 +512,7 @@ export function applyTheme(theme) { } if (theme.linkColor) { - changeCss('a, a:focus, a:hover', 'color:' + theme.linkColor, 1); + changeCss('a, a:focus, a:hover, .btn, .btn:focus, .btn:hover', 'color:' + theme.linkColor, 1); changeCss('.post .comment-icon__container', 'fill:' + theme.linkColor, 1); } diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 87d9b82007..ba27e7fbcf 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -68,6 +68,19 @@ a:focus, a:hover { margin: 0; } +.text-danger { + color: #E05F5D; +} + +.btn { + &.btn-danger { + color: #fff; + &:hover, &:active { + color: #fff; + } + } +} + .form-control { @include border-radius(2px); &.no-resize { diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index e4e8b20b6c..96b26f2512 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -9,12 +9,6 @@ @include opacity(0.7); } } - a, a:focus, a:hover { - color: #2389D7; - &.text-danger { - color: #a94442; - } - } .custom-textarea { color: inherit; border-color: #ccc; @@ -25,12 +19,9 @@ } .btn { font-size: 13px; - &.btn-primary { - background: #4285f4; - &:hover, &:focus, &:active { - background: $primary-color--hover; - color: #fff; - } + &.btn-default { + border: none; + background: transparent; } } .info__label { @@ -70,7 +61,7 @@ background: $primary-color; color: #FFF; padding: 15px 15px 11px; - border: none; + border: 1px solid #ddd; min-height: 56px; @include clearfix; .modal-title { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 9e8d0dc7df..82ec1811a3 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -402,12 +402,6 @@ margin-left: 7px; } } - &.active, &:hover { - a { - color: #555; - background: #fff; - } - } } } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 3aab05d701..1f785f63cd 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -2,7 +2,6 @@ @import "activity-log"; .user-settings { - background: #fff; min-height:300px; .table-responsive { max-width: 560px; @@ -71,7 +70,7 @@ } .section-max { - background: #f2f2f2; + background: rgba(black, 0.05); padding: 1em 0 1.3em; margin-bottom: 0; @include clearfix; @@ -121,7 +120,7 @@ .fa { margin-right: 7px; font-size: 12px; - color: #aaa; + @include opacity(0.5); display: none; } } @@ -131,7 +130,7 @@ } .section-describe { - color:grey; + @include opacity(0.7); } .divider-dark { @@ -167,15 +166,11 @@ } } .control-label { - color: #555; font-weight: 600; &.text-left { text-align: left; } } - hr { - border-color: #ccc; - } } .file-status { diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss index 4366b1a6c4..6f4a0cc383 100644 --- a/web/sass-files/sass/partials/_sidebar--menu.scss +++ b/web/sass-files/sass/partials/_sidebar--menu.scss @@ -54,7 +54,7 @@ > a { font-size: 15px; background: none !important; - color: #444; + color: inherit; line-height: 40px; padding: 0 15px; .glyphicon { diff --git a/web/static/images/themes/mattermost dark.jpg b/web/static/images/themes/mattermost dark.jpg new file mode 100644 index 0000000000..ea70e701df Binary files /dev/null and b/web/static/images/themes/mattermost dark.jpg differ diff --git a/web/static/images/themes/mattermost dark.png b/web/static/images/themes/mattermost dark.png deleted file mode 100644 index 832f64d2e9..0000000000 Binary files a/web/static/images/themes/mattermost dark.png and /dev/null differ diff --git a/web/static/images/themes/mattermost.jpg b/web/static/images/themes/mattermost.jpg new file mode 100644 index 0000000000..eb36786a6f Binary files /dev/null and b/web/static/images/themes/mattermost.jpg differ diff --git a/web/static/images/themes/mattermost.png b/web/static/images/themes/mattermost.png deleted file mode 100644 index 4a321adcbf..0000000000 Binary files a/web/static/images/themes/mattermost.png and /dev/null differ diff --git a/web/static/images/themes/organization.jpg b/web/static/images/themes/organization.jpg new file mode 100644 index 0000000000..5a5c10bd30 Binary files /dev/null and b/web/static/images/themes/organization.jpg differ diff --git a/web/static/images/themes/organization.png b/web/static/images/themes/organization.png deleted file mode 100644 index 1a38bfb340..0000000000 Binary files a/web/static/images/themes/organization.png and /dev/null differ diff --git a/web/static/images/themes/slack.png b/web/static/images/themes/slack.png deleted file mode 100644 index dc70c7dc21..0000000000 Binary files a/web/static/images/themes/slack.png and /dev/null differ diff --git a/web/static/images/themes/windows dark.jpg b/web/static/images/themes/windows dark.jpg new file mode 100644 index 0000000000..0ab19c0217 Binary files /dev/null and b/web/static/images/themes/windows dark.jpg differ diff --git a/web/static/images/themes/windows dark.png b/web/static/images/themes/windows dark.png deleted file mode 100644 index d653048209..0000000000 Binary files a/web/static/images/themes/windows dark.png and /dev/null differ