mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[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>
Этот коммит содержится в:
Ashish Dhama
2023-05-03 19:54:01 +05:30
коммит произвёл GitHub
родитель 698613c002
Коммит b5ce8ac741
14 изменённых файлов: 494 добавлений и 504 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

6
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>
);
};

6
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>
);
}
}

3
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,
};
}

6
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>
);
};

27
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 {
margin-right: 10px;
svg {
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
glyph={'play'}
size={16}
/>
<PlayIcon size={18}/>
<FormattedMessage
id='onboardingTask.checklist.video_title'
defaultMessage='Watch overview'
@@ -396,7 +389,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
)}
</TaskItems>
</TaskListPopover>
</>
</CompassThemeProvider>
);
};

20
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>
`;

2
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',

8
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>
);
};

3
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),
};
}

7
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>
);
};

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

21
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
glyph={'check'}
<CheckIcon
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
size={16}
glyph={'account-outline'}
/>
)}
icon={<AccountOutlineIcon size={16}/>}
>
{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
size={16}
glyph={'exit-to-app'}
/>
)}
icon={<ExitToAppIcon size={16}/>}
/>
</Menu.Group>
</Menu>

8
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
size={28}
glyph={'dock-window'}
/>
<DockWindowIcon size={28}/>
</span>
);
break;