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

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}
       >
-        <i className="review-icon" />
+        <BootstrapVersionSwitcher
+          bs3={<i className="review-icon" />}
+          bs5={<MaterialIcon type="rate_review" className="align-middle" />}
+        />
         <p className="toolbar-label">{t('review')}</p>
       </button>
     </div>

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);