From dec58afe462a9ddacea8dea537a1c5c046eb0de5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Thu, 9 Feb 2023 13:11:34 +0100 Subject: [PATCH] feat(icons) add new moderator icon --- react/features/base/icons/svg/host.svg | 6 ----- react/features/base/icons/svg/index.ts | 2 +- react/features/base/icons/svg/moderator.svg | 3 +++ .../components/native/ModeratorIndicator.js | 22 ------------------- .../components/native/ModeratorIndicator.tsx | 17 ++++++++++++++ ...torIndicator.js => ModeratorIndicator.tsx} | 14 ++++++------ .../AbstractGrantModeratorButton.js | 4 ++-- .../components/web/GrantModeratorButton.js | 4 ++-- 8 files changed, 32 insertions(+), 40 deletions(-) delete mode 100644 react/features/base/icons/svg/host.svg create mode 100644 react/features/base/icons/svg/moderator.svg delete mode 100644 react/features/filmstrip/components/native/ModeratorIndicator.js create mode 100644 react/features/filmstrip/components/native/ModeratorIndicator.tsx rename react/features/filmstrip/components/web/{ModeratorIndicator.js => ModeratorIndicator.tsx} (66%) diff --git a/react/features/base/icons/svg/host.svg b/react/features/base/icons/svg/host.svg deleted file mode 100644 index 40b7cf4c7..000000000 --- a/react/features/base/icons/svg/host.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/react/features/base/icons/svg/index.ts b/react/features/base/icons/svg/index.ts index d5315d5ca..01aa386cd 100644 --- a/react/features/base/icons/svg/index.ts +++ b/react/features/base/icons/svg/index.ts @@ -20,7 +20,6 @@ export { default as IconCode } from './code.svg'; export { default as IconConnection } from './connection.svg'; export { default as IconConnectionInactive } from './ninja.svg'; export { default as IconCopy } from './copy.svg'; -export { default as IconCrown } from './host.svg'; export { default as IconDeviceHeadphone } from './headset.svg'; export { default as IconDotsHorizontal } from './dots-horizontal.svg'; export { default as IconDownload } from './download.svg'; @@ -51,6 +50,7 @@ export { default as IconMessage } from './message.svg'; export { default as IconMeter } from './meter.svg'; export { default as IconMic } from './mic.svg'; export { default as IconMicSlash } from './mic-slash.svg'; +export { default as IconModerator } from './moderator.svg'; export { default as IconNoiseSuppressionOff } from './noise-suppression-off.svg'; export { default as IconNoiseSuppressionOn } from './noise-suppression-on.svg'; export { default as IconArrowRight } from './arrow-right.svg'; diff --git a/react/features/base/icons/svg/moderator.svg b/react/features/base/icons/svg/moderator.svg new file mode 100644 index 000000000..617804179 --- /dev/null +++ b/react/features/base/icons/svg/moderator.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js deleted file mode 100644 index bd7e4308b..000000000 --- a/react/features/filmstrip/components/native/ModeratorIndicator.js +++ /dev/null @@ -1,22 +0,0 @@ -// @flow - -import React, { Component } from 'react'; - -import { IconCrown } from '../../../base/icons'; -import { BaseIndicator } from '../../../base/react'; - -/** - * Thumbnail badge showing that the participant is a conference moderator. - */ -export default class ModeratorIndicator extends Component<{}> { - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - */ - render() { - return ( - - ); - } -} diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.tsx b/react/features/filmstrip/components/native/ModeratorIndicator.tsx new file mode 100644 index 000000000..f7ba32859 --- /dev/null +++ b/react/features/filmstrip/components/native/ModeratorIndicator.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { IconModerator } from '../../../base/icons'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore +import { BaseIndicator } from '../../../base/react'; + +/** + * Thumbnail badge showing that the participant is a conference moderator. + * + * @returns {JSX.Element} + */ +export default function MoeratorIndicator(): JSX.Element { + return ( + + ); +} diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.tsx similarity index 66% rename from react/features/filmstrip/components/web/ModeratorIndicator.js rename to react/features/filmstrip/components/web/ModeratorIndicator.tsx index bbf01f0ed..ce270b084 100644 --- a/react/features/filmstrip/components/web/ModeratorIndicator.js +++ b/react/features/filmstrip/components/web/ModeratorIndicator.tsx @@ -1,8 +1,8 @@ -/* @flow */ - import React from 'react'; -import { IconCrown } from '../../../base/icons'; +import { IconModerator } from '../../../base/icons'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore import { BaseIndicator } from '../../../base/react'; /** @@ -13,17 +13,17 @@ type Props = { /** * From which side of the indicator the tooltip should appear from. */ - tooltipPosition: string + tooltipPosition: string; }; /** * React {@code Component} for showing a moderator icon with a tooltip. * - * @returns {Component} + * @returns {JSX.Element} */ -const ModeratorIndicator = ({ tooltipPosition }: Props) => ( +const ModeratorIndicator = ({ tooltipPosition }: Props): JSX.Element => ( diff --git a/react/features/video-menu/components/AbstractGrantModeratorButton.js b/react/features/video-menu/components/AbstractGrantModeratorButton.js index 002f9a72a..b48ae7fe2 100644 --- a/react/features/video-menu/components/AbstractGrantModeratorButton.js +++ b/react/features/video-menu/components/AbstractGrantModeratorButton.js @@ -1,7 +1,7 @@ // @flow import { openDialog } from '../../base/dialog'; -import { IconCrown } from '../../base/icons'; +import { IconModerator } from '../../base/icons'; import { PARTICIPANT_ROLE, getLocalParticipant, @@ -35,7 +35,7 @@ export type Props = AbstractButtonProps & { */ export default class AbstractGrantModeratorButton extends AbstractButton { accessibilityLabel = 'toolbar.accessibilityLabel.grantModerator'; - icon = IconCrown; + icon = IconModerator; label = 'videothumbnail.grantModerator'; /** diff --git a/react/features/video-menu/components/web/GrantModeratorButton.js b/react/features/video-menu/components/web/GrantModeratorButton.js index 3174c34a6..d91b0e0ef 100644 --- a/react/features/video-menu/components/web/GrantModeratorButton.js +++ b/react/features/video-menu/components/web/GrantModeratorButton.js @@ -3,7 +3,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; -import { IconCrown } from '../../../base/icons'; +import { IconModerator } from '../../../base/icons'; import { connect } from '../../../base/redux'; import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractGrantModeratorButton, { @@ -46,7 +46,7 @@ class GrantModeratorButton extends AbstractGrantModeratorButton {