overleaf/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
Rebeka Dekany d37cbf8edb Merge pull request #21515 from overleaf/rd-review-icon
Update review icon in the editor header to use Material Symbols in BS5

GitOrigin-RevId: 14fec744e9bf52b3c37a82164ec3340b4a9a4e3a
2024-11-04 09:05:07 +00:00

42 lines
1.1 KiB
JavaScript

import PropTypes from 'prop-types'
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
function TrackChangesToggleButton({
trackChangesIsOpen,
disabled,
onMouseDown,
}) {
const { t } = useTranslation()
const classes = classNames('btn', 'btn-full-height', {
active: trackChangesIsOpen && !disabled,
disabled,
})
return (
<div className="toolbar-item">
<button
type="button"
disabled={disabled}
className={classes}
onMouseDown={onMouseDown}
>
<BootstrapVersionSwitcher
bs3={<i className="review-icon" />}
bs5={<MaterialIcon type="rate_review" className="align-middle" />}
/>
<p className="toolbar-label">{t('review')}</p>
</button>
</div>
)
}
TrackChangesToggleButton.propTypes = {
trackChangesIsOpen: PropTypes.bool,
disabled: PropTypes.bool,
onMouseDown: PropTypes.func.isRequired,
}
export default TrackChangesToggleButton