From c6cf1f480d4828d0ecd9a905a1b16d38c7a7b5ba Mon Sep 17 00:00:00 2001
From: Dean Whillier <deanwhillier@users.noreply.github.com>
Date: Wed, 1 Sep 2021 17:02:28 -0400
Subject: [PATCH] [MM-37686] Invert colours for teams button to "fix" starkness
 on light backgrounds (#5649)

* invert colours for teams button

"fixes" the starkness of the button when using a light sidebar background colour

* update snapshots

* white background for team image
---
 .../__snapshots__/switch_teams_button.test.js.snap           | 4 ++--
 .../channels_list/switch_teams_button/switch_teams_button.js | 4 ++--
 .../team_icon/__snapshots__/team_icon.test.js.snap           | 3 ++-
 app/components/team_icon/team_icon.js                        | 5 +++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/components/sidebars/main/channels_list/switch_teams_button/__snapshots__/switch_teams_button.test.js.snap b/app/components/sidebars/main/channels_list/switch_teams_button/__snapshots__/switch_teams_button.test.js.snap
index 3a49521b5..1aec2b846 100644
--- a/app/components/sidebars/main/channels_list/switch_teams_button/__snapshots__/switch_teams_button.test.js.snap
+++ b/app/components/sidebars/main/channels_list/switch_teams_button/__snapshots__/switch_teams_button.test.js.snap
@@ -12,7 +12,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "rgba(255,255,255,0.24)",
           "borderRadius": 2,
           "flexDirection": "row",
           "height": 36,
@@ -28,7 +28,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
         size={24}
         style={
           Object {
-            "color": "#1153ab",
+            "color": "#ffffff",
             "left": -2,
             "top": 1,
           }
diff --git a/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js b/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js
index 6c7b643bf..55bd998d3 100644
--- a/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js
+++ b/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js
@@ -131,13 +131,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontWeight: 'bold',
         },
         switcherArrow: {
-            color: theme.sidebarHeaderBg,
+            color: theme.sidebarHeaderTextColor,
             top: 1,
             left: -2,
         },
         switcherContainer: {
             alignItems: 'center',
-            backgroundColor: theme.sidebarHeaderTextColor,
+            backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.24),
             borderRadius: 2,
             flexDirection: 'row',
             justifyContent: 'center',
diff --git a/app/components/team_icon/__snapshots__/team_icon.test.js.snap b/app/components/team_icon/__snapshots__/team_icon.test.js.snap
index 24b21bcbf..3b5ce4fd2 100644
--- a/app/components/team_icon/__snapshots__/team_icon.test.js.snap
+++ b/app/components/team_icon/__snapshots__/team_icon.test.js.snap
@@ -6,7 +6,7 @@ exports[`TeamIcon should match snapshot 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#145dbf",
         "borderRadius": 2,
         "height": 30,
         "justifyContent": "center",
@@ -27,6 +27,7 @@ exports[`TeamIcon should match snapshot 1`] = `
     style={
       Array [
         Object {
+          "backgroundColor": "white",
           "borderRadius": 2,
           "bottom": 0,
           "left": 0,
diff --git a/app/components/team_icon/team_icon.js b/app/components/team_icon/team_icon.js
index b86ecefa1..afb5ef384 100644
--- a/app/components/team_icon/team_icon.js
+++ b/app/components/team_icon/team_icon.js
@@ -103,10 +103,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderRadius: 2,
             alignItems: 'center',
             justifyContent: 'center',
-            backgroundColor: theme.sidebarText,
+            backgroundColor: theme.sidebarBg,
         },
         text: {
-            color: theme.sidebarBg,
+            color: theme.sidebarText,
             fontFamily: 'OpenSans',
             fontWeight: '600',
             fontSize: 15,
@@ -118,6 +118,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             bottom: 0,
             left: 0,
             right: 0,
+            backgroundColor: 'white',
         },
     };
 });