github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21515 from overleaf/rd-review-icon

Browse source 
Update review icon in the editor header to use Material Symbols in BS5

GitOrigin-RevId: 14fec744e9bf52b3c37a82164ec3340b4a9a4e3a
This commit is contained in:
Rebeka Dekany 2024-11-01 14:36:09 +01:00 committed by Copybot
parent e2d63a778b
commit d37cbf8edb
2 changed files with 6 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx
View file

@ -1,6 +1,8 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classNames from 'classnames' import classNames from 'classnames'
import { useTranslation } from 'react-i18next' 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({ function TrackChangesToggleButton({
trackChangesIsOpen, trackChangesIsOpen,
@ -21,7 +23,10 @@ function TrackChangesToggleButton({
className={classes} className={classes}
onMouseDown={onMouseDown} 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> <p className="toolbar-label">{t('review')}</p>
</button> </button>
</div> </div>

27
services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel.scss
View file

@ -7,7 +7,6 @@ $rp-yellow: #f3b111;
$rp-entry-arrow-width: 6px; $rp-entry-arrow-width: 6px;
:root { :root {
--review-icon: url('../../../../../public/img/ol-icons/review-icon-dark-theme.svg');
--rp-base-font-size: var(--font-size-01); --rp-base-font-size: var(--font-size-01);
--rp-small-font-size: 0.625rem; // 10px --rp-small-font-size: 0.625rem; // 10px
--rp-icon-large-size: var(--font-size-04); --rp-icon-large-size: var(--font-size-04);
@ -24,19 +23,6 @@ $rp-entry-arrow-width: 6px;
--rp-entry-animation-speed: 0.3s; --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 { %rp-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -814,19 +800,6 @@ del.rp-content-highlight {
font-size: var(--rp-base-font-size); 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 { .resolved-comments-toggle {
background-color: var(--bg-light-secondary); background-color: var(--bg-light-secondary);
font-size: var(--font-size-02); font-size: var(--font-size-02);