From 8212b686c6df6bccb2d7b614ae7f3df6b3ec00bf Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 13 Apr 2023 23:29:10 -0700
Subject: [PATCH] Implement new style for history file tree badge

GitOrigin-RevId: 6221bc00e5aecf49fd3f2657128d1e9a2d4e648b
---
 .../file-tree/history-file-tree-item.tsx      |  9 ++++-----
 .../stylesheets/app/editor/file-tree.less     | 20 +++++++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
index cfb089eb21..0a0eade3c8 100644
--- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
+++ b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
-import { DiffOperation } from '../../services/types/diff-operation'
+import type { DiffOperation } from '../../services/types/diff-operation'
+import Badge from '../../../../shared/components/badge'
 
 type FileTreeItemProps = {
   name: string
@@ -17,11 +18,9 @@ export default function FileTreeItem({
       <div className="entity-name entity-name-react" role="presentation">
         {icons}
         <button className="item-name-button">
-          <span>{name}</span>
+          <span className="item-name-button-text">{name}</span>
           {operation ? (
-            <span className="history-file-entity-operation-badge">
-              {operation}
-            </span>
+            <Badge className="item-name-button-badge">{operation}</Badge>
           ) : null}
         </button>
       </div>
diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less
index b40cac76c5..2dfd59d8b0 100644
--- a/services/web/frontend/stylesheets/app/editor/file-tree.less
+++ b/services/web/frontend/stylesheets/app/editor/file-tree.less
@@ -131,6 +131,26 @@
           text-overflow: ellipsis;
           text-align: left;
           padding-right: 32px;
+          font-weight: normal;
+
+          .item-name-button-text {
+            display: inline-flex;
+            margin-right: 5px;
+          }
+
+          .item-name-button-badge {
+            text-transform: capitalize;
+            height: 20px;
+            font-size: @font-size-extra-small;
+
+            &:hover {
+              background-color: @neutral-20;
+            }
+
+            .badge-new-comment {
+              margin-left: 0;
+            }
+          }
         }
       }