diff --git a/services/web/frontend/js/features/review-panel-new/components/add-comment-tooltip.tsx b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx similarity index 81% rename from services/web/frontend/js/features/review-panel-new/components/add-comment-tooltip.tsx rename to services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx index fc9a6342d3..d472409d72 100644 --- a/services/web/frontend/js/features/review-panel-new/components/add-comment-tooltip.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx @@ -14,7 +14,7 @@ import { getTooltip } from '@codemirror/view' import useViewerPermissions from '@/shared/hooks/use-viewer-permissions' import usePreviousValue from '@/shared/hooks/use-previous-value' -const AddCommentTooltip: FC = () => { +const ReviewTooltipMenu: FC = () => { const state = useCodeMirrorStateContext() const view = useCodeMirrorViewContext() const isViewer = useViewerPermissions() @@ -40,12 +40,12 @@ const AddCommentTooltip: FC = () => { } return ReactDOM.createPortal( - , + , tooltipView.dom ) } -const AddCommentTooltipContent: FC<{ +const ReviewTooltipMenuContent: FC<{ setShow: Dispatch> }> = ({ setShow }) => { const { t } = useTranslation() @@ -66,11 +66,16 @@ const AddCommentTooltipContent: FC<{ } return ( - +
+ +
) } -export default AddCommentTooltip +export default ReviewTooltipMenu diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx index 5c5ed43282..2977bf6976 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx @@ -12,7 +12,7 @@ import importOverleafModules from '../../../../macros/import-overleaf-module.mac import { FigureModal } from './figure-modal/figure-modal' import { ReviewPanelProviders } from '@/features/review-panel-new/context/review-panel-providers' import { ReviewPanelMigration } from '@/features/source-editor/components/review-panel/review-panel-migration' -import AddCommentTooltip from '@/features/review-panel-new/components/add-comment-tooltip' +import ReviewTooltipMenu from '@/features/review-panel-new/components/review-tooltip-menu' import { useFeatureFlag } from '@/shared/context/split-test-context' import { CodeMirrorStateContext, @@ -78,7 +78,7 @@ function CodeMirrorEditor() { )} - {newReviewPanel && } + {newReviewPanel && } {sourceEditorComponents.map( diff --git a/services/web/frontend/js/features/source-editor/extensions/add-comment.ts b/services/web/frontend/js/features/source-editor/extensions/add-comment.ts index ad789f0a56..e74de8b3e7 100644 --- a/services/web/frontend/js/features/source-editor/extensions/add-comment.ts +++ b/services/web/frontend/js/features/source-editor/extensions/add-comment.ts @@ -100,7 +100,7 @@ function buildTooltip(range: SelectionRange): Tooltip | null { arrow: false, create() { const dom = document.createElement('div') - dom.className = 'review-panel-add-comment-tooltip-container' + dom.className = 'review-tooltip-menu-container' return { dom, overlap: true, offset: { x: 0, y: 8 } } }, } @@ -110,15 +110,16 @@ function buildTooltip(range: SelectionRange): Tooltip | null { * Styles for the tooltip */ const addCommentTheme = EditorView.baseTheme({ - '.review-panel-add-comment-tooltip-container.cm-tooltip': { + '.review-tooltip-menu-container.cm-tooltip': { backgroundColor: 'transparent', border: 'none', }, '&light': { - '& .review-panel-add-comment-tooltip': { + '& .review-tooltip-menu': { backgroundColor: 'white', - border: '1px solid #e7e9ee', + }, + '& .review-tooltip-menu-button': { '&:hover': { backgroundColor: '#e7e9ee', }, @@ -126,9 +127,10 @@ const addCommentTheme = EditorView.baseTheme({ }, '&dark': { - '& .review-panel-add-comment-tooltip': { + '& .review-tooltip-menu': { backgroundColor: '#1b222c', - border: '1px solid #2f3a4c', + }, + '& .review-tooltip-menu-button': { '&:hover': { backgroundColor: '#2f3a4c', }, diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less index c0c72aec1c..8216617854 100644 --- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less +++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less @@ -608,14 +608,26 @@ } } -.review-panel-add-comment-tooltip { - height: 24px; - border-radius: 12px; - padding: 2px 12px; +.review-tooltip-menu { + box-shadow: 0px 2px 4px 0px #1e253029; + border: none; + border-radius: 4px; + padding: 4px; +} + +.review-tooltip-menu-button { + background-color: inherit; + border: none; display: flex; align-items: center; gap: 2px; + padding: 2px; } + +.review-tooltip-add-comment-button { + padding: 2px 8px; +} + .review-panel-tooltip { pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip }