>
}> = ({ 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
}