Merge pull request #21250 from overleaf/dp-resolved-comments-ui

UI tweaks for resolved comments menu

GitOrigin-RevId: 23df6f9f0374277c315d2fb9c9940dd92ec19f4e

services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-threads-menu.tsx

@@ -7,6 +7,7 @@ import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { Change, CommentOperation } from '../../../../../types/change'
 import { ThreadId } from '../../../../../types/review-panel/review-panel'
 import LoadingSpinner from '@/shared/components/loading-spinner'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
 
 export const ReviewPanelResolvedThreadsMenu: FC = () => {
   const { t } = useTranslation()
@@ -76,9 +77,13 @@ export const ReviewPanelResolvedThreadsMenu: FC = () => {
         <div className="review-panel-resolved-comments-label">
           {t('resolved_comments')}
         </div>
-        <div className="review-panel-resolved-comments-count">
+        <OLBadge
+          bg="light"
+          text="dark"
+          className="review-panel-resolved-comments-count"
+        >
           {resolvedThreads.length}
-        </div>
+        </OLBadge>
       </div>
       {resolvedThreads.map(thread => {
         const comment = allComments.get(thread.id)

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

@@ -269,9 +269,10 @@
   }
 
   .review-panel-resolved-comments-count {
+    color: @content-secondary;
     background-color: @neutral-20;
-    border-radius: @border-radius-base-new;
-    padding: 2px;
+    font-weight: normal;
+    padding: 4px;
   }
 
   .review-panel-resolved-comment {
@@ -322,6 +323,10 @@
     background-color: @neutral-20;
     border-radius: @border-radius-base-new;
     padding: 4px 8px;
+
+    .btn-inline-link {
+      font-size: 12px;
+    }
   }
 
   .review-panel-resolved-comment-quoted-text-label {
@@ -330,6 +335,7 @@
   }
 
   .review-panel-resolved-comment-quoted-text-quote {
+    color: @content-primary;
     overflow-wrap: anywhere;
     font-size: 14px;
   }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss

@@ -279,12 +279,6 @@
     font-size: var(--font-size-02);
   }
 
-  .review-panel-resolved-comments-count {
-    background-color: var(--neutral-20);
-    border-radius: var(--border-radius-base);
-    padding: var(--spacing-01);
-  }
-
   .review-panel-resolved-comment {
     background-color: var(--white);
     border-radius: var(--border-radius-base);
@@ -292,6 +286,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-04);
+
+    .btn-inline-link {
+      font-size: 12px;
+    }
   }
 
   .review-panel-resolved-comment-header {
@@ -342,6 +340,7 @@
   }
 
   .review-panel-resolved-comment-quoted-text-quote {
+    color: var(--content-primary);
     overflow-wrap: anywhere;
     font-size: var(--font-size-02);
   }