plt-366 - Adding Windows 8 theme

2 files changed, 38 insertions, 5 deletions

diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 8c9e1ee85..0650fb92b 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -130,6 +130,7 @@ module.exports = {
             mentionColor: '#ffffff',
             centerChannelBg: '#ffffff',
             centerChannelColor: '#333333',
+            newMessageSeparator: '#FF8800',
             linkColor: '#2389d7',
             buttonBg: '#2389d7',
             buttonColor: '#FFFFFF'
@@ -150,12 +151,13 @@ module.exports = {
             mentionColor: '#bfcde8',
             centerChannelBg: '#f2f4f8',
             centerChannelColor: '#333333',
+            newMessageSeparator: '#FF8800',
             linkColor: '#2f81b7',
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF'
         },
-        dark: {
-            type: 'Dark',
+        mattermostDark: {
+            type: 'Mattermost Dark',
             sidebarBg: '#1B2C3E',
             sidebarText: '#bbbbbb',
             sidebarUnreadText: '#fff',
@@ -170,9 +172,31 @@ module.exports = {
             mentionColor: '#FFFFFF',
             centerChannelBg: '#2F3E4E',
             centerChannelColor: '#DDDDDD',
+            newMessageSeparator: '#5de5da',
             linkColor: '#A4FFEB',
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF'
+        },
+        windows10: {
+            type: 'Windows 10 Dark',
+            sidebarBg: '#171717',
+            sidebarText: '#eee',
+            sidebarUnreadText: '#fff',
+            sidebarTextHoverBg: '#302e30',
+            sidebarTextHoverColor: '#fff',
+            sidebarTextActiveBg: '#484748',
+            sidebarTextActiveColor: '#FFFFFF',
+            sidebarHeaderBg: '#1f1f1f',
+            sidebarHeaderTextColor: '#FFFFFF',
+            onlineIndicator: '#0177e7',
+            mentionBj: '#0177e7',
+            mentionColor: '#FFFFFF',
+            centerChannelBg: '#1F1F1F',
+            centerChannelColor: '#DDDDDD',
+            newMessageSeparator: '#CC992D',
+            linkColor: '#0177e7',
+            buttonBg: '#0177e7',
+            buttonColor: '#FFFFFF'
         }
     },
     THEME_ELEMENTS: [
@@ -233,6 +257,10 @@ module.exports = {
             uiName: 'Center Channel Text'
         },
         {
+            id: 'newMessageSeparator',
+            uiName: 'New message separator'
+        },
+        {
             id: 'linkColor',
             uiName: 'Link Color'
         },
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index d45240f9a..280370c33 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -615,7 +615,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelColor) {
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file', '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', 'color:' + theme.centerChannelColor, 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1);
         changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1);
@@ -630,8 +630,8 @@ export function applyTheme(theme) {
         changeCss('.search-bar__container .search__form .search-bar', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: ' + theme.centerChannelColor, 2);
         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, .new-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
-        changeCss('.date-separator .separator__hr, .new-separator .separator__hr, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 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('.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);
@@ -645,6 +645,11 @@ export function applyTheme(theme) {
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
     }
 
+    if (theme.newMessageSeparator) {
+        changeCss('.new-separator .separator__text', 'color:' + theme.newMessageSeparator, 1);
+        changeCss('.new-separator .separator__hr', 'border-color:' + changeOpacity(theme.newMessageSeparator, 0.5), 1);
+    }
+
     if (theme.linkColor) {
         changeCss('a, a:focus, a:hover', 'color:' + theme.linkColor, 1);
         changeCss('.post .comment-icon__container', 'fill:' + theme.linkColor, 1);