From 1337e04680c3351379125c0f51ccfa98441c6eed Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:12:59 -0400
Subject: you fix some, you break some

---
 src/client/views/StyleProvider.scss        |  4 ++--
 src/client/views/StyleProvider.tsx         | 17 ++++++++++-------
 src/client/views/collections/TreeView.scss |  5 ++---
 src/client/views/collections/TreeView.tsx  | 28 ++++++++++++++--------------
 4 files changed, 28 insertions(+), 26 deletions(-)

(limited to 'src/client')

diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss
index 80c878386..c06bb287e 100644
--- a/src/client/views/StyleProvider.scss
+++ b/src/client/views/StyleProvider.scss
@@ -31,8 +31,8 @@
 
 .styleProvider-treeView-icon,
 .styleProvider-treeView-icon-active {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 .styleProvider-treeView-icon {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index a030c7052..2d4fce899 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { Shadows } from 'browndash-components';
+import { IconButton, Shadows, Size } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { extname } from 'path';
 import { Doc, Opt, StrListCast } from '../../fields/Doc';
@@ -323,24 +323,27 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
 }
 
 export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
+    const color = StrCast(Doc.UserDoc().userColor)
+    if (!doc[field]) return null
     return (
-        <div
-            title={field}
-            className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
+        <IconButton
+            size={Size.XSMALL}
+            color={color}
+            icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp}/>}
             onClick={undoBatch(
                 action((e: React.MouseEvent) => {
                     e.stopPropagation();
                     clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
                 })
-            )}>
-            <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
-        </div>
+            )}
+        />
     );
 }
 /**
  * add lock and hide button decorations for the "Dashboards" flyout TreeView
  */
 export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+
     if (doc && property.split(':')[0] === StyleProp.Decorations) {
         return doc._type_collection === CollectionViewType.Docking
             ? null
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 85f99b9c2..cfa658944 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -13,7 +13,7 @@
 .treeView-container-active {
     .bullet-outline {
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         color: $medium-gray;
         transform: scale(0.5);
         display: inline-flex;
@@ -21,7 +21,6 @@
     }
 
     .treeView-bulletIcons {
-        // width: $TREE_BULLET_WIDTH;
         width: 100%;
         height: 100%;
         position: relative;
@@ -43,7 +42,7 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         min-height: 20px;
         color: $medium-gray;
         border: #80808030 1px solid;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index fa9f895fd..9158508fc 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -712,23 +712,23 @@ export class TreeView extends React.Component<TreeViewProps> {
                     !(this.doc.text as RichTextField)?.Text ? null : (
                         <IconButton
                             color={color} 
-                            icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
+                            icon={<FontAwesomeIcon 
+                            icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
                             size={Size.XSMALL}
                         />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        <IconButton
+                        {this.onCheckedClick ? <IconButton
                             color={color} 
                             icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
                             size={Size.XSMALL}
-                        />
-                        {this.onCheckedClick ? null : 
-                        <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon icon={iconType as IconProp} />}
-                            size={Size.XSMALL}
-                        />
+                        /> : 
+                            <IconButton
+                                color={color} 
+                                icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                                size={Size.XSMALL}
+                            />
                         }
                     </div>
                 )}
@@ -757,15 +757,15 @@ export class TreeView extends React.Component<TreeViewProps> {
     @observable headerEleWidth = 0;
     @computed get titleButtons() {
         const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
                 {this.doc._layout_hideContextMenu ? null : (
-                    <FontAwesomeIcon
-                        title="context menu"
-                        key="bars"
-                        icon="bars"
-                        size="sm"
+                    <IconButton
+                        color={color} 
+                        icon={<FontAwesomeIcon icon="bars" />}
+                        size={Size.XSMALL}
                         onClick={e => {
                             this.showContextMenu(e);
                             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2