diff --git a/css/_base.scss b/css/_base.scss index 64bd8125a0..f0d2ae7eb9 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -182,3 +182,8 @@ form { background: rgba(0, 0, 0, .5); border-radius: 4px; } + +/* Necessary for the new icons to work properly. */ +.jitsi-icon svg path { + fill: inherit !important; +} diff --git a/css/_settings-button.scss b/css/_settings-button.scss index a99ab19235..3ef42c57b4 100644 --- a/css/_settings-button.scss +++ b/css/_settings-button.scss @@ -25,7 +25,7 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); border-radius: 3px; cursor: pointer; - padding: 4px; + padding: 1px; position: absolute; right: -4px; top: -3px; diff --git a/react/features/always-on-top/AudioMuteButton.js b/react/features/always-on-top/AudioMuteButton.js index b6f6072bab..71374209bb 100644 --- a/react/features/always-on-top/AudioMuteButton.js +++ b/react/features/always-on-top/AudioMuteButton.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; // We need to reference these files directly to avoid loading things that are not available // in this environment (e.g. JitsiMeetJS or interfaceConfig) -import { IconMicrophoneEmpty, IconMicrophoneEmptySlash } from '../base/icons'; +import { IconMic, IconMicSlash } from '../base/icons'; import type { Props } from '../base/toolbox/components/AbstractButton'; import ToolbarButton from './ToolbarButton'; @@ -31,8 +31,8 @@ type State = { * Stateless "mute/unmute audio" button for the Always-on-Top windows. */ export default class AudioMuteButton extends Component { - icon = IconMicrophoneEmpty; - toggledIcon = IconMicrophoneEmptySlash; + icon = IconMic; + toggledIcon = IconMicSlash; accessibilityLabel = 'Audio mute'; /** diff --git a/react/features/always-on-top/VideoMuteButton.js b/react/features/always-on-top/VideoMuteButton.js index 74834fcaed..b3edb7fdc9 100644 --- a/react/features/always-on-top/VideoMuteButton.js +++ b/react/features/always-on-top/VideoMuteButton.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; // We need to reference these files directly to avoid loading things that are not available // in this environment (e.g. JitsiMeetJS or interfaceConfig) -import { IconCameraEmpty, IconCameraEmptyDisabled } from '../base/icons'; +import { IconVideo, IconVideoOff } from '../base/icons'; import type { Props } from '../base/toolbox/components/AbstractButton'; import ToolbarButton from './ToolbarButton'; @@ -31,8 +31,8 @@ type State = { */ export default class VideoMuteButton extends Component { - icon = IconCameraEmpty; - toggledIcon = IconCameraEmptyDisabled; + icon = IconVideo; + toggledIcon = IconVideoOff; accessibilityLabel = 'Video mute'; /** diff --git a/react/features/base/buttons/CopyButton.web.tsx b/react/features/base/buttons/CopyButton.web.tsx index 72787ef75b..a23137bf47 100644 --- a/react/features/base/buttons/CopyButton.web.tsx +++ b/react/features/base/buttons/CopyButton.web.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme: Theme) => { background: theme.palette.success02 }, - '& > div > svg > path': { + '& > div > svg': { fill: theme.palette.icon01 } }, diff --git a/react/features/base/dialog/components/web/ModalHeader.tsx b/react/features/base/dialog/components/web/ModalHeader.tsx index 8bf0952c81..3817ccb77e 100644 --- a/react/features/base/dialog/components/web/ModalHeader.tsx +++ b/react/features/base/dialog/components/web/ModalHeader.tsx @@ -15,7 +15,7 @@ import React from 'react'; import { WithTranslation } from 'react-i18next'; import { translate } from '../../../i18n/functions'; -import { IconClose } from '../../../icons/svg'; +import { IconCloseLarge } from '../../../icons/svg'; import { withPixelLineHeight } from '../../../styles/functions.web'; import Button from '../../../ui/components/web/Button'; import { BUTTON_TYPES } from '../../../ui/constants'; @@ -159,7 +159,7 @@ class ModalHeader extends React.Component { { !hideCloseIconButton && diff --git a/react/features/polls/components/web/PollsList.js b/react/features/polls/components/web/PollsList.js index 9dbce9d266..19089d8979 100644 --- a/react/features/polls/components/web/PollsList.js +++ b/react/features/polls/components/web/PollsList.js @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { Icon, IconChatUnread } from '../../../base/icons'; +import { Icon, IconMessage } from '../../../base/icons'; import { browser } from '../../../base/lib-jitsi-meet'; import PollItem from './PollItem'; @@ -42,7 +42,7 @@ const PollsList = () => { ?
+ src = { IconMessage } /> {t('polls.results.empty')}
: listPolls.map((id, index) => ( diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx index e88f576395..9c3d7b137f 100644 --- a/react/features/prejoin/components/native/Prejoin.tsx +++ b/react/features/prejoin/components/native/Prejoin.tsx @@ -20,7 +20,7 @@ import { IReduxState } from '../../../app/types'; import { setAudioOnly } from '../../../base/audio-only/actions'; import { getConferenceName } from '../../../base/conference/functions'; import { connect } from '../../../base/connection/actions.native'; -import { IconClose } from '../../../base/icons/svg'; +import { IconCloseLarge } from '../../../base/icons/svg'; // @ts-ignore import JitsiScreen from '../../../base/modal/components/JitsiScreen'; import { getLocalParticipant } from '../../../base/participants/functions'; @@ -103,7 +103,7 @@ const Prejoin: React.FC = ({ navigation }: IPrejoinProps) => { return ( + src = { IconCloseLarge } /> ); }, []); diff --git a/react/features/prejoin/components/web/Prejoin.js b/react/features/prejoin/components/web/Prejoin.js index d9c84f135d..60cd507838 100644 --- a/react/features/prejoin/components/web/Prejoin.js +++ b/react/features/prejoin/components/web/Prejoin.js @@ -6,7 +6,7 @@ import React, { Component } from 'react'; import { Avatar } from '../../../base/avatar'; import { isNameReadOnly } from '../../../base/config'; import { translate } from '../../../base/i18n'; -import { IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../../base/icons'; +import { IconArrowDown, IconArrowUp, IconPhoneRinging, IconVolumeOff } from '../../../base/icons'; import { isVideoMutedByUser } from '../../../base/media'; import { getLocalParticipant } from '../../../base/participants'; import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premeeting'; @@ -314,7 +314,7 @@ class Prejoin extends Component { const byPhone = { key: 'by-phone', dataTestId: 'prejoin.joinByPhone', - icon: IconPhone, + icon: IconPhoneRinging, label: t('prejoin.joinAudioByPhone'), onButtonClick: this._showDialog, onKeyPressed: this._showDialogKeyPress diff --git a/react/features/prejoin/components/web/dialogs/CallingDialog.tsx b/react/features/prejoin/components/web/dialogs/CallingDialog.tsx index 50e92b32fb..84a07264bc 100644 --- a/react/features/prejoin/components/web/dialogs/CallingDialog.tsx +++ b/react/features/prejoin/components/web/dialogs/CallingDialog.tsx @@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui'; import { Avatar } from '../../../../base/avatar'; import { translate } from '../../../../base/i18n/functions'; import Icon from '../../../../base/icons/components/Icon'; -import { IconClose } from '../../../../base/icons/svg'; +import { IconCloseLarge } from '../../../../base/icons/svg'; // @ts-ignore import Label from '../Label'; @@ -78,7 +78,7 @@ function CallingDialog(props: IProps) { onClick = { onClose } role = 'button' size = { 24 } - src = { IconClose } /> + src = { IconCloseLarge } />