diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index b9cb97f168be0ee85037b327ff3428f811cc0e34..7a791e6ab63c9aa40be54343de6d128c9f7a5485 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/src/components/sound-editor/sound-editor.css @@ -171,16 +171,7 @@ $border-radius: 0.25rem; margin-bottom: -0.375rem; } -/* mirror the louder/softer/mute speaker icons when rtl */ -[dir="rtl"] .effect-button:nth-of-type(4) img { - transform: scaleX(-1); -} - -[dir="rtl"] .effect-button:nth-of-type(5) img { - transform: scaleX(-1); -} - -[dir="rtl"] .effect-button:nth-of-type(6) img { +[dir="rtl"] .flip-in-rtl img { transform: scaleX(-1); } diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx index b0e97a1741b33b0bb43d5dd482498c9e95915c24..84f56d08bee4ae4fa3d454ccec9cffa07c1a5374 100644 --- a/src/components/sound-editor/sound-editor.jsx +++ b/src/components/sound-editor/sound-editor.jsx @@ -195,7 +195,7 @@ const SoundEditor = props => ( onClick={props.onPaste} /> <IconButton - className={styles.toolButton} + className={classNames(styles.toolButton, styles.flipInRtl)} img={copyToNewIcon} title={props.intl.formatMessage(messages.copyToNew)} onClick={props.onCopyToNew} @@ -265,19 +265,19 @@ const SoundEditor = props => ( onClick={props.onSlower} /> <IconButton - className={styles.effectButton} + className={classNames(styles.effectButton, styles.flipInRtl)} img={louderIcon} title={<FormattedMessage {...messages.louder} />} onClick={props.onLouder} /> <IconButton - className={styles.effectButton} + className={classNames(styles.effectButton, styles.flipInRtl)} img={softerIcon} title={<FormattedMessage {...messages.softer} />} onClick={props.onSofter} /> <IconButton - className={styles.effectButton} + className={classNames(styles.effectButton, styles.flipInRtl)} img={muteIcon} title={<FormattedMessage {...messages.mute} />} onClick={props.onMute}