3 files changed, 40 insertions, 12 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 564939270..d1e0a0f02 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -212,7 +212,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     render() {
         TraceMobx();
         if (!(this.doc instanceof Doc)) return (null);
-        const background = this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
+        const background = this.props.treeViewHideTitle && this.props.treeViewHideHeaderFields ? "#D3D3D3" : this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
         const paddingX = `${NumCast(this.doc._xPadding, 15)}px`;
         const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`;
         const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 067675038..2f74a49bb 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -8,6 +8,7 @@
     width: 100%;
     overflow: hidden;
 }
+
 .treeView-container,
 .treeView-container-active {
     .bullet-outline {
@@ -20,21 +21,26 @@
 
     .treeView-bulletIcons {
         width: 15px;
+
         .treeView-expandIcon {
             display: none;
             left: -10px;
             position: absolute;
         }
+
         .treeView-checkIcon {
-            left: -10px;
+            left: 3.5px;
+            top: 2px;
             position: absolute;
         }
+
         &:hover {
             .treeView-expandIcon {
                 display: unset;
             }
         }
     }
+
     .bullet {
         position: relative;
         width: $TREE_BULLET_WIDTH;
@@ -45,9 +51,11 @@
         border-radius: 4px;
     }
 }
+
 .treeView-container-active {
     z-index: 100;
     position: relative;
+
     .formattedTextbox-sidebar {
         background-color: #ffff001f !important;
         height: 500px !important;
@@ -70,7 +78,8 @@
     display: flex;
     overflow: hidden;
 }
-.treeView-border{
+
+.treeView-border {
     border-left: dashed 1px #00000042;
 }
 
@@ -78,15 +87,20 @@
 .treeView-header {
     border: transparent 1px solid;
     display: flex;
+
     //align-items: center;
     ::-webkit-scrollbar {
-            display: none;
+        display: none;
     }
+
     .formattedTextBox-cont {
-        .formattedTextbox-sidebar, .formattedTextbox-sidebar-inking {
+
+        .formattedTextbox-sidebar,
+        .formattedTextbox-sidebar-inking {
             overflow: visible !important;
             border-left: unset;
         }
+
         overflow: visible !important;
     }
 
@@ -104,12 +118,18 @@
         margin-left: 0.25rem;
         opacity: 0.75;
 
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide,
+        .styleProvider-treeView-lock-active,
+        .styleProvider-treeView-hide-active {
             margin-left: 0.25rem;
-            margin-right: 0.25rem; 
+            margin-right: 0.25rem;
         }
-    
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide {
             display: none;
         }
     }
@@ -134,7 +154,10 @@
     }
 
     .right-buttons-container {
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide {
             display: inherit;
         }
     }
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index a61a9e43c..501fe372e 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -443,6 +443,12 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get renderBullet() {
         TraceMobx();
         const iconType = Doc.toIcon(this.doc);
+
+        //const iconType = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon);
+
+
+        // const footerDecoration = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decoration + ":footer");
+
         const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined;
         return <div className={`bullet${this.outlineMode ? "-outline" : ""}`} key={"bullet"}
             title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : "view fields"}
@@ -467,7 +473,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
         </div>;
     }
-
     @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }
     @computed get headerElements() {
         return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) :
@@ -588,7 +593,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 {view}
             </div >
             <div className={"right-buttons-container"}>
-                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */}
+                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */}
                 {this.headerElements}
             </div>
         </>;