diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
index ae917fd408..797327ac7d 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
@@ -1,6 +1,8 @@
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,
@@ -21,7 +23,10 @@ function TrackChangesToggleButton({
className={classes}
onMouseDown={onMouseDown}
>
-
+
{t('review')}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss index 8f73436e0c..25779177cc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss @@ -7,7 +7,6 @@ $rp-yellow: #f3b111; $rp-entry-arrow-width: 6px; :root { - --review-icon: url('../../../../../public/img/ol-icons/review-icon-dark-theme.svg'); --rp-base-font-size: var(--font-size-01); --rp-small-font-size: 0.625rem; // 10px --rp-icon-large-size: var(--font-size-04); @@ -24,19 +23,6 @@ $rp-entry-arrow-width: 6px; --rp-entry-animation-speed: 0.3s; } -@include theme('light') { - --review-icon: url('../../../../../public/img/ol-icons/review-icon-light-theme.svg'); - - button { - &.active, - &:active { - .review-icon { - --review-icon: url('../../../../../public/img/ol-icons/review-icon-dark-theme.svg'); - } - } - } -} - %rp-button { display: inline-flex; align-items: center; @@ -814,19 +800,6 @@ del.rp-content-highlight { font-size: var(--rp-base-font-size); } -.review-icon { - display: inline-block; - background-image: var(--review-icon); - background-repeat: no-repeat; - background-position: top; - background-size: 30px; - width: 30px; - - &::before { - content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. - } -} - .resolved-comments-toggle { background-color: var(--bg-light-secondary); font-size: var(--font-size-02);