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

Change HeaderIconWrapper so that it get its icon passed as a children instead of a props (#28723)

Просмотр исходного кода 
Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>
Этот коммит содержится в:
Nicolas Le Cam
2024-10-15 20:59:28 +02:00
коммит произвёл GitHub
родитель d5ce06e580
Коммит 63c97f5a6d
7 изменённых файлов: 277 добавлений и 331 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

527
webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
Просмотреть файл

@@ -74,14 +74,13 @@ exports[`components/ChannelHeader should match snapshot with last active display
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -353,14 +352,13 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -563,34 +561,30 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs channel-header__icon--active"
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -788,34 +782,30 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -1013,34 +1003,30 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -1238,34 +1224,30 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -1463,34 +1445,30 @@ exports[`components/ChannelHeader should render archived view 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -1709,34 +1687,30 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -1934,34 +1908,30 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -2201,14 +2171,13 @@ exports[`components/ChannelHeader should render properly when custom status is e
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -2478,14 +2447,13 @@ exports[`components/ChannelHeader should render properly when custom status is s
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -2733,34 +2701,30 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -2958,34 +2922,30 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -3183,34 +3143,30 @@ exports[`components/ChannelHeader should render properly when populated with cha
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -3434,34 +3390,30 @@ exports[`components/ChannelHeader should render shared view 1`] = `
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"
@@ -3661,54 +3613,47 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
<HeaderIconWrapper
buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="member_rhs"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Members"
/>
>
<i
aria-hidden="true"
className="icon icon-account-outline channel-header__members"
/>
<span
className="icon__text"
id="channelMemberCountText"
>
-
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
buttonId="channelHeaderPinButton"
iconComponent={
<React.Fragment>
<i
aria-hidden="true"
className="icon icon-pin-outline channel-header__pin"
/>
<span
className="icon__text"
id="channelPinnedPostCountText"
>
2
</span>
</React.Fragment>
}
onClick={[Function]}
tooltip="Pinned messages"
/>
>
<i
aria-hidden="true"
className="icon icon-pin-outline channel-header__pin"
/>
<span
className="icon__text"
id="channelPinnedPostCountText"
>
2
</span>
</HeaderIconWrapper>
<HeaderIconWrapper
buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
buttonId="channelHeaderFilesButton"
iconComponent={
<i
className="icon icon-file-text-outline"
/>
}
onClick={[Function]}
tooltip="Channel files"
/>
>
<i
className="icon icon-file-text-outline"
/>
</HeaderIconWrapper>
</div>
<div
className="channel-header__description"

15
webapp/channels/src/components/channel_header/channel_header.tsx
Просмотреть файл

@@ -376,12 +376,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
const pinnedButton = this.props.pinnedPostsCount ? (
<HeaderIconWrapper
iconComponent={pinnedIcon}
buttonClass={pinnedIconClass}
buttonId={'channelHeaderPinButton'}
onClick={this.showPinnedPosts}
tooltip={this.props.intl.formatMessage({id: 'channel_header.pinnedPosts', defaultMessage: 'Pinned messages'})}
/>
>
{pinnedIcon}
</HeaderIconWrapper>
) : (
null
);
@@ -421,12 +422,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
memberListButton = (
<HeaderIconWrapper
iconComponent={membersIcon}
tooltip={this.props.intl.formatMessage({id: 'channel_header.channelMembers', defaultMessage: 'Members'})}
buttonClass={membersIconClass}
buttonId={'member_rhs'}
onClick={this.toggleChannelMembersRHS}
/>
>
{membersIcon}
</HeaderIconWrapper>
);
}
@@ -614,12 +616,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
{pinnedButton}
{this.props.isFileAttachmentsEnabled &&
<HeaderIconWrapper
iconComponent={channelFilesIcon}
buttonClass={channelFilesIconClass}
buttonId={'channelHeaderFilesButton'}
onClick={this.showChannelFiles}
tooltip={this.props.intl.formatMessage({id: 'channel_header.channelFiles', defaultMessage: 'Channel files'})}
/>
>
{channelFilesIcon}
</HeaderIconWrapper>
}
</div>
{headerTextContainer}

5
webapp/channels/src/components/channel_header/channel_info_button.tsx
Просмотреть файл

@@ -67,9 +67,10 @@ const ChannelInfoButton = ({channel}: Props) => {
buttonClass={buttonClass}
buttonId='channel-info-btn'
onClick={toggleRHS}
iconComponent={<Icon className='icon-information-outline'/>}
tooltip={tooltip}
/>
>
<Icon className='icon-information-outline'/>
</HeaderIconWrapper>
);
};

2
webapp/channels/src/components/channel_header/components/header_icon_wrapper.test.tsx
Просмотреть файл

@@ -17,7 +17,7 @@ describe('components/channel_header/components/HeaderIconWrapper', () => {
);
const baseProps = {
iconComponent: mentionsIcon,
children: mentionsIcon,
buttonClass: 'button_class',
buttonId: 'button_id',
onClick: jest.fn(),

6
webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
Просмотреть файл

@@ -19,7 +19,7 @@ type Props = {
buttonClass?: string;
buttonId: string;
iconComponent: React.ReactNode;
children: React.ReactNode;
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
tooltip: string;
tooltipShortcut?: ShortcutDefinition;
@@ -32,7 +32,7 @@ const HeaderIconWrapper = (props: Props) => {
ariaLabelOverride,
buttonClass,
buttonId,
iconComponent,
children,
onClick,
tooltip: tooltipText,
tooltipShortcut,
@@ -58,7 +58,7 @@ const HeaderIconWrapper = (props: Props) => {
className={buttonClass || 'channel-header__icon'}
onClick={onClick}
>
{iconComponent}
{children}
</button>
</WithTooltip>
{boardsEnabled &&

33
webapp/channels/src/components/search/search.tsx
Просмотреть файл

@@ -382,12 +382,6 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
const renderMentionButton = (): JSX.Element => (
<HeaderIconWrapper
iconComponent={
<MentionsIcon
className='icon icon--standard'
aria-hidden='true'
/>
}
buttonClass={classNames(
'channel-header__icon',
{'channel-header__icon--active': props.isMentionSearch},
@@ -397,14 +391,16 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
tooltip={intl.formatMessage({id: 'channel_header.recentMentions', defaultMessage: 'Recent mentions'})}
tooltipShortcut={mentionsShortcut}
isRhsOpen={props.isRhsOpen}
/>
>
<MentionsIcon
className='icon icon--standard'
aria-hidden='true'
/>
</HeaderIconWrapper>
);
const renderFlagBtn = (): JSX.Element => (
<HeaderIconWrapper
iconComponent={
<FlagIcon className='icon icon--standard'/>
}
buttonClass={classNames(
'channel-header__icon ',
{'channel-header__icon--active': props.isFlaggedPosts},
@@ -413,7 +409,9 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
onClick={getFlagged}
tooltip={intl.formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved messages'})}
isRhsOpen={props.isRhsOpen}
/>
>
<FlagIcon className='icon icon--standard'/>
</HeaderIconWrapper>
);
const renderHintPopover = (): JSX.Element => {
@@ -500,16 +498,15 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
if (hideSearchBar) {
return (
<HeaderIconWrapper
iconComponent={
<SearchIcon
className='icon icon--standard'
aria-hidden='true'
/>
}
buttonId={'channelHeaderSearchButton'}
onClick={searchButtonClick}
tooltip={intl.formatMessage({id: 'channel_header.search', defaultMessage: 'Search'})}
/>
>
<SearchIcon
className='icon icon--standard'
aria-hidden='true'
/>
</HeaderIconWrapper>
);
}

20
webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
Просмотреть файл

@@ -198,13 +198,14 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
<HeaderIconWrapper
key={'channelHeaderButton' + plug.id}
buttonClass='channel-header__icon'
iconComponent={plug.icon!}
onClick={() => this.fireAction(plug.action!)}
buttonId={plug.id + 'ChannelHeaderButton'}
tooltip={plug.tooltipText ?? plug.dropdownText ?? ''}
ariaLabelOverride={ariaLabel}
pluginId={plug.pluginId}
/>
>
{plug.icon}
</HeaderIconWrapper>
);
};
@@ -265,17 +266,16 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
<HeaderIconWrapper
key={`channelHeaderButton_${binding.app_id}_${binding.location}`}
buttonClass='channel-header__icon style--none'
iconComponent={(
<img
src={binding.icon}
width='24'
height='24'
/>
)}
onClick={() => this.onBindingClick(binding)}
buttonId={`${binding.app_id}_${binding.location}`}
tooltip={binding.label}
/>
>
<img
src={binding.icon}
width='24'
height='24'
/>
</HeaderIconWrapper>
);
};