Merge pull request #20511 from overleaf/dp-review-panel-footer

Update UI for new review panel footer

GitOrigin-RevId: 8beb554f78fa5876d5349981d96b44a16ab5567c

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

@@ -1,28 +1,34 @@
 import { Dispatch, FC, memo, SetStateAction } from 'react'
 import classnames from 'classnames'
 import { SubView } from '../components/review-panel'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
 
 const ReviewPanelTabs: FC<{
   subView: SubView
   setSubView: Dispatch<SetStateAction<SubView>>
 }> = ({ subView, setSubView }) => {
+  const { t } = useTranslation()
+
   return (
     <>
       <button
-        className={classnames('rp-nav-item', {
-          'rp-nav-item-active': subView === 'cur_file',
+        className={classnames('review-panel-tab', {
+          'review-panel-tab-active': subView === 'cur_file',
         })}
         onClick={() => setSubView('cur_file')}
       >
-        Current file
+        <MaterialIcon type="description" />
+        {t('current_file')}
       </button>
       <button
-        className={classnames('rp-nav-item', {
-          'rp-nav-item-active': subView === 'overview',
+        className={classnames('review-panel-tab', {
+          'review-panel-tab-active': subView === 'overview',
         })}
         onClick={() => setSubView('overview')}
       >
-        Overview
+        <MaterialIcon type="list" />
+        {t('overview')}
       </button>
     </>
   )

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -438,12 +438,38 @@
 
   .review-panel-footer {
     position: fixed;
-    top: calc(var(--review-panel-bottom) - 66px);
+    height: 60px;
+    top: calc(var(--review-panel-bottom) - 100px);
     width: var(--review-panel-width);
     z-index: 2;
-    background: @rp-bg-dim-blue;
+    background-color: white;
     border-top: 1px solid #d9d9d9;
     display: flex;
+
+    .review-panel-tab {
+      flex: 0 0 50%;
+      padding: 6px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      border: 0;
+      border-top: solid 3px transparent;
+      background: none;
+      color: @content-secondary;
+      font-size: @font-size-02;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: @content-primary;
+      }
+
+      &-active {
+        color: @content-primary;
+        border-top: solid 3px @green-50;
+      }
+    }
   }
 
   .review-panel-add-comment-textarea {