From 7429ddaf04b8382e95d4b885952ef898ba50a5d0 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Mon, 22 Apr 2024 14:07:59 -0400
Subject: [PATCH] MM-37809 Theming tweaks (#26289)

* tweaked dark themes and quartz theme

* refinements to themes

* tweaked denim global header color

* updates to quartz and sapphire themes

* tweaked quartz theme

* tweaks to indigo theme

* minor tweaks to themes

* update snapshots

* updated hex colors to consistent casing and updated snapshots
---
 .../custom_theme_chooser.test.tsx.snap        |  4 +-
 .../src/constants/preferences.ts              | 60 +++++++++----------
 .../__snapshots__/pluggable.test.tsx.snap     | 20 +++----
 .../__snapshots__/post_type.test.tsx.snap     |  4 +-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
index d62a63896d..440148386c 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
             />
           }
           onChange={[Function]}
-          value="#14213e"
+          value="#162545"
         />
       </div>
       <div
@@ -559,7 +559,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
         onClick={[Function]}
         onCopy={[Function]}
         onPaste={[Function]}
-        value="{\\"sidebarBg\\":\\"#1e325c\\",\\"sidebarText\\":\\"#ffffff\\",\\"sidebarUnreadText\\":\\"#ffffff\\",\\"sidebarTextHoverBg\\":\\"#28427b\\",\\"sidebarTextActiveBorder\\":\\"#5d89ea\\",\\"sidebarTextActiveColor\\":\\"#ffffff\\",\\"sidebarHeaderBg\\":\\"#192a4d\\",\\"sidebarHeaderTextColor\\":\\"#ffffff\\",\\"sidebarTeamBarBg\\":\\"#14213e\\",\\"onlineIndicator\\":\\"#3db887\\",\\"awayIndicator\\":\\"#ffbc1f\\",\\"dndIndicator\\":\\"#d24b4e\\",\\"mentionBg\\":\\"#ffffff\\",\\"mentionBj\\":\\"#ffffff\\",\\"mentionColor\\":\\"#1e325c\\",\\"centerChannelBg\\":\\"#ffffff\\",\\"centerChannelColor\\":\\"#3f4350\\",\\"newMessageSeparator\\":\\"#cc8f00\\",\\"linkColor\\":\\"#386fe5\\",\\"buttonBg\\":\\"#1c58d9\\",\\"buttonColor\\":\\"#ffffff\\",\\"errorTextColor\\":\\"#d24b4e\\",\\"mentionHighlightBg\\":\\"#ffd470\\",\\"mentionHighlightLink\\":\\"#1b1d22\\",\\"codeTheme\\":\\"github\\"}"
+        value="{\\"sidebarBg\\":\\"#1e325c\\",\\"sidebarText\\":\\"#ffffff\\",\\"sidebarUnreadText\\":\\"#ffffff\\",\\"sidebarTextHoverBg\\":\\"#28427b\\",\\"sidebarTextActiveBorder\\":\\"#5d89ea\\",\\"sidebarTextActiveColor\\":\\"#ffffff\\",\\"sidebarHeaderBg\\":\\"#192a4d\\",\\"sidebarHeaderTextColor\\":\\"#ffffff\\",\\"sidebarTeamBarBg\\":\\"#162545\\",\\"onlineIndicator\\":\\"#3db887\\",\\"awayIndicator\\":\\"#ffbc1f\\",\\"dndIndicator\\":\\"#d24b4e\\",\\"mentionBg\\":\\"#ffffff\\",\\"mentionBj\\":\\"#ffffff\\",\\"mentionColor\\":\\"#1e325c\\",\\"centerChannelBg\\":\\"#ffffff\\",\\"centerChannelColor\\":\\"#3f4350\\",\\"newMessageSeparator\\":\\"#cc8f00\\",\\"linkColor\\":\\"#386fe5\\",\\"buttonBg\\":\\"#1c58d9\\",\\"buttonColor\\":\\"#ffffff\\",\\"errorTextColor\\":\\"#d24b4e\\",\\"mentionHighlightBg\\":\\"#ffd470\\",\\"mentionHighlightLink\\":\\"#1b1d22\\",\\"codeTheme\\":\\"github\\"}"
       />
       <div
         className="mt-3"
diff --git a/webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts b/webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts
index e9cd06d391..1f71938371 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts
@@ -94,7 +94,7 @@ const Preferences = {
             sidebarTextActiveColor: '#ffffff',
             sidebarHeaderBg: '#192a4d',
             sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#14213e',
+            sidebarTeamBarBg: '#162545',
             onlineIndicator: '#3db887',
             awayIndicator: '#ffbc1f',
             dndIndicator: '#d24b4e',
@@ -114,15 +114,15 @@ const Preferences = {
         },
         sapphire: {
             type: 'Sapphire',
-            sidebarBg: '#174ab5',
+            sidebarBg: '#1543a3',
             sidebarText: '#ffffff',
             sidebarUnreadText: '#ffffff',
             sidebarTextHoverBg: '#2a58ba',
             sidebarTextActiveBorder: '#57b5f0',
             sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1542a2',
+            sidebarHeaderBg: '#123b91',
             sidebarHeaderTextColor: '#ffffff',
-            sidebarTeamBarBg: '#133a91',
+            sidebarTeamBarBg: '#123582',
             onlineIndicator: '#3db887',
             awayIndicator: '#ffbc1f',
             dndIndicator: '#d24b4e',
@@ -143,14 +143,14 @@ const Preferences = {
         quartz: {
             type: 'Quartz',
             sidebarBg: '#f4f4f6',
-            sidebarText: '#090a0b',
-            sidebarUnreadText: '#2d3039',
-            sidebarTextHoverBg: '#ebebed',
+            sidebarText: '#1f2228',
+            sidebarUnreadText: '#1f2228',
+            sidebarTextHoverBg: '#e8eaed',
             sidebarTextActiveBorder: '#32a4ec',
-            sidebarTextActiveColor: '#2d3039',
-            sidebarHeaderBg: '#e8e9ed',
-            sidebarHeaderTextColor: '#2d3039',
-            sidebarTeamBarBg: '#dddfe4',
+            sidebarTextActiveColor: '#1f2228',
+            sidebarHeaderBg: '#ebecef',
+            sidebarHeaderTextColor: '#1f2228',
+            sidebarTeamBarBg: '#e5e7eb',
             onlineIndicator: '#3db887',
             awayIndicator: '#f5ab07',
             dndIndicator: '#d24b4e',
@@ -170,26 +170,26 @@ const Preferences = {
         },
         indigo: {
             type: 'Indigo',
-            sidebarBg: '#0f1a2e',
+            sidebarBg: '#151e32',
             sidebarText: '#ffffff',
             sidebarUnreadText: '#ffffff',
             sidebarTextHoverBg: '#222c3f',
-            sidebarTextActiveBorder: '#1279ba',
+            sidebarTextActiveBorder: '#4a7ce8',
             sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#152231',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#05080f',
+            sidebarHeaderBg: '#182339',
+            sidebarHeaderTextColor: '#ffffff',
+            sidebarTeamBarBg: '#1c2740',
             onlineIndicator: '#3db887',
             awayIndicator: '#f5ab00',
             dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionBj: '#1c58d9',
+            mentionBg: '#4a7ce8',
+            mentionBj: '#4a7ce8',
             mentionColor: '#ffffff',
-            centerChannelBg: '#0a111f',
+            centerChannelBg: '#111827',
             centerChannelColor: '#dddfe4',
             newMessageSeparator: '#81a3ef',
             linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
+            buttonBg: '#4a7ce8',
             buttonColor: '#ffffff',
             errorTextColor: '#d24b4e',
             mentionHighlightBg: '#133a91',
@@ -198,26 +198,26 @@ const Preferences = {
         },
         onyx: {
             type: 'Onyx',
-            sidebarBg: '#121317',
+            sidebarBg: '#202228',
             sidebarText: '#ffffff',
             sidebarUnreadText: '#ffffff',
             sidebarTextHoverBg: '#25262a',
-            sidebarTextActiveBorder: '#1592e0',
+            sidebarTextActiveBorder: '#4a7ce8',
             sidebarTextActiveColor: '#ffffff',
-            sidebarHeaderBg: '#1b1d22',
-            sidebarHeaderTextColor: '#dddfe4',
-            sidebarTeamBarBg: '#000000',
+            sidebarHeaderBg: '#24272d',
+            sidebarHeaderTextColor: '#ffffff',
+            sidebarTeamBarBg: '#292c33',
             onlineIndicator: '#3db887',
             awayIndicator: '#f5ab00',
             dndIndicator: '#d24b4e',
-            mentionBg: '#1c58d9',
-            mentionBj: '#1c58d9',
+            mentionBg: '#4b7ce7',
+            mentionBj: '#4b7ce7',
             mentionColor: '#ffffff',
-            centerChannelBg: '#090a0b',
-            centerChannelColor: '#dddfe4',
+            centerChannelBg: '#191b1f',
+            centerChannelColor: '#e3e4e8',
             newMessageSeparator: '#1adbdb',
             linkColor: '#5d89ea',
-            buttonBg: '#386fe5',
+            buttonBg: '#4a7ce8',
             buttonColor: '#ffffff',
             errorTextColor: '#da6c6e',
             mentionHighlightBg: '#0d6e6e',
diff --git a/webapp/channels/src/plugins/pluggable/__snapshots__/pluggable.test.tsx.snap b/webapp/channels/src/plugins/pluggable/__snapshots__/pluggable.test.tsx.snap
index d5b7233562..70c57ab5fb 100644
--- a/webapp/channels/src/plugins/pluggable/__snapshots__/pluggable.test.tsx.snap
+++ b/webapp/channels/src/plugins/pluggable/__snapshots__/pluggable.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`plugins/Pluggable should match snapshot with extended component 1`] = `
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -90,7 +90,7 @@ exports[`plugins/Pluggable should match snapshot with extended component 1`] = `
           "sidebarBg": "#1e325c",
           "sidebarHeaderBg": "#192a4d",
           "sidebarHeaderTextColor": "#ffffff",
-          "sidebarTeamBarBg": "#14213e",
+          "sidebarTeamBarBg": "#162545",
           "sidebarText": "#ffffff",
           "sidebarTextActiveBorder": "#5d89ea",
           "sidebarTextActiveColor": "#ffffff",
@@ -187,7 +187,7 @@ exports[`plugins/Pluggable should match snapshot with extended component with pl
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -223,7 +223,7 @@ exports[`plugins/Pluggable should match snapshot with extended component with pl
           "sidebarBg": "#1e325c",
           "sidebarHeaderBg": "#192a4d",
           "sidebarHeaderTextColor": "#ffffff",
-          "sidebarTeamBarBg": "#14213e",
+          "sidebarTeamBarBg": "#162545",
           "sidebarText": "#ffffff",
           "sidebarTextActiveBorder": "#5d89ea",
           "sidebarTextActiveColor": "#ffffff",
@@ -313,7 +313,7 @@ exports[`plugins/Pluggable should match snapshot with no extended component 1`]
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -380,7 +380,7 @@ exports[`plugins/Pluggable should match snapshot with non-null pluggableId 1`] =
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -446,7 +446,7 @@ exports[`plugins/Pluggable should match snapshot with null pluggableId 1`] = `
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -482,7 +482,7 @@ exports[`plugins/Pluggable should match snapshot with null pluggableId 1`] = `
           "sidebarBg": "#1e325c",
           "sidebarHeaderBg": "#192a4d",
           "sidebarHeaderTextColor": "#ffffff",
-          "sidebarTeamBarBg": "#14213e",
+          "sidebarTeamBarBg": "#162545",
           "sidebarText": "#ffffff",
           "sidebarTextActiveBorder": "#5d89ea",
           "sidebarTextActiveColor": "#ffffff",
@@ -580,7 +580,7 @@ exports[`plugins/Pluggable should match snapshot with valid pluggableId 1`] = `
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -616,7 +616,7 @@ exports[`plugins/Pluggable should match snapshot with valid pluggableId 1`] = `
           "sidebarBg": "#1e325c",
           "sidebarHeaderBg": "#192a4d",
           "sidebarHeaderTextColor": "#ffffff",
-          "sidebarTeamBarBg": "#14213e",
+          "sidebarTeamBarBg": "#162545",
           "sidebarText": "#ffffff",
           "sidebarTextActiveBorder": "#5d89ea",
           "sidebarTextActiveColor": "#ffffff",
diff --git a/webapp/channels/src/plugins/test/__snapshots__/post_type.test.tsx.snap b/webapp/channels/src/plugins/test/__snapshots__/post_type.test.tsx.snap
index 28d80a9e52..482993c8ff 100644
--- a/webapp/channels/src/plugins/test/__snapshots__/post_type.test.tsx.snap
+++ b/webapp/channels/src/plugins/test/__snapshots__/post_type.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`plugins/PostMessageView should match snapshot with extended post type 1
       "sidebarBg": "#1e325c",
       "sidebarHeaderBg": "#192a4d",
       "sidebarHeaderTextColor": "#ffffff",
-      "sidebarTeamBarBg": "#14213e",
+      "sidebarTeamBarBg": "#162545",
       "sidebarText": "#ffffff",
       "sidebarTextActiveBorder": "#5d89ea",
       "sidebarTextActiveColor": "#ffffff",
@@ -96,7 +96,7 @@ exports[`plugins/PostMessageView should match snapshot with extended post type 1
         "sidebarBg": "#1e325c",
         "sidebarHeaderBg": "#192a4d",
         "sidebarHeaderTextColor": "#ffffff",
-        "sidebarTeamBarBg": "#14213e",
+        "sidebarTeamBarBg": "#162545",
         "sidebarText": "#ffffff",
         "sidebarTextActiveBorder": "#5d89ea",
         "sidebarTextActiveColor": "#ffffff",