From 11b3e7b6c888459765e8abd4fafe7481d65c86be Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 11 May 2022 12:27:09 +0100
Subject: [PATCH] Improve spacing in file tree (#7736)

GitOrigin-RevId: f1cbc3b3f637d15d56d40693b15f53c53a24792f
---
 .../file-tree/components/file-tree-doc.js     |  4 +-
 .../file-tree/components/file-tree-folder.js  | 12 ++++-
 .../file-tree-item/file-tree-item-menu.js     |  3 +-
 .../stylesheets/app/editor/file-tree.less     | 46 +++++++++++--------
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-doc.js b/services/web/frontend/js/features/file-tree/components/file-tree-doc.js
index 0b18229921..e55e6e9d72 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-doc.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-doc.js
@@ -41,7 +41,9 @@ FileTreeDoc.propTypes = {
 export const FileTreeIcon = ({ isLinkedFile, name }) => {
   const { t } = useTranslation()
 
-  const className = classnames('spaced', { 'linked-file-icon': isLinkedFile })
+  const className = classnames('spaced', 'file-tree-icon', {
+    'linked-file-icon': isLinkedFile,
+  })
 
   return (
     <>
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-folder.js b/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
index 8fe8d1153c..f5a641147c 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
@@ -45,9 +45,17 @@ function FileTreeFolder({ name, id, folders, docs, files }) {
         onClick={handleExpandCollapseClick}
         aria-label={expanded ? t('collapse') : t('expand')}
       >
-        <Icon type={expanded ? 'angle-down' : 'angle-right'} fw />
+        <Icon
+          type={expanded ? 'angle-down' : 'angle-right'}
+          fw
+          className="file-tree-expand-icon"
+        />
       </button>
-      <Icon type={expanded ? 'folder-open' : 'folder'} fw />
+      <Icon
+        type={expanded ? 'folder-open' : 'folder'}
+        fw
+        className="file-tree-folder-icon"
+      />
     </>
   )
 
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js
index ffa55083d8..30427645fc 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js
@@ -37,7 +37,8 @@ function FileTreeItemMenu({ id }) {
   return (
     <div className="menu-button btn-group">
       <Button
-        className="entity-menu-toggle btn btn-default"
+        className="entity-menu-toggle"
+        bsSize="sm"
         id={`menu-button-${id}`}
         onClick={withoutPropagation(handleClick)}
         ref={menuButtonRef}
diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less
index 93ffa14c6b..4898643a8c 100644
--- a/services/web/frontend/stylesheets/app/editor/file-tree.less
+++ b/services/web/frontend/stylesheets/app/editor/file-tree.less
@@ -93,7 +93,7 @@
 
     .entity > ul,
     ul[role='tree'] {
-      margin-left: (@line-height-computed / 2);
+      margin-left: 22px;
     }
 
     li.bottom-buffer {
@@ -171,21 +171,34 @@
       i.fa {
         color: @file-tree-item-icon-color;
         font-size: 14px;
-      }
 
-      i.fa.linked-file-icon {
-        position: relative;
-        left: -2px;
+        &.file-tree-icon {
+          margin-right: 4px;
+          margin-left: 8px;
 
-        + .linked-file-highlight {
-          & {
-            color: white;
+          &.linked-file-icon {
+            position: relative;
+            left: -2px;
+
+            + .linked-file-highlight {
+              & {
+                color: white;
+              }
+              position: relative;
+              top: 4px;
+              width: 0;
+              left: -5px;
+              font-size: 12px;
+            }
           }
-          position: relative;
-          top: 4px;
-          width: 0;
-          left: -2px;
-          font-size: 12px;
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: 4px;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: 8px;
         }
       }
 
@@ -195,10 +208,6 @@
         font-size: 14px;
       }
 
-      i.spaced {
-        margin-left: 18px;
-      }
-
       i.toggle {
         width: 24px;
         padding: 6px;
@@ -252,13 +261,14 @@
       .menu-button {
         position: absolute;
         right: 0;
+        top: 3px;
       }
 
       .rename-input {
         display: block;
         position: absolute;
         top: 1px;
-        left: 44px;
+        left: 32px;
         right: 32px;
         color: @file-tree-item-input-color;
         input {