Update add comment tooltip to match new designs (#20913)

* Update add comment tooltip to match new designs

* Rename AddCommentTooltip to ReviewTooltipMenu

* Split off add-comment-button specific padding

GitOrigin-RevId: 12a69b13b52b007eb97ba7ad6f290e3a98d741cd

services/web/frontend/js/features/review-panel-new/components/add-comment-tooltip.tsx → 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(
-    <AddCommentTooltipContent setShow={setShow} />,
+    <ReviewTooltipMenuContent setShow={setShow} />,
     tooltipView.dom
   )
 }
 
-const AddCommentTooltipContent: FC<{
+const ReviewTooltipMenuContent: FC<{
   setShow: Dispatch<SetStateAction<boolean>>
 }> = ({ setShow }) => {
   const { t } = useTranslation()
@@ -66,11 +66,16 @@ const AddCommentTooltipContent: FC<{
   }
 
   return (
-    <button className="review-panel-add-comment-tooltip" onClick={handleClick}>
-      <MaterialIcon type="chat" />
-      {t('add_comment')}
-    </button>
+    <div className="review-tooltip-menu">
+      <button
+        className="review-tooltip-menu-button review-tooltip-add-comment-button"
+        onClick={handleClick}
+      >
+        <MaterialIcon type="chat" />
+        {t('add_comment')}
+      </button>
+    </div>
   )
 }
 
-export default AddCommentTooltip
+export default ReviewTooltipMenu

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() {
           )}
           <CodeMirrorCommandTooltip />
 
-          {newReviewPanel && <AddCommentTooltip />}
+          {newReviewPanel && <ReviewTooltipMenu />}
           <ReviewPanelMigration />
 
           {sourceEditorComponents.map(

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',
       },

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
 }