From 6d18b69abb98734caccc2ccb35c6f1d0004ad798 Mon Sep 17 00:00:00 2001
From: Eric Sethna <eric@mattermost.com>
Date: Thu, 11 May 2023 02:00:57 -0700
Subject: [PATCH] MM-52613: Add icons to "Add channels" LHS menu (#23239)

---
 .../add_channels_cta_button.test.tsx.snap              | 10 ++++++++++
 .../src/components/sidebar/add_channels_cta_button.tsx |  2 ++
 webapp/channels/src/sass/layout/_sidebar-left.scss     |  8 ++++++++
 3 files changed, 20 insertions(+)

diff --git a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap b/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
index f89d1c3fb8..981ae5f06a 100644
--- a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
@@ -30,12 +30,22 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
   >
     <MenuGroup>
       <MenuItemAction
+        icon={
+          <i
+            className="icon-plus"
+          />
+        }
         id="showNewChannel"
         onClick={[Function]}
         show={true}
         text="Create new channel"
       />
       <MenuItemAction
+        icon={
+          <i
+            className="icon-globe"
+          />
+        }
         id="showMoreChannels"
         onClick={[Function]}
         show={true}
diff --git a/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx b/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx
index 7b85084a8e..daa92c0bc0 100644
--- a/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx
+++ b/webapp/channels/src/components/sidebar/add_channels_cta_button.tsx
@@ -80,6 +80,7 @@ const AddChannelsCtaButton = (): JSX.Element | null => {
                 <Menu.ItemAction
                     id='showMoreChannels'
                     onClick={showMoreChannelsModal}
+                    icon={<i className='icon-globe'/>}
                     text={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.browseChannels', defaultMessage: 'Browse channels'})}
                 />
             );
@@ -91,6 +92,7 @@ const AddChannelsCtaButton = (): JSX.Element | null => {
                 <Menu.ItemAction
                     id='showNewChannel'
                     onClick={showNewChannelModal}
+                    icon={<i className='icon-plus'/>}
                     text={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.createNewChannel', defaultMessage: 'Create new channel'})}
                 />
             );
diff --git a/webapp/channels/src/sass/layout/_sidebar-left.scss b/webapp/channels/src/sass/layout/_sidebar-left.scss
index 2b95ea5fc3..2369726c24 100644
--- a/webapp/channels/src/sass/layout/_sidebar-left.scss
+++ b/webapp/channels/src/sass/layout/_sidebar-left.scss
@@ -743,6 +743,14 @@ $sidebarOpacityAnimationDuration: 0.15s;
     .AddChannelsCtaDropdown .dropdown-menu {
         min-width: 210px !important;
         margin-left: 20px;
+
+        .MenuItem button span {
+            color: rgba(var(--center-channel-color-rgb), 0.9);
+
+            i {
+                color: rgba(var(--center-channel-color-rgb), 0.72);
+            }
+        }
     }
 
     #introTextInvite,