[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,71 +154,73 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
     };
 
     return (
-        <div className='dateTime'>
+        <CompassThemeProvider theme={theme}>
-            <div className='dateTime__date'>
+            <div className='dateTime'>
-                <DatePicker
+                <div className='dateTime__date'>
-                    isPopperOpen={isPopperOpen}
+                    <DatePicker
-                    handlePopperOpenState={handlePopperOpenState}
+                        isPopperOpen={isPopperOpen}
-                    locale={locale}
+                        handlePopperOpenState={handlePopperOpenState}
-                    datePickerProps={datePickerProps}
+                        locale={locale}
-                >
+                        datePickerProps={datePickerProps}
-                    <Input
-                        value={formatDate(time.toDate())}
-                        id='customStatus__calendar-input'
-                        readOnly={true}
-                        className='dateTime__calendar-input'
-                        label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
-                        onClick={() => handlePopperOpenState(true)}
-                        tabIndex={-1}
-                        inputPrefix={inputIcon}
-                    />
-                </DatePicker>
-            </div>
-            <div className='dateTime__time'>
-                <MenuWrapper
-                    className='dateTime__time-menu'
-                >
-                    <button
-                        className='style--none'
-                        ref={timeButtonRef}
                     >
-                        <span className='dateTime__input-title'>{formatMessage({id: 'custom_status.expiry.time_picker.title', defaultMessage: 'Time'})}</span>
+                        <Input
-                        <span className='dateTime__time-icon'>
+                            value={formatDate(time.toDate())}
-                            <i className='icon-clock-outline'/>
+                            id='customStatus__calendar-input'
-                        </span>
+                            readOnly={true}
-                        <div
+                            className='dateTime__calendar-input'
-                            className='dateTime__input'
+                            label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
+                            onClick={() => handlePopperOpenState(true)}
+                            tabIndex={-1}
+                            inputPrefix={inputIcon}
+                        />
+                    </DatePicker>
+                </div>
+                <div className='dateTime__time'>
+                    <MenuWrapper
+                        className='dateTime__time-menu'
+                    >
+                        <button
+                            className='style--none'
+                            ref={timeButtonRef}
                         >
-                            <Timestamp
+                            <span className='dateTime__input-title'>{formatMessage({id: 'custom_status.expiry.time_picker.title', defaultMessage: 'Time'})}</span>
-                                useRelative={false}
+                            <span className='dateTime__time-icon'>
-                                useDate={false}
+                                <i className='icon-clock-outline'/>
-                                value={time.toString()}
+                            </span>
-                            />
+                            <div
-                        </div>
+                                className='dateTime__input'
-                    </button>
+                            >
-                    <Menu
+                                <Timestamp
-                        ariaLabel={formatMessage({id: 'time_dropdown.choose_time', defaultMessage: 'Choose a time'})}
+                                    useRelative={false}
-                        id='expiryTimeMenu'
+                                    useDate={false}
-                    >
+                                    value={time.toString()}
-                        <Menu.Group>
-                            {Array.isArray(timeOptions) && timeOptions.map((option, index) => (
-                                <Menu.ItemAction
-                                    onClick={handleTimeChange.bind(this, option)}
-                                    key={index}
-                                    text={
-                                        <Timestamp
-                                            useRelative={false}
-                                            useDate={false}
-                                            value={option}
-                                        />
-                                    }
                                 />
-                            ))}
+                            </div>
-                        </Menu.Group>
+                        </button>
-                    </Menu>
+                        <Menu
-                </MenuWrapper>
+                            ariaLabel={formatMessage({id: 'time_dropdown.choose_time', defaultMessage: 'Choose a time'})}
+                            id='expiryTimeMenu'
+                        >
+                            <Menu.Group>
+                                {Array.isArray(timeOptions) && timeOptions.map((option, index) => (
+                                    <Menu.ItemAction
+                                        onClick={handleTimeChange.bind(this, option)}
+                                        key={index}
+                                        text={
+                                            <Timestamp
+                                                useRelative={false}
+                                                useDate={false}
+                                                value={option}
+                                            />
+                                        }
+                                    />
+                                ))}
+                            </Menu.Group>
+                        </Menu>
+                    </MenuWrapper>
+                </div>
             </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,63 +236,65 @@ export default class DndCustomTimePicker extends React.PureComponent<Props, Stat
         };
 
         return (
-            <GenericModal
+            <CompassThemeProvider theme={this.props.theme}>
-                ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
+                <GenericModal
-                onExited={this.props.onExited}
+                    ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
-                modalHeaderText={modalHeaderText}
+                    onExited={this.props.onExited}
-                confirmButtonText={confirmButtonText}
+                    modalHeaderText={modalHeaderText}
-                handleConfirm={this.handleConfirm}
+                    confirmButtonText={confirmButtonText}
-                handleEnterKeyPress={this.handleConfirm}
+                    handleConfirm={this.handleConfirm}
-                id='dndCustomTimePickerModal'
+                    handleEnterKeyPress={this.handleConfirm}
-                className={'DndModal modal-overflow'}
+                    id='dndCustomTimePickerModal'
-                tabIndex={-1}
+                    className={'DndModal modal-overflow'}
-                keyboardEscape={false}
+                    tabIndex={-1}
-            >
+                    keyboardEscape={false}
-                <div className='DndModal__content'>
+                >
-                    <DatePicker
+                    <div className='DndModal__content'>
-                        isPopperOpen={isPopperOpen}
+                        <DatePicker
-                        handlePopperOpenState={this.handlePopperOpenState}
+                            isPopperOpen={isPopperOpen}
-                        locale={this.props.locale}
+                            handlePopperOpenState={this.handlePopperOpenState}
-                        datePickerProps={dayPickerProps}
+                            locale={this.props.locale}
-                    >
+                            datePickerProps={dayPickerProps}
-                        <Input
-                            value={this.formatDate(selectedDate)}
-                            readOnly={true}
-                            id='DndModal__calendar-input'
-                            className={classNames('DndModal__calendar-input', {'popper-open': isPopperOpen})}
-                            label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
-                            onClick={() => this.handlePopperOpenState(true)}
-                            tabIndex={-1}
-                            inputPrefix={inputIcon}
-                        />
-                    </DatePicker>
-                    <MenuWrapper
-                        id='dropdown-no-caret'
-                        stopPropagationOnToggle={true}
-                    >
-                        <button
-                            className='DndModal__input'
-                            type='button'
-                            ref={this.buttonRef}
                         >
-                            <div className='DndModal__input__label'>
+                            <Input
-                                <FormattedMessage
+                                value={this.formatDate(selectedDate)}
-                                    id='dnd_custom_time_picker_modal.time'
+                                readOnly={true}
-                                    defaultMessage='Time'
+                                id='DndModal__calendar-input'
-                                />
+                                className={classNames('DndModal__calendar-input', {'popper-open': isPopperOpen})}
-                            </div>
+                                label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
-                            <i className='icon icon--no-spacing icon-clock-outline icon--xs icon-14'/>
+                                onClick={() => this.handlePopperOpenState(true)}
-                            <span>{selectedTime}</span>
+                                tabIndex={-1}
-                        </button>
+                                inputPrefix={inputIcon}
-                        <Menu
+                            />
-                            openLeft={false}
+                        </DatePicker>
-                            ariaLabel={'Clear custom status after'}
+                        <MenuWrapper
+                            id='dropdown-no-caret'
+                            stopPropagationOnToggle={true}
                         >
-                            {timeMenuItems}
+                            <button
-                        </Menu>
+                                className='DndModal__input'
-                    </MenuWrapper>
+                                type='button'
-                </div>
+                                ref={this.buttonRef}
-            </GenericModal>
+                            >
+                                <div className='DndModal__input__label'>
+                                    <FormattedMessage
+                                        id='dnd_custom_time_picker_modal.time'
+                                        defaultMessage='Time'
+                                    />
+                                </div>
+                                <i className='icon icon--no-spacing icon-clock-outline icon--xs icon-14'/>
+                                <span>{selectedTime}</span>
+                            </button>
+                            <Menu
+                                openLeft={false}
+                                ariaLabel={'Clear custom status after'}
+                            >
+                                {timeMenuItems}
+                            </Menu>
+                        </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 (
-        <GlobalHeaderContainer id='global-header'>
+        <CompassThemeProvider theme={theme}>
-            <LeftControls/>
+            <GlobalHeaderContainer id='global-header'>
-            <CenterControls productId={currentProductID}/>
+                <LeftControls/>
-            <RightControls productId={currentProductID}/>
+                <CenterControls productId={currentProductID}/>
-        </GlobalHeaderContainer>
+                <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,18 +103,12 @@ 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);
-
+        color: rgba(var(--center-channel-color-rgb), 0.56);
-        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);
-
+            color: rgba(var(--center-channel-color-rgb), 0.72)
-            i {
-                color: rgba(var(--center-channel-color-rgb), 0.72)
-            }
         }
 
         span {
@@ -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,273 +1,281 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_edit_history/edited_post_item should match snapshot 1`] = `
-<div
+<CompassThemeProvider
-  className="edit-post-history__container"
+  theme={Object {}}
-  onClick={[Function]}
 >
-  <PostAriaLabelDiv
+  <div
-    className="a11y__section post"
+    className="edit-post-history__container"
-    id="searchResult_post_id"
+    onClick={[Function]}
-    post={
-      Object {
-        "channel_id": "",
-        "create_at": 0,
-        "delete_at": 0,
-        "edit_at": 0,
-        "hashtags": "",
-        "id": "post_id",
-        "is_pinned": false,
-        "message": "post message",
-        "metadata": Object {
-          "embeds": Array [],
-          "emojis": Array [],
-          "files": Array [],
-          "images": Object {},
-          "reactions": Array [],
-        },
-        "original_id": "",
-        "pending_post_id": "",
-        "props": Object {},
-        "reply_count": 0,
-        "root_id": "",
-        "type": "system_add_remove",
-        "update_at": 0,
-        "user_id": "user_id",
-      }
-    }
   >
-    <div
+    <PostAriaLabelDiv
-      aria-hidden="true"
+      className="a11y__section post"
-      className="edit-post-history__title__container"
+      id="searchResult_post_id"
+      post={
+        Object {
+          "channel_id": "",
+          "create_at": 0,
+          "delete_at": 0,
+          "edit_at": 0,
+          "hashtags": "",
+          "id": "post_id",
+          "is_pinned": false,
+          "message": "post message",
+          "metadata": Object {
+            "embeds": Array [],
+            "emojis": Array [],
+            "files": Array [],
+            "images": Object {},
+            "reactions": Array [],
+          },
+          "original_id": "",
+          "pending_post_id": "",
+          "props": Object {},
+          "reply_count": 0,
+          "root_id": "",
+          "type": "system_add_remove",
+          "update_at": 0,
+          "user_id": "user_id",
+        }
+      }
     >
       <div
-        className="edit-post-history__date__badge__container"
+        aria-hidden="true"
+        className="edit-post-history__title__container"
       >
-        <ForwardRef
+        <div
-          aria-label="Toggle to see an old message."
+          className="edit-post-history__date__badge__container"
-          className="edit-post-history__icon__button"
-          compact={true}
-          icon="chevron-right"
-          size="sm"
-        />
-        <span
-          className="edit-post-history__date"
         >
-          <Connect(injectIntl(Timestamp))
+          <ForwardRef
-            ranges={
+            aria-label="Toggle to see an old message."
-              Array [
+            className="edit-post-history__icon__button"
-                Object {
+            compact={true}
-                  "display": <Memo(MemoizedFormattedMessage)
+            icon="chevron-right"
-                    defaultMessage="Today"
+            size="sm"
-                    id="date_separator.today"
-                  />,
-                  "equals": Array [
-                    "day",
-                    0,
-                  ],
-                },
-                Object {
-                  "display": <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Yesterday"
-                    id="date_separator.yesterday"
-                  />,
-                  "equals": Array [
-                    "day",
-                    -1,
-                  ],
-                },
-              ]
-            }
-            value={0}
           />
-        </span>
+          <span
-      </div>
+            className="edit-post-history__date"
-      <OverlayTrigger
-        defaultOverlayShown={false}
-        delayShow={400}
-        overlay={
-          <Tooltip
-            className="hidden-xs"
-            id="editPostRestoreTooltip"
           >
-            Restore this version
+            <Connect(injectIntl(Timestamp))
-          </Tooltip>
+              ranges={
-        }
+                Array [
-        placement="left"
+                  Object {
-        trigger={
+                    "display": <Memo(MemoizedFormattedMessage)
-          Array [
+                      defaultMessage="Today"
-            "hover",
+                      id="date_separator.today"
-            "focus",
+                    />,
-          ]
+                    "equals": Array [
-        }
+                      "day",
-      >
+                      0,
-        <ForwardRef
+                    ],
-          aria-label="Select to restore an old message."
+                  },
-          className="edit-post-history__icon__button restore-icon"
+                  Object {
-          compact={true}
+                    "display": <Memo(MemoizedFormattedMessage)
-          icon="restore"
+                      defaultMessage="Yesterday"
-          onClick={[Function]}
+                      id="date_separator.yesterday"
-          size="sm"
+                    />,
-        />
+                    "equals": Array [
-      </OverlayTrigger>
+                      "day",
-    </div>
+                      -1,
-  </PostAriaLabelDiv>
+                    ],
-</div>
+                  },
+                ]
+              }
+              value={0}
+            />
+          </span>
+        </div>
+        <OverlayTrigger
+          defaultOverlayShown={false}
+          delayShow={400}
+          overlay={
+            <Tooltip
+              className="hidden-xs"
+              id="editPostRestoreTooltip"
+            >
+              Restore this version
+            </Tooltip>
+          }
+          placement="left"
+          trigger={
+            Array [
+              "hover",
+              "focus",
+            ]
+          }
+        >
+          <ForwardRef
+            aria-label="Select to restore an old message."
+            className="edit-post-history__icon__button restore-icon"
+            compact={true}
+            icon="restore"
+            onClick={[Function]}
+            size="sm"
+          />
+        </OverlayTrigger>
+      </div>
+    </PostAriaLabelDiv>
+  </div>
+</CompassThemeProvider>
 `;
 
 exports[`components/post_edit_history/edited_post_item should match snapshot when isCurrent is true 1`] = `
-<div
+<CompassThemeProvider
-  className="edit-post-history__container edit-post-history__container__background"
+  theme={Object {}}
-  onClick={[Function]}
 >
-  <PostAriaLabelDiv
+  <div
-    className="a11y__section post"
+    className="edit-post-history__container edit-post-history__container__background"
-    id="searchResult_post_id"
+    onClick={[Function]}
-    post={
-      Object {
-        "channel_id": "",
-        "create_at": 0,
-        "delete_at": 0,
-        "edit_at": 0,
-        "hashtags": "",
-        "id": "post_id",
-        "is_pinned": false,
-        "message": "post message",
-        "metadata": Object {
-          "embeds": Array [],
-          "emojis": Array [],
-          "files": Array [],
-          "images": Object {},
-          "reactions": Array [],
-        },
-        "original_id": "",
-        "pending_post_id": "",
-        "props": Object {},
-        "reply_count": 0,
-        "root_id": "",
-        "type": "system_add_remove",
-        "update_at": 0,
-        "user_id": "user_id",
-      }
-    }
   >
-    <div
+    <PostAriaLabelDiv
-      aria-hidden="true"
+      className="a11y__section post"
-      className="edit-post-history__title__container"
+      id="searchResult_post_id"
+      post={
+        Object {
+          "channel_id": "",
+          "create_at": 0,
+          "delete_at": 0,
+          "edit_at": 0,
+          "hashtags": "",
+          "id": "post_id",
+          "is_pinned": false,
+          "message": "post message",
+          "metadata": Object {
+            "embeds": Array [],
+            "emojis": Array [],
+            "files": Array [],
+            "images": Object {},
+            "reactions": Array [],
+          },
+          "original_id": "",
+          "pending_post_id": "",
+          "props": Object {},
+          "reply_count": 0,
+          "root_id": "",
+          "type": "system_add_remove",
+          "update_at": 0,
+          "user_id": "user_id",
+        }
+      }
     >
       <div
-        className="edit-post-history__date__badge__container"
+        aria-hidden="true"
+        className="edit-post-history__title__container"
       >
-        <ForwardRef
-          aria-label="Toggle to see an old message."
-          className="edit-post-history__icon__button"
-          compact={true}
-          icon="chevron-down"
-          size="sm"
-        />
-        <span
-          className="edit-post-history__date"
-        >
-          <Connect(injectIntl(Timestamp))
-            ranges={
-              Array [
-                Object {
-                  "display": <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Today"
-                    id="date_separator.today"
-                  />,
-                  "equals": Array [
-                    "day",
-                    0,
-                  ],
-                },
-                Object {
-                  "display": <Memo(MemoizedFormattedMessage)
-                    defaultMessage="Yesterday"
-                    id="date_separator.yesterday"
-                  />,
-                  "equals": Array [
-                    "day",
-                    -1,
-                  ],
-                },
-              ]
-            }
-            value={0}
-          />
-        </span>
         <div
-          className="edit-post-history__current__indicator"
+          className="edit-post-history__date__badge__container"
         >
-          Current Version
+          <ForwardRef
-        </div>
+            aria-label="Toggle to see an old message."
-      </div>
+            className="edit-post-history__icon__button"
-    </div>
+            compact={true}
-    <div
+            icon="chevron-down"
-      className="edit-post-history__content_container"
-    >
-      <div
-        className="edit-post-history__header"
-      >
-        <span
-          className="profile-icon"
-        >
-          <Memo(Avatar)
-            className="avatar-post-preview"
             size="sm"
-            url="/api/v4/users/user_id/image?_=0"
-          />
-        </span>
-        <div
-          className="edit-post-history__header__username"
-        >
-          <Connect(UserProfile)
-            disablePopover={true}
-            hasMention={true}
-            userId="user_id"
           />
+          <span
+            className="edit-post-history__date"
+          >
+            <Connect(injectIntl(Timestamp))
+              ranges={
+                Array [
+                  Object {
+                    "display": <Memo(MemoizedFormattedMessage)
+                      defaultMessage="Today"
+                      id="date_separator.today"
+                    />,
+                    "equals": Array [
+                      "day",
+                      0,
+                    ],
+                  },
+                  Object {
+                    "display": <Memo(MemoizedFormattedMessage)
+                      defaultMessage="Yesterday"
+                      id="date_separator.yesterday"
+                    />,
+                    "equals": Array [
+                      "day",
+                      -1,
+                    ],
+                  },
+                ]
+              }
+              value={0}
+            />
+          </span>
+          <div
+            className="edit-post-history__current__indicator"
+          >
+            Current Version
+          </div>
         </div>
       </div>
       <div
-        className="post__content"
+        className="edit-post-history__content_container"
       >
         <div
-          className="search-item-snippet post__body"
+          className="edit-post-history__header"
         >
-          <Connect(PostMessageView)
+          <span
-            isRHS={true}
+            className="profile-icon"
-            post={
+          >
-              Object {
+            <Memo(Avatar)
-                "channel_id": "",
+              className="avatar-post-preview"
-                "create_at": 0,
+              size="sm"
-                "delete_at": 0,
+              url="/api/v4/users/user_id/image?_=0"
-                "edit_at": 0,
+            />
-                "hashtags": "",
+          </span>
-                "id": "post_id",
+          <div
-                "is_pinned": false,
+            className="edit-post-history__header__username"
-                "message": "post message",
+          >
-                "metadata": Object {
+            <Connect(UserProfile)
-                  "embeds": Array [],
+              disablePopover={true}
-                  "emojis": Array [],
+              hasMention={true}
-                  "files": Array [],
+              userId="user_id"
-                  "images": Object {},
+            />
-                  "reactions": Array [],
+          </div>
-                },
+        </div>
-                "original_id": "",
+        <div
-                "pending_post_id": "",
+          className="post__content"
-                "props": Object {},
+        >
-                "reply_count": 0,
+          <div
-                "root_id": "",
+            className="search-item-snippet post__body"
-                "type": "system_add_remove",
+          >
-                "update_at": 0,
+            <Connect(PostMessageView)
-                "user_id": "user_id",
+              isRHS={true}
+              post={
+                Object {
+                  "channel_id": "",
+                  "create_at": 0,
+                  "delete_at": 0,
+                  "edit_at": 0,
+                  "hashtags": "",
+                  "id": "post_id",
+                  "is_pinned": false,
+                  "message": "post message",
+                  "metadata": Object {
+                    "embeds": Array [],
+                    "emojis": Array [],
+                    "files": Array [],
+                    "images": Object {},
+                    "reactions": Array [],
+                  },
+                  "original_id": "",
+                  "pending_post_id": "",
+                  "props": Object {},
+                  "reply_count": 0,
+                  "root_id": "",
+                  "type": "system_add_remove",
+                  "update_at": 0,
+                  "user_id": "user_id",
+                }
               }
-            }
+              showPostEditedIndicator={false}
-            showPostEditedIndicator={false}
+            />
-          />
+          </div>
         </div>
       </div>
-    </div>
+    </PostAriaLabelDiv>
-  </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,40 +206,42 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}:
     const timeStampValue = post.edit_at === 0 ? post.create_at : post.edit_at;
 
     return (
-        <div
+        <CompassThemeProvider theme={theme}>
-            className={postContainerClass}
+            <div
-            onClick={togglePost}
+                className={postContainerClass}
-        >
+                onClick={togglePost}
-            <PostAriaLabelDiv
-                className={'a11y__section post'}
-                id={'searchResult_' + post.id}
-                post={post}
             >
-                <div
+                <PostAriaLabelDiv
-                    className='edit-post-history__title__container'
+                    className={'a11y__section post'}
-                    aria-hidden='true'
+                    id={'searchResult_' + post.id}
+                    post={post}
                 >
-                    <div className='edit-post-history__date__badge__container'>
+                    <div
-                        <IconButton
+                        className='edit-post-history__title__container'
-                            size={'sm'}
+                        aria-hidden='true'
-                            icon={open ? 'chevron-down' : 'chevron-right'}
+                    >
-                            compact={true}
+                        <div className='edit-post-history__date__badge__container'>
-                            aria-label='Toggle to see an old message.'
+                            <IconButton
-                            className='edit-post-history__icon__button'
+                                size={'sm'}
-                        />
+                                icon={open ? 'chevron-down' : 'chevron-right'}
-                        <span className='edit-post-history__date'>
+                                compact={true}
-                            <Timestamp
+                                aria-label='Toggle to see an old message.'
-                                value={timeStampValue}
+                                className='edit-post-history__icon__button'
-                                ranges={DATE_RANGES}
                             />
-                        </span>
+                            <span className='edit-post-history__date'>
-                        {currentVersionIndicator}
+                                <Timestamp
+                                    value={timeStampValue}
+                                    ranges={DATE_RANGES}
+                                />
+                            </span>
+                            {currentVersionIndicator}
+                        </div>
+                        {restoreButton}
                     </div>
-                    {restoreButton}
+                    {open && messageContainer}
-                </div>
+                </PostAriaLabelDiv>
-                {open && messageContainer}
+            </div>
-            </PostAriaLabelDiv>
+        </CompassThemeProvider>
-        </div>
     );
 };
 

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;