Implement new style for history file tree badge

GitOrigin-RevId: 6221bc00e5aecf49fd3f2657128d1e9a2d4e648b

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>

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;
+            }
+          }
         }
       }