Multiple UI Improvements

web/react/utils/constants.jsx

@@ -189,8 +189,8 @@ export default {
             sidebarHeaderTextColor: '#FFFFFF',
             onlineIndicator: '#7DBE00',
             awayIndicator: '#DCBD4E',
-            mentionBj: '#136197',
-            mentionColor: '#bfcde8',
+            mentionBj: '#FBFBFB',
+            mentionColor: '#2071A7',
             centerChannelBg: '#f2f4f8',
             centerChannelColor: '#333333',
             newMessageSeparator: '#FF8800',
@@ -276,86 +276,107 @@ export default {
     },
     THEME_ELEMENTS: [
         {
+            group: 'sidebarElements',
             id: 'sidebarBg',
             uiName: 'Sidebar BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarText',
             uiName: 'Sidebar Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarHeaderBg',
             uiName: 'Sidebar Header BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarHeaderTextColor',
             uiName: 'Sidebar Header Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarUnreadText',
             uiName: 'Sidebar Unread Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextHoverBg',
             uiName: 'Sidebar Text Hover BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextActiveBorder',
             uiName: 'Sidebar Text Active Border'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextActiveColor',
             uiName: 'Sidebar Text Active Color'
         },
         {
+            group: 'sidebarElements',
             id: 'onlineIndicator',
             uiName: 'Online Indicator'
         },
         {
+            group: 'sidebarElements',
             id: 'awayIndicator',
             uiName: 'Away Indicator'
         },
         {
+            group: 'sidebarElements',
             id: 'mentionBj',
             uiName: 'Mention Jewel BG'
         },
         {
+            group: 'sidebarElements',
             id: 'mentionColor',
             uiName: 'Mention Jewel Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'centerChannelBg',
             uiName: 'Center Channel BG'
         },
         {
+            group: 'centerChannelElements',
             id: 'centerChannelColor',
             uiName: 'Center Channel Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'newMessageSeparator',
             uiName: 'New Message Separator'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'linkColor',
             uiName: 'Link Color'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'buttonBg',
             uiName: 'Button BG'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'buttonColor',
             uiName: 'Button Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'mentionHighlightBg',
             uiName: 'Mention Highlight BG'
         },
         {
+            group: 'centerChannelElements',
             id: 'mentionHighlightLink',
             uiName: 'Mention Highlight Link'
         },
         {
+            group: 'centerChannelElements',
             id: 'codeTheme',
             uiName: 'Code Theme',
             themes: [

web/react/utils/utils.jsx

@@ -743,7 +743,7 @@ export function applyTheme(theme) {
         changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 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('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links, .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);
@@ -753,7 +753,7 @@ export function applyTheme(theme) {
         changeCss('code', '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);
-        changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
+        changeCss('.search-help-popover .search-autocomplete__item:hover, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
     }