From 6fa00a20b07684520d6f7bdc86a209a7814cc4f4 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Wed, 8 Mar 2023 11:11:01 +0100 Subject: [PATCH] Use compound icons (#10292) --- docs/icons.md | 3 ++- res/css/compound/_Icon.pcss | 13 ++++++++++- res/css/views/auth/_AuthBody.pcss | 4 +++- res/img/compound/back-30s-24px.svg | 4 ++++ .../checkbox-32px.svg} | 0 res/img/compound/close-16px.svg | 3 +++ res/img/compound/close-8px.svg | 3 +++ res/img/compound/error-16px.svg | 3 +++ res/img/compound/forward-30s-24px.svg | 4 ++++ res/img/compound/live-16px.svg | 7 ++++++ res/img/compound/live-8px.svg | 7 ++++++ res/img/compound/mic-16px.svg | 4 ++++ res/img/compound/padlock-32px.svg | 3 +++ res/img/compound/pause-12.svg | 4 ++++ res/img/compound/play-16.svg | 3 +++ res/img/compound/record-10px.svg | 3 +++ res/img/compound/retry-16px.svg | 3 +++ res/img/compound/stop-16.svg | 3 +++ res/img/compound/timer-16px.svg | 3 +++ res/img/element-icons/Back30s.svg | 1 - res/img/element-icons/Forward30s.svg | 1 - res/img/element-icons/Timer.svg | 3 --- src/components/structures/ErrorMessage.tsx | 2 +- src/components/structures/UserMenu.tsx | 2 +- .../structures/auth/ForgotPassword.tsx | 4 ++-- .../auth/forgot-password/CheckEmail.tsx | 2 +- .../auth/forgot-password/VerifyEmailModal.tsx | 2 +- .../components/atoms/LiveBadge.tsx | 2 +- .../atoms/VoiceBroadcastControl.tsx | 8 +++---- .../components/atoms/VoiceBroadcastError.tsx | 2 +- .../components/atoms/VoiceBroadcastHeader.tsx | 8 +++---- .../atoms/VoiceBroadcastPlaybackControl.tsx | 14 ++++++------ ...VoiceBroadcastRecordingConnectionError.tsx | 2 +- .../atoms/VoiceBroadcastRoomSubtitle.tsx | 2 +- .../molecules/VoiceBroadcastPlaybackBody.tsx | 4 ++-- .../VoiceBroadcastPreRecordingPip.tsx | 2 +- .../molecules/VoiceBroadcastRecordingPip.tsx | 22 +++++++++++++------ .../VoiceBroadcastSmallPlaybackBody.tsx | 2 +- .../atoms/VoiceBroadcastControl-test.tsx | 5 +++-- ...oiceBroadcastPlaybackControl-test.tsx.snap | 4 ++-- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 8 +++---- .../VoiceBroadcastRecordingPip-test.tsx.snap | 4 ++-- ...ceBroadcastSmallPlaybackBody-test.tsx.snap | 6 ++--- 43 files changed, 132 insertions(+), 57 deletions(-) create mode 100644 res/img/compound/back-30s-24px.svg rename res/img/{element-icons/Checkbox.svg => compound/checkbox-32px.svg} (100%) create mode 100644 res/img/compound/close-16px.svg create mode 100644 res/img/compound/close-8px.svg create mode 100644 res/img/compound/error-16px.svg create mode 100644 res/img/compound/forward-30s-24px.svg create mode 100644 res/img/compound/live-16px.svg create mode 100644 res/img/compound/live-8px.svg create mode 100644 res/img/compound/mic-16px.svg create mode 100644 res/img/compound/padlock-32px.svg create mode 100644 res/img/compound/pause-12.svg create mode 100644 res/img/compound/play-16.svg create mode 100644 res/img/compound/record-10px.svg create mode 100644 res/img/compound/retry-16px.svg create mode 100644 res/img/compound/stop-16.svg create mode 100644 res/img/compound/timer-16px.svg delete mode 100644 res/img/element-icons/Back30s.svg delete mode 100644 res/img/element-icons/Forward30s.svg delete mode 100644 res/img/element-icons/Timer.svg diff --git a/docs/icons.md b/docs/icons.md index acf78d060c..b0582356ce 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -9,7 +9,8 @@ Icons have `role="presentation"` and `aria-hidden` automatically applied. These SVG file recommendations: - Colours should not be defined absolutely. Use `currentColor` instead. -- There should not be a padding in SVG files. It should be added by CSS. +- SVG files should be taken from the design compound as they are. Some icons contain special padding. + This means that there should be icons for each size, e.g. warning-16px and warning-32px. Example usage: diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss index e12006a32e..07f9eb5a0e 100644 --- a/res/css/compound/_Icon.pcss +++ b/res/css/compound/_Icon.pcss @@ -22,7 +22,6 @@ limitations under the License. .mx_Icon { box-sizing: border-box; - padding: 1px; } .mx_Icon_accent { @@ -51,6 +50,18 @@ limitations under the License. width: 8px; } +.mx_Icon_10 { + flex: 0 0 10px; + height: 10px; + width: 10px; +} + +.mx_Icon_12 { + flex: 0 0 12px; + height: 12px; + width: 12px; +} + .mx_Icon_16 { flex: 0 0 16px; height: 16px; diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index f3859dea2f..e1abe24d23 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -65,7 +65,9 @@ limitations under the License. } .mx_AuthBody_lockIcon { - height: 29px; + color: $secondary-content; + height: 32px; + margin-bottom: -3px; // tweak to align all icons on different forgot password steps } .mx_AuthBody_text { diff --git a/res/img/compound/back-30s-24px.svg b/res/img/compound/back-30s-24px.svg new file mode 100644 index 0000000000..c958c40a64 --- /dev/null +++ b/res/img/compound/back-30s-24px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/Checkbox.svg b/res/img/compound/checkbox-32px.svg similarity index 100% rename from res/img/element-icons/Checkbox.svg rename to res/img/compound/checkbox-32px.svg diff --git a/res/img/compound/close-16px.svg b/res/img/compound/close-16px.svg new file mode 100644 index 0000000000..6929ae3f90 --- /dev/null +++ b/res/img/compound/close-16px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/close-8px.svg b/res/img/compound/close-8px.svg new file mode 100644 index 0000000000..a7d7977149 --- /dev/null +++ b/res/img/compound/close-8px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/error-16px.svg b/res/img/compound/error-16px.svg new file mode 100644 index 0000000000..e2e68f431c --- /dev/null +++ b/res/img/compound/error-16px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/forward-30s-24px.svg b/res/img/compound/forward-30s-24px.svg new file mode 100644 index 0000000000..b071aa3ed2 --- /dev/null +++ b/res/img/compound/forward-30s-24px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/compound/live-16px.svg b/res/img/compound/live-16px.svg new file mode 100644 index 0000000000..d7be98c008 --- /dev/null +++ b/res/img/compound/live-16px.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/compound/live-8px.svg b/res/img/compound/live-8px.svg new file mode 100644 index 0000000000..968c61f9e3 --- /dev/null +++ b/res/img/compound/live-8px.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/compound/mic-16px.svg b/res/img/compound/mic-16px.svg new file mode 100644 index 0000000000..bc80ff14ce --- /dev/null +++ b/res/img/compound/mic-16px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/compound/padlock-32px.svg b/res/img/compound/padlock-32px.svg new file mode 100644 index 0000000000..d349bf0a97 --- /dev/null +++ b/res/img/compound/padlock-32px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/pause-12.svg b/res/img/compound/pause-12.svg new file mode 100644 index 0000000000..8e2cc88a5b --- /dev/null +++ b/res/img/compound/pause-12.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/compound/play-16.svg b/res/img/compound/play-16.svg new file mode 100644 index 0000000000..c8ed756429 --- /dev/null +++ b/res/img/compound/play-16.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/record-10px.svg b/res/img/compound/record-10px.svg new file mode 100644 index 0000000000..a16ce774b0 --- /dev/null +++ b/res/img/compound/record-10px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/retry-16px.svg b/res/img/compound/retry-16px.svg new file mode 100644 index 0000000000..443a0d7b85 --- /dev/null +++ b/res/img/compound/retry-16px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/stop-16.svg b/res/img/compound/stop-16.svg new file mode 100644 index 0000000000..439deb0d93 --- /dev/null +++ b/res/img/compound/stop-16.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/compound/timer-16px.svg b/res/img/compound/timer-16px.svg new file mode 100644 index 0000000000..4eb1b0ee49 --- /dev/null +++ b/res/img/compound/timer-16px.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/Back30s.svg b/res/img/element-icons/Back30s.svg deleted file mode 100644 index 6caba0a015..0000000000 --- a/res/img/element-icons/Back30s.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/Forward30s.svg b/res/img/element-icons/Forward30s.svg deleted file mode 100644 index cc96f846e5..0000000000 --- a/res/img/element-icons/Forward30s.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/Timer.svg b/res/img/element-icons/Timer.svg deleted file mode 100644 index 3e1787cf48..0000000000 --- a/res/img/element-icons/Timer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/structures/ErrorMessage.tsx b/src/components/structures/ErrorMessage.tsx index 32abb287dc..0f1d56eb80 100644 --- a/src/components/structures/ErrorMessage.tsx +++ b/src/components/structures/ErrorMessage.tsx @@ -16,7 +16,7 @@ limitations under the License. import React, { ReactNode } from "react"; -import { Icon as WarningBadgeIcon } from "../../../res/img/element-icons/warning-badge.svg"; +import { Icon as WarningBadgeIcon } from "../../../res/img/compound/error-16px.svg"; interface ErrorMessageProps { message: string | ReactNode | null; diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index ec6477aa7a..0ab42bbacf 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -48,7 +48,7 @@ import { UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import UserIdentifierCustomisations from "../../customisations/UserIdentifier"; import PosthogTrackers from "../../PosthogTrackers"; import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload"; -import { Icon as LiveIcon } from "../../../res/img/element-icons/live.svg"; +import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg"; import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast"; import { SDKContext } from "../../contexts/SDKContext"; diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index d7a51956f4..b2a2ff0ef2 100644 --- a/src/components/structures/auth/ForgotPassword.tsx +++ b/src/components/structures/auth/ForgotPassword.tsx @@ -32,13 +32,13 @@ import AuthBody from "../../views/auth/AuthBody"; import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField"; import StyledCheckbox from "../../views/elements/StyledCheckbox"; import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig"; -import { Icon as LockIcon } from "../../../../res/img/element-icons/lock.svg"; +import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg"; +import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg"; import QuestionDialog from "../../views/dialogs/QuestionDialog"; import { EnterEmail } from "./forgot-password/EnterEmail"; import { CheckEmail } from "./forgot-password/CheckEmail"; import Field from "../../views/elements/Field"; import { ErrorMessage } from "../ErrorMessage"; -import { Icon as CheckboxIcon } from "../../../../res/img/element-icons/Checkbox.svg"; import { VerifyEmailModal } from "./forgot-password/VerifyEmailModal"; import Spinner from "../../views/elements/Spinner"; import { formatSeconds } from "../../../DateUtils"; diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx index 2a5abee5a4..be976e4e58 100644 --- a/src/components/structures/auth/forgot-password/CheckEmail.tsx +++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx @@ -18,7 +18,7 @@ import React, { ReactNode } from "react"; import AccessibleButton from "../../../views/elements/AccessibleButton"; import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg"; -import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg"; +import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg"; import { _t } from "../../../../languageHandler"; import Tooltip, { Alignment } from "../../../views/elements/Tooltip"; import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle"; diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx index 72792a1999..127600d244 100644 --- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx +++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx @@ -18,7 +18,7 @@ import React, { ReactNode } from "react"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../../views/elements/AccessibleButton"; -import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg"; +import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg"; import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg"; import Tooltip, { Alignment } from "../../../views/elements/Tooltip"; import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle"; diff --git a/src/voice-broadcast/components/atoms/LiveBadge.tsx b/src/voice-broadcast/components/atoms/LiveBadge.tsx index a5a96f460b..a385cf250f 100644 --- a/src/voice-broadcast/components/atoms/LiveBadge.tsx +++ b/src/voice-broadcast/components/atoms/LiveBadge.tsx @@ -17,7 +17,7 @@ limitations under the License. import classNames from "classnames"; import React from "react"; -import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg"; +import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; import { _t } from "../../../languageHandler"; interface Props { diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx index 684a5ea365..78864ea665 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx @@ -15,25 +15,25 @@ limitations under the License. */ import classNames from "classnames"; -import React from "react"; +import React, { ReactElement } from "react"; import AccessibleButton from "../../../components/views/elements/AccessibleButton"; interface Props { className?: string; - icon: React.FC>; + icon: ReactElement; label: string; onClick: () => void; } -export const VoiceBroadcastControl: React.FC = ({ className = "", icon: Icon, label, onClick }) => { +export const VoiceBroadcastControl: React.FC = ({ className = "", icon, label, onClick }) => { return ( - + {icon} ); }; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx index 8e5a4481cb..9c312ac9e5 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from "react"; -import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg"; +import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; interface Props { message: string; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx index 4ff1a932dc..876af42cc4 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx @@ -16,13 +16,13 @@ import { Room } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { LiveBadge, VoiceBroadcastLiveness } from "../.."; -import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg"; -import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg"; -import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg"; +import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; +import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg"; +import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg"; +import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg"; import { _t } from "../../../languageHandler"; import RoomAvatar from "../../../components/views/avatars/RoomAvatar"; import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton"; -import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg"; import Clock from "../../../components/views/audio_messages/Clock"; import { formatTimeLeft } from "../../../DateUtils"; import Spinner from "../../../components/views/elements/Spinner"; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx index d2c00fcd85..238b50de14 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx @@ -14,10 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactElement } from "react"; -import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg"; -import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg"; +import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg"; +import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg"; import { _t } from "../../../languageHandler"; import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../.."; @@ -27,24 +27,24 @@ interface Props { } export const VoiceBroadcastPlaybackControl: React.FC = ({ onClick, state }) => { - let controlIcon: React.FC>; + let controlIcon: ReactElement; let controlLabel: string; let className = ""; switch (state) { case VoiceBroadcastPlaybackState.Stopped: - controlIcon = PlayIcon; + controlIcon = ; className = "mx_VoiceBroadcastControl-play"; controlLabel = _t("play voice broadcast"); break; case VoiceBroadcastPlaybackState.Paused: - controlIcon = PlayIcon; + controlIcon = ; className = "mx_VoiceBroadcastControl-play"; controlLabel = _t("resume voice broadcast"); break; case VoiceBroadcastPlaybackState.Buffering: case VoiceBroadcastPlaybackState.Playing: - controlIcon = PauseIcon; + controlIcon = ; controlLabel = _t("pause voice broadcast"); break; } diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx index cc8fcc62c6..c411b270d5 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from "react"; -import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg"; +import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; import { _t } from "../../../languageHandler"; export const VoiceBroadcastRecordingConnectionError: React.FC = () => { diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx index c5efbb465b..87ee88e42d 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from "react"; -import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg"; +import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; import { _t } from "../../../languageHandler"; export const VoiceBroadcastRoomSubtitle: React.FC = () => { diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx index a3b94824a9..22c3d60414 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx @@ -25,8 +25,8 @@ import { VoiceBroadcastPlaybackState, } from "../.."; import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback"; -import { Icon as Back30sIcon } from "../../../../res/img/element-icons/Back30s.svg"; -import { Icon as Forward30sIcon } from "../../../../res/img/element-icons/Forward30s.svg"; +import { Icon as Back30sIcon } from "../../../../res/img/compound/back-30s-24px.svg"; +import { Icon as Forward30sIcon } from "../../../../res/img/compound/forward-30s-24px.svg"; import { _t } from "../../../languageHandler"; import Clock from "../../../components/views/audio_messages/Clock"; import SeekBar from "../../../components/views/audio_messages/SeekBar"; diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx index ff3ff675c0..4a58e58246 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx @@ -19,7 +19,7 @@ import React, { useRef, useState } from "react"; import { VoiceBroadcastHeader } from "../.."; import AccessibleButton from "../../../components/views/elements/AccessibleButton"; import { VoiceBroadcastPreRecording } from "../../models/VoiceBroadcastPreRecording"; -import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg"; +import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; import { _t } from "../../../languageHandler"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx index 09b0974e31..ed0e526663 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx @@ -25,10 +25,10 @@ import { } from "../.."; import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording"; import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader"; -import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg"; -import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg"; -import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg"; -import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg"; +import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg"; +import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg"; +import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg"; +import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg"; import { _t } from "../../../languageHandler"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; @@ -75,11 +75,15 @@ export const VoiceBroadcastRecordingPip: React.FC} label={_t("resume voice broadcast")} /> ) : ( - + } + label={_t("pause voice broadcast")} + /> ); const controls = @@ -94,7 +98,11 @@ export const VoiceBroadcastRecordingPip: React.FC - + } + label="Stop Recording" + onClick={stopRecording} + /> ); diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx index b67b95d0b9..921e1eb17f 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx @@ -24,7 +24,7 @@ import { } from "../.."; import AccessibleButton from "../../../components/views/elements/AccessibleButton"; import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback"; -import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg"; +import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg"; interface VoiceBroadcastSmallPlaybackBodyProps { playback: VoiceBroadcastPlayback; diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx index 2870e0634b..734a6b1a2f 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx @@ -19,7 +19,7 @@ import { render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { VoiceBroadcastControl } from "../../../../src/voice-broadcast"; -import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg"; +import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg"; describe("VoiceBroadcastControl", () => { let result: RenderResult; @@ -31,7 +31,8 @@ describe("VoiceBroadcastControl", () => { describe("when rendering it", () => { beforeEach(() => { - result = render(); + const stopIcon = ; + result = render(); }); it("should render as expected", () => { diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap index cf954d38df..109fae39be 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap @@ -9,7 +9,7 @@ exports[` should render state buffering as expe tabindex="0" >
@@ -39,7 +39,7 @@ exports[` should render state playing as expect tabindex="0" >
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 362db88ae7..c7d2d43bd2 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -85,7 +85,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s tabindex="0" >
when rendering a { state: 'playing' tabindex="0" >
when rendering a buffering broadcas tabindex="0" >
when rendering a playing broadcast tabindex="0" >