Merge pull request #34072 from overleaf/mj-toolbar-borders

[web] Add borders to dropdowns in editor toolbar

GitOrigin-RevId: e6199736559f755bde79341d78e6d8cd2d4c1ca1

services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts

@@ -43,7 +43,7 @@ const toolbarTheme = EditorView.theme({
   },
   '#popover-toolbar-overflow': {
     padding: 0,
-    borderColor: 'rgba(125, 125, 125, 0.2)',
+    border: '1px solid var(--editor-toolbar-popover-border-color)',
     backgroundColor: 'var(--editor-toolbar-bg)',
     color: 'var(--toolbar-btn-color)',
     '& .popover-content, & .popover-body': {
@@ -53,10 +53,7 @@ const toolbarTheme = EditorView.theme({
       color: 'inherit',
     },
     '& .arrow, & .popover-arrow': {
-      borderBottomColor: 'rgba(125, 125, 125, 0.2)',
-      '&:after': {
-        borderBottomColor: 'var(--editor-toolbar-bg)',
-      },
+      display: 'none',
     },
   },
   '.ol-cm-toolbar-header': {
@@ -81,6 +78,7 @@ const toolbarTheme = EditorView.theme({
   },
   '.ol-cm-toolbar-button-menu-popover': {
     backgroundColor: 'initial',
+    border: '1px solid var(--editor-toolbar-popover-border-color)',
     '& > .popover-content, & > .popover-body': {
       padding: 0,
       color: 'initial',

services/web/frontend/stylesheets/pages/editor/toolbar.scss

@@ -22,6 +22,7 @@
   --editor-header-logo-background: url(../../../../public/img/ol-brand/overleaf-o-white.svg)
     center / contain no-repeat;
   --editor-toolbar-bg: var(--neutral-80);
+  --editor-toolbar-popover-border-color: var(--border-primary);
   --toolbar-dropdown-divider-color: var(--border-dark-divider);
 }
 
@@ -72,6 +73,7 @@
   --editor-header-logo-background: url(../../../../public/img/ol-brand/overleaf-o.svg)
     center / contain no-repeat;
   --editor-toolbar-bg: var(--white);
+  --editor-toolbar-popover-border-color: rgba(125 125 125 / 20%);
   --toolbar-dropdown-divider-color: var(--border-divider);
 
   .ide-redesign-main {