[WebApp][MM-52138]: Wrap all the components using compass-components with compass-components theme provider (#22941)

* wrap all the components using compass-components with compass-components theme provider

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx

@@ -4,8 +4,7 @@
 import React, {memo, useCallback} from 'react';
 
 import ReactSelect, {ValueType} from 'react-select';
-
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
-import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
 
 import {trackEvent} from 'actions/telemetry_actions';
 
@@ -57,10 +56,7 @@ const TimeFrameDropdown = (props: Props) => {
     const CustomDropwdown = () => {
         return (
             <span className='icon'>
-                <Icon
+                <ChevronDownIcon size={12}/>
-                    size={12}
-                    glyph={'chevron-down'}
-                />
             </span>
         );
     };

webapp/channels/src/components/custom_status/date_time_input.tsx

@@ -16,11 +16,14 @@ import Input from 'components/widgets/inputs/input/input';
 import DatePicker from 'components/date_picker';
 import Menu from 'components/widgets/menu/menu';
 import Timestamp from 'components/timestamp';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
+
 import {getCurrentLocale} from 'selectors/i18n';
 import {isKeyPressed} from 'utils/keyboard';
 import {localizeMessage} from 'utils/utils';
 import {getCurrentMomentForTimezone} from 'utils/timezone';
 import Constants, {A11yCustomEventTypes, A11yFocusEventDetail} from 'utils/constants';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 const CUSTOM_STATUS_TIME_PICKER_INTERVALS_IN_MINUTES = 30;
 
@@ -62,6 +65,7 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
     const [isPopperOpen, setIsPopperOpen] = useState(false);
     const {formatMessage} = useIntl();
     const timeButtonRef = useRef<HTMLButtonElement>(null);
+    const theme = useSelector(getTheme);
 
     const handlePopperOpenState = useCallback((isOpen: boolean) => {
         setIsPopperOpen(isOpen);
@@ -150,6 +154,7 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
     };
 
     return (
+        <CompassThemeProvider theme={theme}>
             <div className='dateTime'>
                 <div className='dateTime__date'>
                     <DatePicker
@@ -215,6 +220,7 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
                     </MenuWrapper>
                 </div>
             </div>
+        </CompassThemeProvider>
     );
 };
 

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx

@@ -15,6 +15,7 @@ import {ActionFunc} from 'mattermost-redux/types/actions';
 import {UserStatus} from '@mattermost/types/users';
 
 import GenericModal from 'components/generic_modal';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 
 import Constants, {A11yCustomEventTypes, A11yFocusEventDetail, UserStatuses} from 'utils/constants';
 import Menu from 'components/widgets/menu/menu';
@@ -26,12 +27,15 @@ import {isKeyPressed} from 'utils/keyboard';
 import {localizeMessage} from 'utils/utils';
 import Input from 'components/widgets/inputs/input/input';
 import DatePicker from 'components/date_picker';
+import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
 type Props = {
     onExited: () => void;
     userId: string;
     currentDate: Date;
     locale: string;
+
+    theme: Theme;
     actions: {
         setStatus: (status: UserStatus) => ActionFunc;
     };
@@ -232,6 +236,7 @@ export default class DndCustomTimePicker extends React.PureComponent<Props, Stat
         };
 
         return (
+            <CompassThemeProvider theme={this.props.theme}>
                 <GenericModal
                     ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
                     onExited={this.props.onExited}
@@ -289,6 +294,7 @@ export default class DndCustomTimePicker extends React.PureComponent<Props, Stat
                         </MenuWrapper>
                     </div>
                 </GenericModal>
+            </CompassThemeProvider>
         );
     }
 }

webapp/channels/src/components/dnd_custom_time_picker_modal/index.ts

@@ -7,6 +7,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
 
 import {setStatus} from 'mattermost-redux/actions/users';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
@@ -19,10 +20,12 @@ const DndCustomTimePicker = makeAsyncComponent('DndCustomTimePicker', React.lazy
 function mapStateToProps(state: GlobalState) {
     const userId = getCurrentUserId(state);
     const locale = getCurrentLocale(state);
+    const theme = getTheme(state);
 
     return {
         userId,
         locale,
+        theme,
     };
 }
 

webapp/channels/src/components/global_header/global_header.tsx

@@ -12,6 +12,9 @@ import LeftControls from './left_controls/left_controls';
 import RightControls from './right_controls/right_controls';
 
 import {useIsLoggedIn} from './hooks';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
+import {useSelector} from 'react-redux';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 const GlobalHeaderContainer = styled.header`
     position: relative;
@@ -38,17 +41,20 @@ const GlobalHeaderContainer = styled.header`
 const GlobalHeader = (): JSX.Element | null => {
     const isLoggedIn = useIsLoggedIn();
     const currentProductID = useCurrentProductId();
+    const theme = useSelector(getTheme);
 
     if (!isLoggedIn) {
         return null;
     }
 
     return (
+        <CompassThemeProvider theme={theme}>
             <GlobalHeaderContainer id='global-header'>
                 <LeftControls/>
                 <CenterControls productId={currentProductID}/>
                 <RightControls productId={currentProductID}/>
             </GlobalHeaderContainer>
+        </CompassThemeProvider>
     );
 };
 

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx

@@ -5,8 +5,6 @@ import React, {useRef, useCallback, useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import styled, {css} from 'styled-components';
 
-import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
-
 import {FormattedMessage} from 'react-intl';
 
 import {getShowTaskListBool} from 'selectors/onboarding';
@@ -15,6 +13,7 @@ import {shouldShowAutoLinkedBoard} from 'selectors/plugins';
 import {
     getBool,
     getMyPreferences as getMyPreferencesSelector,
+    getTheme,
 } from 'mattermost-redux/selectors/entities/preferences';
 import {getMyPreferences, savePreferences} from 'mattermost-redux/actions/preferences';
 import {getPrevTrialLicense} from 'mattermost-redux/actions/admin';
@@ -29,6 +28,7 @@ import {
 import {useFirstAdminUser, useIsCurrentUserSystemAdmin} from 'components/global_header/hooks';
 import {useHandleOnBoardingTaskTrigger} from 'components/onboarding_tasks/onboarding_tasks_manager';
 import OnBoardingVideoModal from 'components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 
 import {openModal} from 'actions/views/modals';
 import {GlobalState} from 'types/store';
@@ -42,6 +42,7 @@ import {TaskListPopover} from './onboarding_tasklist_popover';
 import {Task} from './onboarding_tasklist_task';
 import Completed from './onboarding_tasklist_completed';
 import {CompletedAnimation} from './onboarding_tasklist_animations';
+import {CloseIcon, PlayIcon, PlaylistCheckIcon} from '@mattermost/compass-icons/components';
 
 const TaskItems = styled.div`
     border-radius: 4px;
@@ -102,19 +103,13 @@ const Button = styled.button<{open: boolean}>(({open}) => {
         background: var(--center-channel-bg);
         border: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
         box-shadow: var(--elevation-3);
-
-        i {
         color: rgba(var(--center-channel-color-rgb), 0.56);
-        }
 
         &:hover {
             border-color: rgba(var(--center-channel-color-rgb), 0.24);
             box-shadow: var(--elevation-4);
-
-            i {
             color: rgba(var(--center-channel-color-rgb), 0.72)
         }
-        }
 
         span {
             width: 20px;
@@ -154,8 +149,8 @@ const PlayButton = styled.button`
         box-shadow: var(--elevation-4);
     }
 
-    i {
+    svg {
-        margin-right: 10px;
+        margin-right: 6px;
         vertical-align: middle;
     }
 `;
@@ -190,6 +185,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
     const isFirstAdmin = useFirstAdminUser();
     const isEnableOnboardingFlow = useSelector((state: GlobalState) => getConfig(state).EnableOnboardingFlow === 'true');
     const [showTaskList, firstTimeOnboarding] = useSelector(getShowTaskListBool);
+    const theme = useSelector(getTheme);
 
     // a/b test auto show linked boards
     const autoShowLinkedBoard = useSelector((state: GlobalState) => shouldShowAutoLinkedBoard(state));
@@ -318,7 +314,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
     }
 
     return (
-        <>
+        <CompassThemeProvider theme={theme}>
             <CompletedAnimation completed={showAnimation}/>
             <Button
                 onClick={toggleTaskList}
@@ -326,7 +322,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
                 open={open}
                 data-cy='onboarding-task-list-action-button'
             >
-                <Icon glyph={open ? 'close' : 'playlist-check'}/>
+                {open ? <CloseIcon size={20}/> : <PlaylistCheckIcon size={20}/>}
                 {itemsLeft !== 0 && (<span>{itemsLeft}</span>)}
             </Button>
             <TaskListPopover
@@ -363,10 +359,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
                                     <PlayButton
                                         onClick={openVideoModal}
                                     >
-                                        <Icon
+                                        <PlayIcon size={18}/>
-                                            glyph={'play'}
-                                            size={16}
-                                        />
                                         <FormattedMessage
                                             id='onboardingTask.checklist.video_title'
                                             defaultMessage='Watch overview'
@@ -396,7 +389,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
                         )}
                 </TaskItems>
             </TaskListPopover>
-        </>
+        </CompassThemeProvider>
     );
 };
 

webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap

@@ -1,10 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_edit_history/edited_post_item should match snapshot 1`] = `
-<div
+<CompassThemeProvider
+  theme={Object {}}
+>
+  <div
     className="edit-post-history__container"
     onClick={[Function]}
->
+  >
     <PostAriaLabelDiv
       className="a11y__section post"
       id="searchResult_post_id"
@@ -112,14 +115,18 @@ exports[`components/post_edit_history/edited_post_item should match snapshot 1`]
         </OverlayTrigger>
       </div>
     </PostAriaLabelDiv>
-</div>
+  </div>
+</CompassThemeProvider>
 `;
 
 exports[`components/post_edit_history/edited_post_item should match snapshot when isCurrent is true 1`] = `
-<div
+<CompassThemeProvider
+  theme={Object {}}
+>
+  <div
     className="edit-post-history__container edit-post-history__container__background"
     onClick={[Function]}
->
+  >
     <PostAriaLabelDiv
       className="a11y__section post"
       id="searchResult_post_id"
@@ -269,5 +276,6 @@ exports[`components/post_edit_history/edited_post_item should match snapshot whe
         </div>
       </div>
     </PostAriaLabelDiv>
-</div>
+  </div>
+</CompassThemeProvider>
 `;

webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.test.tsx

@@ -4,6 +4,7 @@
 import React, {ComponentProps} from 'react';
 import {shallow} from 'enzyme';
 
+import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {TestHelper} from 'utils/test_helper';
 import {ModalIdentifiers} from 'utils/constants';
 
@@ -18,6 +19,7 @@ describe('components/post_edit_history/edited_post_item', () => {
             message: 'post message',
         }),
         isCurrent: false,
+        theme: {} as Theme,
         postCurrentVersion: TestHelper.getPostMock({
             id: 'post_current_version_id',
             message: 'post current version message',

webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx

@@ -6,6 +6,8 @@ import React, {memo, useCallback, useState} from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import classNames from 'classnames';
 
+import {Theme} from 'mattermost-redux/selectors/entities/preferences';
+
 import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 import {CheckIcon} from '@mattermost/compass-icons/components';
 
@@ -15,6 +17,7 @@ import Constants, {ModalIdentifiers} from 'utils/constants';
 import {imageURLForUser} from 'utils/utils';
 import {t} from 'utils/i18n';
 
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
 import PostAriaLabelDiv from 'components/post_view/post_aria_label_div';
 import OverlayTrigger from 'components/overlay_trigger';
 import PostMessageContainer from 'components/post_view/post_message_view';
@@ -51,9 +54,10 @@ const itemMessages = defineMessages({
 export type Props = PropsFromRedux & {
     post: Post;
     isCurrent?: boolean;
+    theme: Theme;
 }
 
-const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}: Props) => {
+const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, actions}: Props) => {
     const {formatMessage} = useIntl();
     const [open, setOpen] = useState(isCurrent);
 
@@ -202,6 +206,7 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}:
     const timeStampValue = post.edit_at === 0 ? post.create_at : post.edit_at;
 
     return (
+        <CompassThemeProvider theme={theme}>
             <div
                 className={postContainerClass}
                 onClick={togglePost}
@@ -236,6 +241,7 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}:
                     {open && messageContainer}
                 </PostAriaLabelDiv>
             </div>
+        </CompassThemeProvider>
     );
 };
 

webapp/channels/src/components/post_edit_history/edited_post_item/index.ts

@@ -17,11 +17,14 @@ import {closeRightHandSide} from 'actions/views/rhs';
 import {openModal} from 'actions/views/modals';
 
 import EditedPostItem from './edited_post_item';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 function mapStateToProps(state: GlobalState) {
     const selectedPostId = getSelectedPostId(state) || '';
+    const theme = getTheme(state);
 
     return {
+        theme,
         postCurrentVersion: getPost(state, selectedPostId),
     };
 }

webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx

@@ -23,6 +23,8 @@ import {useShowOnboardingTutorialStep} from 'components/tours/onboarding_tour';
 import {OnboardingTourSteps} from 'components/tours';
 
 import {setAddChannelDropdown} from 'actions/views/add_channel_dropdown';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 type SidebarHeaderContainerProps = {
     id?: string;
@@ -106,6 +108,7 @@ const SidebarHeader: React.FC<Props> = (props: Props): JSX.Element => {
     const showInviteTutorialTip = useShowOnboardingTutorialStep(OnboardingTourSteps.INVITE_PEOPLE);
     const usageDeltas = useGetUsageDeltas();
     const isAddChannelOpen = useSelector(isAddChannelDropdownOpen);
+    const theme = useSelector(getTheme);
     const openAddChannelOpen = useCallback((open: boolean) => {
         dispatch(setAddChannelDropdown(open));
     }, []);
@@ -117,7 +120,7 @@ const SidebarHeader: React.FC<Props> = (props: Props): JSX.Element => {
     };
 
     return (
-        <>
+        <CompassThemeProvider theme={theme}>
             <SidebarHeaderContainer
                 id={'sidebar-header-container'}
             >
@@ -164,7 +167,7 @@ const SidebarHeader: React.FC<Props> = (props: Props): JSX.Element => {
                     showWorkTemplateButton={props.showWorkTemplateButton}
                 />
             </SidebarHeaderContainer>
-        </>
+        </CompassThemeProvider>
     );
 };
 

webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap

@@ -93,9 +93,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -208,8 +207,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -222,8 +220,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -411,9 +408,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -526,8 +522,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -540,8 +535,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -681,9 +675,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -796,8 +789,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -810,8 +802,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -951,9 +942,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -1066,8 +1056,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -1080,8 +1069,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -1222,9 +1210,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -1337,8 +1324,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -1351,8 +1337,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -1467,9 +1452,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -1582,8 +1566,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -1596,8 +1579,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -1704,9 +1686,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -1819,8 +1800,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -1833,8 +1813,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -1974,9 +1953,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -2089,8 +2067,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -2103,8 +2080,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }
@@ -2292,9 +2268,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
         id="status-menu-away"
         onClick={[Function]}
         rightDecorator={
-          <Icon
+          <CheckIcon
-            color="success"
+            color="var(--semantic-color-success)"
-            glyph="check"
             size={16}
           />
         }
@@ -2407,8 +2382,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
           }
         }
         icon={
-          <Icon
+          <AccountOutlineIcon
-            glyph="account-outline"
             size={16}
           />
         }
@@ -2421,8 +2395,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
     <MenuGroup>
       <MenuItemAction
         icon={
-          <Icon
+          <ExitToAppIcon
-            glyph="exit-to-app"
             size={16}
           />
         }

webapp/channels/src/components/status_dropdown/status_dropdown.tsx

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 
 import StatusIcon from '@mattermost/compass-components/components/status-icon'; // eslint-disable-line no-restricted-imports
 import Text from '@mattermost/compass-components/components/text'; // eslint-disable-line no-restricted-imports
-import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
 import {TUserStatus} from '@mattermost/compass-components/shared'; // eslint-disable-line no-restricted-imports
 
 import {ActionFunc} from 'mattermost-redux/types/actions';
@@ -40,6 +39,7 @@ import {PulsatingDot} from '@mattermost/components';
 import {PreferenceType} from '@mattermost/types/preferences';
 
 import './status_dropdown.scss';
+import {AccountOutlineIcon, CheckIcon, ExitToAppIcon} from '@mattermost/compass-icons/components';
 
 type Props = {
     intl: IntlShape;
@@ -353,10 +353,9 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
         const setCustomTimedDnd = needsConfirm ? () => this.showStatusChangeConfirmation('dnd') : this.setCustomTimedDnd;
 
         const selectedIndicator = (
-            <Icon
+            <CheckIcon
-                glyph={'check'}
                 size={16}
-                color={'success'}
+                color={'var(--semantic-color-success)'}
             />
         );
 
@@ -571,12 +570,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                             dialogType={UserSettingsModal}
                             dialogProps={{isContentProductSettings: false}}
                             text={localizeMessage('navbar_dropdown.profileSettings', 'Profile')}
-                            icon={(
+                            icon={<AccountOutlineIcon size={16}/>}
-                                <Icon
-                                    size={16}
-                                    glyph={'account-outline'}
-                                />
-                            )}
                         >
                             {this.props.showCompleteYourProfileTour && (
                                 <div
@@ -593,12 +587,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                             id='logout'
                             onClick={this.handleEmitUserLoggedOutEvent}
                             text={localizeMessage('navbar_dropdown.logout', 'Log Out')}
-                            icon={(
+                            icon={<ExitToAppIcon size={16}/>}
-                                <Icon
-                                    size={16}
-                                    glyph={'exit-to-app'}
-                                />
-                            )}
                         />
                     </Menu.Group>
                 </Menu>

webapp/channels/src/components/suggestion/command_provider/command_provider.tsx

@@ -5,8 +5,6 @@ import React from 'react';
 
 import {Store} from 'redux';
 
-import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
-
 import {Client4} from 'mattermost-redux/client';
 import {appsEnabled} from 'mattermost-redux/selectors/entities/apps';
 import {AutocompleteSuggestion, CommandArgs} from '@mattermost/types/integrations';
@@ -23,6 +21,7 @@ import {GlobalState} from 'types/store';
 
 import {AppCommandParser} from './app_command_parser/app_command_parser';
 import {intlShim} from './app_command_parser/app_command_parser_dependencies';
+import {DockWindowIcon} from '@mattermost/compass-icons/components';
 
 const EXECUTE_CURRENT_COMMAND_ITEM_ID = Constants.Integrations.EXECUTE_CURRENT_COMMAND_ITEM_ID;
 const OPEN_COMMAND_IN_MODAL_ITEM_ID = Constants.Integrations.OPEN_COMMAND_IN_MODAL_ITEM_ID;
@@ -45,10 +44,7 @@ export class CommandSuggestion extends Suggestion {
         case OPEN_COMMAND_IN_MODAL_ITEM_ID:
             symbolSpan = (
                 <span className='block mt-1'>
-                    <Icon
+                    <DockWindowIcon size={28}/>
-                        size={28}
-                        glyph={'dock-window'}
-                    />
                 </span>
             );
             break;