Merge pull request #21240 from overleaf/ii-bs5-review-panel-old

[web] BS5 review panel old GitOrigin-RevId: da018b8f2946afb21ab63da0003453e20781f04c
2024-10-24 21:12:38 -04:00 · 2024-10-23 16:21:00 +03:00 · 2024-10-23 16:21:00 +03:00 · 5c3d9117c5
commit 5c3d9117c5
parent 92a23b7e9d
25 changed files with 1594 additions and 430 deletions
--- a/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx
@ -16,6 +16,8 @@ import useScopeEventListener from '@/shared/hooks/use-scope-event-listener'
 import { memo, useCallback } from 'react'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import classnames from 'classnames'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'

 function EditorWidgets() {
  const { t } = useTranslation()
@ -71,10 +73,20 @@ function EditorWidgets() {
          {nChanges > 1 && permissions.write && (
            <>
              <BulkActions.Button onClick={handleShowBulkAcceptDialog}>
-                <Icon type="check" /> {t('accept_all')} ({nChanges})
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="check" />}
+                  bs5={<MaterialIcon type="check" />}
+                />
+                &nbsp;
+                {t('accept_all')} ({nChanges})
              </BulkActions.Button>
              <BulkActions.Button onClick={handleShowBulkRejectDialog}>
-                <Icon type="times" /> {t('reject_all')} ({nChanges})
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="times" />}
+                  bs5={<MaterialIcon type="close" />}
+                />
+                &nbsp;
+                {t('reject_all')} ({nChanges})
              </BulkActions.Button>
            </>
          )}
@ -83,7 +95,12 @@ function EditorWidgets() {
            !isRestrictedTokenMember &&
            currentDocEntries?.['add-comment'] && (
              <AddCommentButton onClick={handleAddNewCommentClick}>
-                <Icon type="comment" /> {t('add_comment')}
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="comment" />}
+                  bs5={<MaterialIcon type="mode_comment" />}
+                />
+                &nbsp;
+                {t('add_comment')}
              </AddCommentButton>
            )}
        </div>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx
@ -11,6 +11,9 @@ import {
  useReviewPanelValueContext,
 } from '../../../context/review-panel/review-panel-context'
 import classnames from 'classnames'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import LoadingSpinner from '@/shared/components/loading-spinner'

 function AddCommentEntry() {
  const { t } = useTranslation()
@ -116,9 +119,7 @@ function AddCommentEntry() {
          <>
            <div className="rp-new-comment">
              {isSubmitting ? (
-                <div className="rp-loading">
-                  <Icon type="spinner" spin />
-                </div>
+                <LoadingSpinner className="d-flex justify-content-center" />
              ) : (
                <AutoExpandingTextArea
                  className="rp-comment-input"
@ -137,19 +138,34 @@ function AddCommentEntry() {
                className="rp-entry-button-cancel"
                onClick={handleCancelNewComment}
              >
-                <Icon type="times" /> {t('cancel')}
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="times" />}
+                  bs5={<MaterialIcon type="close" />}
+                />
+                &nbsp;
+                {t('cancel')}
              </EntryActions.Button>
              <EntryActions.Button
                onClick={handleSubmitNewComment}
                disabled={isSubmitting || !content.length}
              >
-                <Icon type="comment" /> {t('comment')}
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="comment" />}
+                  bs5={<MaterialIcon type="mode_comment" />}
+                />
+                &nbsp;
+                {t('comment')}
              </EntryActions.Button>
            </EntryActions>
          </>
        ) : (
          <AddCommentButton onClick={handleStartNewComment}>
-            <Icon type="comment" /> {t('add_comment')}
+            <BootstrapVersionSwitcher
+              bs3={<Icon type="comment" />}
+              bs5={<MaterialIcon type="mode_comment" />}
+            />
+            &nbsp;
+            {t('add_comment')}
          </AddCommentButton>
        )}
      </div>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
@ -12,6 +12,8 @@ import { BaseChangeEntryProps } from '../types/base-change-entry-props'
 import useIndicatorHover from '../hooks/use-indicator-hover'
 import EntryIndicator from './entry-indicator'
 import { useEntryClick } from '@/features/source-editor/components/review-panel/hooks/use-entry-click'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'

 interface AggregateChangeEntryProps extends BaseChangeEntryProps {
  replacedContent: string
@ -80,7 +82,10 @@ function AggregateChangeEntry({
        onMouseEnter={handleIndicatorMouseEnter}
        onClick={handleIndicatorClick}
      >
-        <Icon type="pencil" />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="pencil" />}
+          bs5={<MaterialIcon type="edit" />}
+        />
      </EntryIndicator>
      <div
        className={classnames('rp-entry', 'rp-entry-aggregate', {
@ -89,7 +94,10 @@ function AggregateChangeEntry({
      >
        <div className="rp-entry-body">
          <div className="rp-entry-action-icon">
-            <Icon type="pencil" />
+            <BootstrapVersionSwitcher
+              bs3={<Icon type="pencil" />}
+              bs5={<MaterialIcon type="edit" />}
+            />
          </div>
          <div className="rp-entry-details">
            <div className="rp-entry-description">
@ -97,7 +105,7 @@ function AggregateChangeEntry({
              <del className="rp-content-highlight">{deletionContent}</del>
              {deletionNeedsCollapsing && (
                <button
-                  className="rp-collapse-toggle btn-inline-link"
+                  className="rp-collapse-toggle"
                  onClick={handleDeletionToggleCollapse}
                >
                  {isDeletionCollapsed
@ -109,7 +117,7 @@ function AggregateChangeEntry({
              <ins className="rp-content-highlight">{insertionContent}</ins>
              {insertionNeedsCollapsing && (
                <button
-                  className="rp-collapse-toggle btn-inline-link"
+                  className="rp-collapse-toggle"
                  onClick={handleInsertionToggleCollapse}
                >
                  {isInsertionCollapsed
@ -139,10 +147,18 @@ function AggregateChangeEntry({
        {permissions.write && (
          <EntryActions>
            <EntryActions.Button onClick={() => rejectChanges(entryIds)}>
-              <Icon type="times" /> {t('reject')}
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="times" />}
+                bs5={<MaterialIcon type="close" />}
+              />
+              &nbsp;{t('reject')}
            </EntryActions.Button>
            <EntryActions.Button onClick={() => acceptChanges(entryIds)}>
-              <Icon type="check" /> {t('accept')}
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="check" />}
+                bs5={<MaterialIcon type="check" />}
+              />
+              &nbsp;{t('accept')}
            </EntryActions.Button>
          </EntryActions>
        )}
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/bulk-actions-entry/bulk-actions-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/bulk-actions-entry/bulk-actions-entry.tsx
@ -5,6 +5,8 @@ import Icon from '../../../../../../shared/components/icon'
 import BulkActions from './bulk-actions'
 import Modal, { useBulkActionsModal } from './modal'
 import { ReviewPanelBulkActionsEntry } from '../../../../../../../../types/review-panel/entry'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 type BulkActionsEntryProps = {
  entryId: ReviewPanelBulkActionsEntry['type']
@ -30,10 +32,18 @@ function BulkActionsEntry({ entryId, nChanges }: BulkActionsEntryProps) {
            <EntryCallout className="rp-entry-callout-bulk-actions" />
            <BulkActions className="rp-entry">
              <BulkActions.Button onClick={handleShowBulkRejectDialog}>
-                <Icon type="times" /> {t('reject_all')} ({nChanges})
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="times" />}
+                  bs5={<MaterialIcon type="close" />}
+                />
+                &nbsp;{t('reject_all')} ({nChanges})
              </BulkActions.Button>
              <BulkActions.Button onClick={handleShowBulkAcceptDialog}>
-                <Icon type="check" /> {t('accept_all')} ({nChanges})
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="check" />}
+                  bs5={<MaterialIcon type="check" />}
+                />
+                &nbsp;{t('accept_all')} ({nChanges})
              </BulkActions.Button>
            </BulkActions>
          </>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/bulk-actions-entry/modal.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/bulk-actions-entry/modal.tsx
@ -1,8 +1,13 @@
 import { useState, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button, Modal as BootstrapModal } from 'react-bootstrap'
-import AccessibleModal from '../../../../../../shared/components/accessible-modal'
 import { useReviewPanelUpdaterFnsContext } from '../../../../context/review-panel/review-panel-context'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'

 type BulkActionsModalProps = {
  show: boolean
@ -22,30 +27,28 @@ function Modal({
  const { t } = useTranslation()

  return (
-    <AccessibleModal show={show} onHide={() => setShow(false)}>
-      <BootstrapModal.Header closeButton>
-        <h3>{isAccept ? t('accept_all') : t('reject_all')}</h3>
-      </BootstrapModal.Header>
-      <BootstrapModal.Body>
+    <OLModal show={show} onHide={() => setShow(false)}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>
+          {isAccept ? t('accept_all') : t('reject_all')}
+        </OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
        <p>
          {isAccept
            ? t('bulk_accept_confirm', { nChanges })
            : t('bulk_reject_confirm', { nChanges })}
        </p>
-      </BootstrapModal.Body>
-      <BootstrapModal.Footer>
-        <Button
-          bsStyle={null}
-          className="btn-secondary"
-          onClick={() => setShow(false)}
-        >
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={() => setShow(false)}>
          {t('cancel')}
-        </Button>
-        <Button bsStyle={null} className="btn-primary" onClick={onConfirm}>
+        </OLButton>
+        <OLButton variant="primary" onClick={onConfirm}>
          {t('ok')}
-        </Button>
-      </BootstrapModal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
  )
 }

--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
@ -13,6 +13,8 @@ import comparePropsWithShallowArrayCompare from '../utils/compare-props-with-sha
 import useIndicatorHover from '../hooks/use-indicator-hover'
 import EntryIndicator from './entry-indicator'
 import { useEntryClick } from '@/features/source-editor/components/review-panel/hooks/use-entry-click'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 interface ChangeEntryProps extends BaseChangeEntryProps {
  type: ReviewPanelChangeEntry['type']
@ -71,7 +73,14 @@ function ChangeEntry({
        onMouseEnter={handleIndicatorMouseEnter}
        onClick={handleIndicatorClick}
      >
-        {isInsert ? <Icon type="pencil" /> : <i className="rp-icon-delete" />}
+        {isInsert ? (
+          <BootstrapVersionSwitcher
+            bs3={<Icon type="pencil" />}
+            bs5={<MaterialIcon type="edit" />}
+          />
+        ) : (
+          <i className="rp-icon-delete" />
+        )}
      </EntryIndicator>
      <div
        className={classnames('rp-entry', `rp-entry-${type}`, {
@ -81,7 +90,10 @@ function ChangeEntry({
        <div className="rp-entry-body">
          <div className="rp-entry-action-icon">
            {isInsert ? (
-              <Icon type="pencil" />
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="pencil" />}
+                bs5={<MaterialIcon type="edit" />}
+              />
            ) : (
              <i className="rp-icon-delete" />
            )}
@ -106,7 +118,7 @@ function ChangeEntry({
                )}
                {needsCollapsing && (
                  <button
-                    className="rp-collapse-toggle btn-inline-link"
+                    className="rp-collapse-toggle"
                    onClick={handleToggleCollapse}
                  >
                    {isCollapsed
@ -137,10 +149,18 @@ function ChangeEntry({
        {permissions.write && (
          <EntryActions>
            <EntryActions.Button onClick={() => rejectChanges(entryIds)}>
-              <Icon type="times" /> {t('reject')}
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="times" />}
+                bs5={<MaterialIcon type="close" />}
+              />
+              &nbsp;{t('reject')}
            </EntryActions.Button>
            <EntryActions.Button onClick={() => acceptChanges(entryIds)}>
-              <Icon type="check" /> {t('accept')}
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="check" />}
+                bs5={<MaterialIcon type="check" />}
+              />
+              &nbsp;{t('accept')}
            </EntryActions.Button>
          </EntryActions>
        )}
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx
@ -16,6 +16,9 @@ import { ReviewPanelCommentEntry } from '../../../../../../../types/review-panel
 import useIndicatorHover from '../hooks/use-indicator-hover'
 import EntryIndicator from './entry-indicator'
 import { useEntryClick } from '@/features/source-editor/components/review-panel/hooks/use-entry-click'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import LoadingSpinner from '@/shared/components/loading-spinner'

 type CommentEntryProps = {
  docId: DocId
@ -120,7 +123,10 @@ function CommentEntry({
          onMouseEnter={handleIndicatorMouseEnter}
          onClick={handleIndicatorClick}
        >
-          <Icon type="comment" />
+          <BootstrapVersionSwitcher
+            bs3={<Icon type="comment" />}
+            bs5={<MaterialIcon type="mode_comment" />}
+          />
        </EntryIndicator>
        <div
          className={classnames('rp-entry', 'rp-entry-comment', {
@ -130,7 +136,7 @@ function CommentEntry({
          ref={entryDivRef}
        >
          {!submitting && (!thread || thread.messages.length === 0) && (
-            <div className="rp-loading">{t('no_comments')}</div>
+            <div className="text-center p-1">{t('no_comments')}</div>
          )}
          <div className="rp-comment-loaded">
            {thread.messages.map(comment => (
@ -143,9 +149,7 @@ function CommentEntry({
            ))}
          </div>
          {submitting && (
-            <div className="rp-loading">
-              <Icon type="spinner" spin />
-            </div>
+            <LoadingSpinner className="d-flex justify-content-center" />
          )}
          {permissions.comment && (
            <div className="rp-comment-reply">
@ -163,7 +167,11 @@ function CommentEntry({
          <EntryActions>
            {permissions.comment && permissions.write && (
              <EntryActions.Button onClick={handleAnimateAndCallOnResolve}>
-                <Icon type="inbox" /> {t('resolve')}
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="inbox" />}
+                  bs5={<MaterialIcon type="inbox" />}
+                />
+                &nbsp;{t('resolve')}
              </EntryActions.Button>
            )}
            {permissions.comment && (
@ -171,7 +179,11 @@ function CommentEntry({
                onClick={handleOnReply}
                disabled={!replyContent.length}
              >
-                <Icon type="reply" /> {t('reply')}
+                <BootstrapVersionSwitcher
+                  bs3={<Icon type="reply" />}
+                  bs5={<MaterialIcon type="reply" />}
+                />
+                &nbsp;{t('reply')}
              </EntryActions.Button>
            )}
          </EntryActions>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/resolved-comment-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/resolved-comment-entry.tsx
@ -61,7 +61,7 @@ function ResolvedCommentEntry({
            <>
              &nbsp;
              <button
-                className="rp-collapse-toggle btn-inline-link"
+                className="rp-collapse-toggle"
                onClick={() => setIsCollapsed(value => !value)}
              >
                {isCollapsed ? `… (${t('show_all')})` : ` (${t('show_less')})`}
--- a/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
@ -8,6 +8,8 @@ import {
 import { isCurrentFileView, isOverviewView } from '../../utils/sub-view'
 import { useCallback } from 'react'
 import { useResizeObserver } from '../../../../shared/hooks/use-resize-observer'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 function Nav() {
  const { t } = useTranslation()
@ -40,7 +42,10 @@ function Nav() {
        })}
        onClick={() => handleSetSubview('cur_file')}
      >
-        <Icon type="file-text-o" />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="file-text-o" />}
+          bs5={<MaterialIcon type="description" className="align-middle" />}
+        />
        <span className="rp-nav-label">{t('current_file')}</span>
      </button>
      <button
@ -55,7 +60,10 @@ function Nav() {
        })}
        onClick={() => handleSetSubview('overview')}
      >
-        <Icon type="list" />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="list" />}
+          bs5={<MaterialIcon type="list" className="align-middle" />}
+        />
        <span className="rp-nav-label">{t('overview')}</span>
      </button>
    </div>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx
@ -2,11 +2,11 @@ import Container from './container'
 import Toggler from './toggler'
 import Toolbar from './toolbar/toolbar'
 import Nav from './nav'
-import Icon from '../../../../shared/components/icon'
 import OverviewFile from './overview-file'
 import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { memo } from 'react'
+import LoadingSpinner from '@/shared/components/loading-spinner'

 function OverviewContainer() {
  const { isOverviewLoading } = useReviewPanelValueContext()
@ -24,9 +24,7 @@ function OverviewContainer() {
        aria-labelledby="review-panel-tab-overview"
      >
        {isOverviewLoading ? (
-          <div className="rp-loading">
-            <Icon type="spinner" spin />
-          </div>
+          <LoadingSpinner className="d-flex justify-content-center my-2" />
        ) : (
          docs?.map(doc => (
            <OverviewFile
--- a/services/web/frontend/js/features/source-editor/components/review-panel/overview-file.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/overview-file.tsx
@ -8,6 +8,8 @@ import classnames from 'classnames'
 import { ReviewPanelDocEntries } from '../../../../../../types/review-panel/review-panel'
 import { MainDocument } from '../../../../../../types/project-settings'
 import OverviewFileEntries from '@/features/source-editor/components/review-panel/entries/overview-file-entries'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 type OverviewFileProps = {
  docId: MainDocument['doc']['id']
@ -45,7 +47,10 @@ function OverviewFile({ docId, docPath }: OverviewFileProps) {
              'rp-overview-file-header-collapse-on': docCollapsed,
            })}
          >
-            <Icon type="angle-down" />
+            <BootstrapVersionSwitcher
+              bs3={<Icon type="angle-down" />}
+              bs5={<MaterialIcon type="expand_more" />}
+            />
          </span>
          {docPath}
          {docCollapsed && (
--- a/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx
@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef, useCallback } from 'react'
 import { useLayoutContext } from '../../../../shared/context/layout-context'
 import {
  ReviewPanelEntry,
@ -6,7 +6,6 @@ import {
 } from '../../../../../../types/review-panel/entry'
 import { debugConsole } from '../../../../utils/debugging'
 import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
-import useEventListener from '../../../../shared/hooks/use-event-listener'
 import { ReviewPanelDocEntries } from '../../../../../../types/review-panel/review-panel'
 import { dispatchReviewPanelLayout } from '../../extensions/changes/change-manager'
 import { isEqual } from 'lodash'
@ -214,7 +213,8 @@ function PositionedEntries({
    previousLayoutInfoRef.current = initialLayoutInfo
  }

-  const layout = (animate = true) => {
+  const layout = useCallback(
+    (animate = true) => {
      const container = containerRef.current
      if (!container) {
        return
@ -252,7 +252,8 @@ function PositionedEntries({
        const layoutElement = reviewPanelOpen ? box : indicator

        if (box && callout && layoutElement) {
-        const previousPositions = previousLayoutInfoRef.current?.positions.find(
+          const previousPositions =
+            previousLayoutInfoRef.current?.positions.find(
              pos => pos.entryId === entryId
            )?.positions
          const hasScreenPos = Boolean(entry.screenPos)
@ -452,17 +453,29 @@ function PositionedEntries({
        height,
        overflowTop,
      }
-  }
+    },
+    [entries, lineHeight, navHeight, reviewPanelOpen, toolbarHeight]
+  )
+
+  useLayoutEffect(() => {
+    const callback = (event: Event) => {
+      const e = event as CustomEvent

-  useEventListener('review-panel:layout', (event: CustomEvent) => {
      if (!layoutSuspended) {
        // Clear previous positions if forcing a layout
-      if (event.detail.force) {
+        if (e.detail.force) {
          previousLayoutInfoRef.current = initialLayoutInfo
        }
-      layout(event.detail.animate)
+        layout(e.detail.animate)
      }
-  })
+    }
+
+    window.addEventListener('review-panel:layout', callback)
+
+    return () => {
+      window.removeEventListener('review-panel:layout', callback)
+    }
+  }, [layoutSuspended, layout])

  // Layout on first render. This is necessary to ensure layout happens when
  // switching from overview to current file view
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toggler.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toggler.tsx
@ -1,5 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { useReviewPanelUpdaterFnsContext } from '../../context/review-panel/review-panel-context'
+import Icon from '@/shared/components/icon'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 function Toggler() {
  const { t } = useTranslation()
@ -18,6 +21,12 @@ function Toggler() {
      onClick={handleTogglerClick}
    >
      <span className="sr-only">{t('hotkey_toggle_review_panel')}</span>
+      <span className="review-panel-toggler-icon">
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="chevron-left" />}
+          bs5={<MaterialIcon type="chevron_left" />}
+        />
+      </span>
    </button>
  )
 }
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/resolved-comments-dropdown.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/resolved-comments-dropdown.tsx
@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useState, useMemo, useCallback } from 'react'
 import Icon from '../../../../../shared/components/icon'
-import Tooltip from '../../../../../shared/components/tooltip'
 import ResolvedCommentsScroller from './resolved-comments-scroller'
 import classnames from 'classnames'
 import {
@ -16,6 +15,10 @@ import { ReviewPanelResolvedCommentThread } from '../../../../../../../types/rev
 import { DocId } from '../../../../../../../types/project-settings'
 import { ReviewPanelEntry } from '../../../../../../../types/review-panel/entry'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
+import LoadingSpinner from '@/shared/components/loading-spinner'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 export interface FilteredResolvedComments
  extends ReviewPanelResolvedCommentThread {
@ -97,7 +100,7 @@ function ResolvedCommentsDropdown() {
        onClick={() => setIsOpen(false)}
      />

-      <Tooltip
+      <OLTooltip
        id="resolved-comments-toggle"
        description={t('resolved_comments')}
        overlayProps={{ container: document.body, placement: 'bottom' }}
@ -107,9 +110,12 @@ function ResolvedCommentsDropdown() {
          onClick={handleResolvedCommentsClick}
          aria-label={t('resolved_comments')}
        >
-          <Icon type="inbox" />
+          <BootstrapVersionSwitcher
+            bs3={<Icon type="inbox" />}
+            bs5={<MaterialIcon type="inbox" />}
+          />
        </button>
-      </Tooltip>
+      </OLTooltip>

      <div
        className={classnames('resolved-comments-dropdown', {
@ -117,9 +123,7 @@ function ResolvedCommentsDropdown() {
        })}
      >
        {isLoading ? (
-          <div className="rp-loading">
-            <Icon type="spinner" spin />
-          </div>
+          <LoadingSpinner className="d-flex justify-content-center my-2" />
        ) : isOpen ? (
          <ResolvedCommentsScroller
            resolvedComments={filteredResolvedComments}
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/resolved-comments-scroller.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/resolved-comments-scroller.tsx
@ -31,7 +31,7 @@ function ResolvedCommentsScroller({
        />
      ))}
      {!resolvedComments.length && (
-        <div className="rp-loading">{t('no_resolved_threads')}</div>
+        <div className="text-center p-1">{t('no_resolved_threads')}</div>
      )}
    </div>
  )
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toggle-menu.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toggle-menu.tsx
@ -10,6 +10,8 @@ import {
 } from '../../../context/review-panel/review-panel-context'
 import { send, sendMB } from '../../../../../infrastructure/event-tracking'
 import classnames from 'classnames'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'

 const sendAnalytics = () => {
  send('subscription-funnel', 'editor-click-feature', 'real-time-track-changes')
@ -39,7 +41,7 @@ function ToggleMenu() {
      <span className="review-panel-toolbar-label">
        {wantTrackChanges && (
          <span className="review-panel-toolbar-icon-on">
-            <Icon type="circle" />
+            <span className="track-changes-indicator-circle" />
          </span>
        )}

@ -47,13 +49,18 @@ function ToggleMenu() {
          className="review-panel-toolbar-collapse-button"
          onClick={handleToggleFullTCStateCollapse}
        >
+          <span>
            {wantTrackChanges ? <TrackChangesOn /> : <TrackChangesOff />}
+          </span>
          <span
            className={classnames('rp-tc-state-collapse', {
              'rp-tc-state-collapse-on': shouldCollapse,
            })}
          >
-            <Icon type="angle-down" />
+            <BootstrapVersionSwitcher
+              bs3={<Icon type="angle-down" />}
+              bs5={<MaterialIcon type="expand_more" />}
+            />
          </span>
        </button>
      </span>
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-menu.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-menu.tsx
@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@/shared/components/tooltip'
 import TrackChangesToggle from '@/features/source-editor/components/review-panel/toolbar/track-changes-toggle'
 import {
  useReviewPanelUpdaterFnsContext,
@ -7,6 +6,7 @@ import {
 } from '@/features/source-editor/context/review-panel/review-panel-context'
 import { useProjectContext } from '@/shared/context/project-context'
 import classnames from 'classnames'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'

 function TrackChangesMenu() {
  const { t } = useTranslation()
@ -28,7 +28,7 @@ function TrackChangesMenu() {
  return (
    <ul className="rp-tc-state" data-testid="review-panel-track-changes-menu">
      <li className="rp-tc-state-item rp-tc-state-item-everyone">
-        <Tooltip
+        <OLTooltip
          description={t('tc_switch_everyone_tip')}
          id="track-changes-switch-everyone"
          overlayProps={{
@ -38,7 +38,7 @@ function TrackChangesMenu() {
          }}
        >
          <span className="rp-tc-state-item-name">{t('tc_everyone')}</span>
-        </Tooltip>
+        </OLTooltip>

        <TrackChangesToggle
          id="track-changes-everyone"
@ -52,7 +52,7 @@ function TrackChangesMenu() {
      </li>
      {Object.values(formattedProjectMembers).map(member => (
        <li className="rp-tc-state-item" key={member.id}>
-          <Tooltip
+          <OLTooltip
            description={t('tc_switch_user_tip')}
            id="track-changes-switch-user"
            overlayProps={{
@ -68,7 +68,7 @@ function TrackChangesMenu() {
            >
              {member.name}
            </span>
-          </Tooltip>
+          </OLTooltip>

          <TrackChangesToggle
            id={`track-changes-user-toggle-${member.id}`}
@ -90,7 +90,7 @@ function TrackChangesMenu() {
      ))}
      <li className="rp-tc-state-separator" />
      <li className="rp-tc-state-item">
-        <Tooltip
+        <OLTooltip
          description={t('tc_switch_guests_tip')}
          id="track-changes-switch-guests"
          overlayProps={{
@ -106,7 +106,7 @@ function TrackChangesMenu() {
          >
            {t('tc_guests')}
          </span>
-        </Tooltip>
+        </OLTooltip>

        <TrackChangesToggle
          id="track-changes-guests-toggle"
--- a/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx
@ -1,12 +1,21 @@
 import { useTranslation } from 'react-i18next'
-import { Row, Col, Button, Modal } from 'react-bootstrap'
-import AccessibleModal from '../../../../shared/components/accessible-modal'
 import Icon from '../../../../shared/components/icon'
 import { useProjectContext } from '../../../../shared/context/project-context'
 import { useUserContext } from '../../../../shared/context/user-context'
 import { startFreeTrial, upgradePlan } from '../../../../main/account-upgrade'
 import { memo } from 'react'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'

 type UpgradeTrackChangesModalProps = {
  show: boolean
@ -24,11 +33,11 @@ function UpgradeTrackChangesModal({
  const hasNewPaywallCta = useFeatureFlag('paywall-cta')

  return (
-    <AccessibleModal show={show} onHide={() => setShow(false)}>
-      <Modal.Header closeButton>
-        <h3>{t('upgrade_to_track_changes')}</h3>
-      </Modal.Header>
-      <Modal.Body>
+    <OLModal show={show} onHide={() => setShow(false)}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('upgrade_to_track_changes')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
        <div className="teaser-video-container">
          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
          <video className="teaser-video" autoPlay loop>
@ -45,8 +54,8 @@ function UpgradeTrackChangesModal({
        <h4 className="teaser-title">
          {t('see_changes_in_your_documents_live')}
        </h4>
-        <Row>
-          <Col md={10} mdOffset={1}>
+        <OLRow>
+          <OLCol lg={{ span: 10, offset: 1 }}>
            <ul className="list-unstyled">
              {[
                t('track_any_change_in_real_time'),
@ -54,36 +63,43 @@ function UpgradeTrackChangesModal({
                t('accept_or_reject_each_changes_individually'),
              ].map(translation => (
                <li key={translation}>
-                  <Icon type="check" /> {translation}
+                  <BootstrapVersionSwitcher
+                    bs3={<Icon type="check" />}
+                    bs5={
+                      <MaterialIcon
+                        type="check"
+                        className="align-text-bottom"
+                      />
+                    }
+                  />
+                  &nbsp;{translation}
                </li>
              ))}
            </ul>
-          </Col>
-        </Row>
+          </OLCol>
+        </OLRow>
        <p className="small">
          {t('already_subscribed_try_refreshing_the_page')}
        </p>
        {project.owner && (
-          <Row className="text-center">
+          <div className="text-center">
            {project.owner._id === user.id ? (
              user.allowedFreeTrial ? (
-                <Button
-                  bsStyle={null}
-                  className="btn-primary"
+                <OLButton
+                  variant="primary"
                  onClick={() => startFreeTrial('track-changes')}
                >
                  {hasNewPaywallCta
                    ? t('get_track_changes')
                    : t('try_it_for_free')}
-                </Button>
+                </OLButton>
              ) : (
-                <Button
-                  bsStyle={null}
-                  className="btn-primary"
+                <OLButton
+                  variant="primary"
                  onClick={() => upgradePlan('project-sharing')}
                >
                  {t('upgrade')}
-                </Button>
+                </OLButton>
              )
            ) : (
              <p>
@ -94,19 +110,15 @@ function UpgradeTrackChangesModal({
                </strong>
              </p>
            )}
-          </Row>
+          </div>
        )}
-      </Modal.Body>
-      <Modal.Footer>
-        <Button
-          bsStyle={null}
-          className="btn-secondary"
-          onClick={() => setShow(false)}
-        >
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={() => setShow(false)}>
          {t('close')}
-        </Button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
  )
 }

--- a/services/web/frontend/js/shared/components/loading-spinner.tsx
+++ b/services/web/frontend/js/shared/components/loading-spinner.tsx
@ -39,10 +39,7 @@ function LoadingSpinner({
  }

  const extraClasses = isBootstrap5()
-    ? [
-        'd-inline-flex',
-        align === 'left' ? 'align-items-start' : 'align-items-center',
-      ]
+    ? [align === 'left' ? 'align-items-start' : 'align-items-center']
    : null

  return (
--- a/services/web/frontend/stylesheets/app/editor/review-panel.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel.less
@ -9,10 +9,8 @@
@rp-border-grey: #d9d9d9;

@rp-green: #2c8e30;
-@rp-green-on-dark: rgba(37, 107, 41, 0.5);
@rp-red: #c5060b;
@rp-yellow: #f3b111;
-@rp-yellow-on-dark: rgba(194, 93, 11, 0.5);
@rp-grey: #aaaaaa;

@rp-type-blue: #6b7797;
@ -24,8 +22,6 @@
@review-panel-width: 230px;
@review-off-width: 22px;

-@rp-toolbar-height: 32px;
-
@rp-entry-animation-speed: 0.3s;

 .rp-button() {
@ -64,12 +60,6 @@
  }
 }

-.loading-panel {
-  .rp-size-expanded & {
-    right: @review-panel-width;
-  }
-}
-
 .review-panel-toolbar {
  display: none;

@ -105,10 +95,6 @@
  margin-right: 5px;
 }

-.review-panel-toolbar-spinner {
-  margin-left: 5px;
-}
-
 .rp-tc-state {
  position: absolute;
  top: 100%;
@ -173,10 +159,6 @@
  }
 }

-.rp-entry-list-inner {
-  position: relative;
-}
-
 .rp-entry-indicator {
  display: none;
  z-index: 2; // above .review-panel-toggler
@ -752,11 +734,6 @@
  }
 }

-.rp-loading {
-  text-align: center;
-  padding: 5px;
-}
-
 .rp-nav {
  display: none;
  flex-shrink: 0;
@ -806,18 +783,6 @@
  font-size: @rp-base-font-size;
 }

-#editor {
-  .rp-size-mini & {
-    right: @review-off-width;
-  }
-
-  .rp-size-expanded & {
-    right: @review-panel-width;
-    left: 0px;
-    width: auto;
-  }
-}
-
 .review-icon {
  display: inline-block;
  background: url('../../../../public/img/ol-icons/review-icon-dark-theme.svg')
@ -919,6 +884,7 @@ button when (@is-overleaf-light = true) {
 }

 .rp-collapse-toggle {
+  .btn-inline-link;
  color: @rp-type-blue;
  font-weight: @rp-semibold-weight;

@ -979,8 +945,8 @@ button when (@is-overleaf-light = true) {
  }

  .rp-size-expanded & {
-    &::after {
-      content: '\f105';
+    .review-panel-toggler-icon .fa {
+      transform: scale(0.7) rotate(180deg);
    }
  }

@ -990,20 +956,16 @@ button when (@is-overleaf-light = true) {
    background-color: #fff;
  }

-  &::after {
-    content: '\f104';
-    font-family: FontAwesome;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 16px;
-    display: block;
+  .review-panel-toggler-icon {
    position: sticky;
    top: 50%;
    bottom: 50%;
    width: 100%;
-    text-align: center;
-    margin-top: -0.5em;
+
+    .fa {
+      font-size: 14px;
+      transform: scale(0.7);
+    }
  }
 }

@ -1134,40 +1096,10 @@ button when (@is-overleaf-light = true) {
  }
 }

-.review-panel-indicator {
-  display: none;
-}
-
-.review-panel-mini {
-  width: 22px !important;
-  overflow: visible !important;
-
-  .rp-entry {
-    height: 12px;
-  }
-
-  .rp-entry-indicator {
-    position: absolute;
-    left: -6px;
-    right: 0;
-    display: flex;
-    width: 20px;
-    height: 20px;
-  }
-
-  .rp-entry-content {
-    display: none;
-    background: white;
-    border: 1px solid @rp-border-grey;
-    width: 200px;
-  }
-
-  .rp-entry:hover {
-    .rp-entry-content {
-      display: initial;
-      position: absolute;
-      left: -206px;
-      top: 0;
-    }
-  }
+.track-changes-indicator-circle {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background-color: @ol-green;
 }
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
@ -143,3 +143,33 @@
  --link-hover-color: var(--link-hover-color-dark);
  --link-visited-color: var(--link-visited-color-dark);
 }
+
+@mixin triangle($direction, $width, $height, $color) {
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+  width: 0;
+  height: 0;
+
+  @if $direction == top {
+    border-width: 0 calc(#{$width} / 2) #{$height} calc(#{$width} / 2);
+    border-bottom-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == bottom {
+    border-width: #{$height} calc(#{$width} / 2) 0 calc(#{$width} / 2);
+    border-top-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == right {
+    border-width: calc(#{$height} / 2) 0 calc(#{$height} / 2) #{$width};
+    border-left-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  } @else if $direction == left {
+    border-width: calc(#{$height} / 2) #{$width} calc(#{$height} / 2) 0;
+    border-right-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/loading-spinner.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/loading-spinner.scss
@ -1,4 +1,6 @@
 .loading {
+  display: inline-flex;
+
  .spinner-border-sm,
  .spinner-border {
    // Ensure the thickness of the spinner is independent of the font size of its container
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@ -294,8 +294,8 @@ $editor-toggler-bg-dark-color: color.adjust(
 }

 .teaser-video-container {
-  margin: calc(var(--spacing-07) * -1) calc(var(--spacing-07) * -1)
-    var(--spacing-02) calc(var(--spacing-07) * -1);
+  margin: calc(var(--bs-modal-padding) * -1) calc(var(--bs-modal-padding) * -1)
+    var(--spacing-02) calc(var(--bs-modal-padding) * -1);
  overflow: hidden;
 }

--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss
--- a/services/web/frontend/stylesheets/core/utilities.less
+++ b/services/web/frontend/stylesheets/core/utilities.less
@ -84,3 +84,11 @@
  position: absolute;
  z-index: 1;
 }
+
+.d-flex {
+  display: flex !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}