Merge pull request #28117 from overleaf/dp-tab-headings

Align rail panel headers to use the same font-weight and line-height

GitOrigin-RevId: e982f6d816e2f1b0e8f4a0af603222262d58bab0

services/web/frontend/js/features/review-panel/components/review-panel-header.tsx

@@ -3,16 +3,26 @@ import { ReviewPanelResolvedThreadsButton } from './review-panel-resolved-thread
 import { useTranslation } from 'react-i18next'
 import { PanelHeading } from '@/shared/components/panel-heading'
 import useReviewPanelLayout from '../hooks/use-review-panel-layout'
+import RailPanelHeader from '@/features/ide-redesign/components/rail/rail-panel-header'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 const ReviewPanelHeader: FC = () => {
   const { closeReviewPanel } = useReviewPanelLayout()
   const { t } = useTranslation()
+  const newEditor = useIsNewEditorEnabled()
 
   return (
     <div className="review-panel-header">
-      <PanelHeading title={t('review')} handleClose={closeReviewPanel}>
-        <ReviewPanelResolvedThreadsButton />
-      </PanelHeading>
+      {newEditor ? (
+        <RailPanelHeader
+          title={t('review')}
+          actions={[<ReviewPanelResolvedThreadsButton key="resolve-threads" />]}
+        />
+      ) : (
+        <PanelHeading title={t('review')} handleClose={closeReviewPanel}>
+          <ReviewPanelResolvedThreadsButton />
+        </PanelHeading>
+      )}
     </div>
   )
 }

services/web/frontend/js/shared/components/panel-heading.tsx

@@ -4,6 +4,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
+// TODO ide-redesign-cleanup: Remove this component and only use RailPanelHeader
 export const PanelHeading: FC<
   React.PropsWithChildren<{
     title: string

services/web/frontend/stylesheets/pages/editor/file-tree.scss

@@ -87,8 +87,9 @@
     h4 {
       color: var(--file-tree-expand-button-color);
       font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
       margin: 0;
-      font-weight: normal;
+      font-weight: bold;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -76,7 +76,9 @@
   }
 
   .outline-header-name {
-    font-weight: unset;
+    font-weight: bold;
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
   }
 
   .outline-carat-icon {

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

@@ -43,8 +43,10 @@ body {
 
 .rail-panel-title {
   font-size: var(--font-size-02);
+  line-height: var(--line-height-02);
   color: var(--ide-rail-color);
   margin-bottom: 0;
+  font-weight: bold;
 }
 
 .ide-rail-tab-button {