restyled document decorations

and changed novice mode to exclude `data` in treeView

13 files changed, 178 insertions, 91 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 35c0b9a7d..0bfe6e87a 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -434,7 +434,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
                     </div>
                 ) : null}
-                <div className="documentButtonBar-button">{this.recordButton}</div>
+                {Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.recordButton}</div>}
                 {
                     Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>
                     /*<div className="documentButtonBar-button">
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index b490278c3..2e8d31478 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -22,6 +22,129 @@ $resizeHandler: 8px;
     grid-template-columns: $resizeHandler 1fr $resizeHandler;
     pointer-events: none;
 
+    .documentDecorations-topbar {
+        display: flex;
+        grid-column-start: 1;
+        grid-column-end: 4;
+        flex-direction: row;
+        gap: 2px;
+
+
+        .documentDecorations-openButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #3ce312;
+            border: solid 1.5px #0a620a;
+            color: #3ce312;
+            transition: 0.1s ease;
+            font-size: 11px;
+            opacity: 1;
+            pointer-events: all;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            border-radius: 100%;
+            cursor: pointer;
+
+            &:hover {
+                color: #02600d;
+            }
+        }
+        
+        .documentDecorations-closeButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #fb9d75;
+            border: solid 1.5px #a94442;
+            color: #fb9d75;
+            transition: 0.1s ease;
+            opacity: 1;
+            pointer-events: all;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            border-radius: 100%;
+            cursor: pointer;
+
+            &:hover {
+                color: #a94442;
+            }
+        
+            > svg {
+                margin: 0;
+            }
+        }
+
+        .documentDecorations-minimizeButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #ffdd00;
+            border: solid 1.5px #a94442;
+            color: #ffdd00;
+            transition: 0.1s ease;
+            font-size: 11px;
+            opacity: 1;
+            grid-column: 2;
+            pointer-events: all;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            border-radius: 100%;
+            cursor: pointer;
+
+            &:hover {
+                color: #a94442;
+            }
+        
+            > svg {
+                margin: 0;
+            }
+        }
+
+        .documentDecorations-title-Dark,
+        .documentDecorations-title {
+            opacity: 1;
+            width: calc(100% - 60px); // = margin-left + margin-right
+            grid-column: 3;
+            pointer-events: auto;
+            overflow: hidden;
+            text-align: center;
+            display: flex;
+            height: 20px;
+            border-radius: 8px;
+            outline: none;
+            border: none;
+
+            .documentDecorations-titleSpan,
+            .documentDecorations-titleSpan-Dark {
+                width: 100%;
+                border-radius: 8px;
+                background: $light-gray;
+                display: inline-block;
+                cursor: move;
+            }
+            .documentDecorations-titleSpan-Dark {
+                background: hsla(0, 0%, 0%, 0.412);
+            }
+        }
+
+        .documentDecorations-title-Dark {
+            color: white;
+            background: black;
+        }
+
+        .documentDecorations-titleBackground {
+            background: $light-gray;
+            border-radius: 8px;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+    }
+
     .documentDecorations-centerCont {
         grid-column: 2;
         background: none;
@@ -225,76 +348,12 @@ $resizeHandler: 8px;
         cursor: ew-resize;
     }
 
-    .documentDecorations-title-Dark,
-    .documentDecorations-title {
-        opacity: 1;
-        width: calc(100% - 8px); // = margin-left + margin-right
-        grid-column: 2;
-        grid-column-end: 2;
-        pointer-events: auto;
-        overflow: hidden;
-        text-align: center;
-        display: flex;
-        margin-left: 6px; // closeButton width (14) - leftColumn width (8)
-        margin-right: 2px;
-        height: 20px;
-        position: absolute;
-        border-radius: 8px;
-        background: rgba(159, 159, 159, 0.1);
-
-        .documentDecorations-titleSpan,
-        .documentDecorations-titleSpan-Dark {
-            width: 100%;
-            border-radius: 8px;
-            background: #ffffffa0;
-            position: absolute;
-            display: inline-block;
-            cursor: move;
-        }
-        .documentDecorations-titleSpan-Dark {
-            background: hsla(0, 0%, 0%, 0.412);
-        }
-    }
-    .documentDecorations-title-Dark {
-        color: white;
-        background: black;
-    }
-
-    .documentDecorations-titleBackground {
-        background: #ffffffcf;
-        border-radius: 8px;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
-
     .focus-visible {
         margin-left: 0px;
     }
 }
 
-.documentDecorations-openButton {
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    grid-column-start: 3;
-    pointer-events: all;
-    cursor: pointer;
-}
 
-.documentDecorations-closeButton {
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    grid-column: 1;
-    pointer-events: all;
-    width: 14px;
-    cursor: pointer;
-
-    > svg {
-        margin: 0;
-    }
-}
 
 .documentDecorations-background {
     background: lightblue;
@@ -329,7 +388,7 @@ $resizeHandler: 8px;
     justify-content: center;
     align-items: center;
     gap: 5px;
-    background: $medium-gray;
+    background: $light-gray;
 }
 
 .linkButtonWrapper {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 0fc33bdea..95025bf70 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -719,9 +719,12 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                 width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
                                 height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px',
                             }}>
-                            {hideDeleteButton ? <div /> : topBtn('close', this.hasIcons ? 'times' : 'window-maximize', undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), 'Close')}
-                            {titleArea}
-                            {hideOpenButton ? null : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Tab (ctrl: as alias, shift: in new collection)')}
+                            <div className="documentDecorations-topbar">
+                                {hideDeleteButton ? <div /> : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')}
+                                {hideDeleteButton ? <div /> : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')}
+                                {titleArea}
+                                {hideOpenButton ? null : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Tab (ctrl: as alias, shift: in new collection)')}
+                            </div>
                             {hideResizers ? null : (
                                 <>
                                     <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
@@ -738,9 +741,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                 </>
                             )}
 
-                            <div key="rot" className={`documentDecorations-rotation`} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
+                            {!Doc.noviceMode && <div key="rot" className={`documentDecorations-rotation`} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
                                 {'⟲'}
-                            </div>
+                            </div>}
 
                             {useRounding && (
                                 <div
diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss
index b1cce8705..c99281323 100644
--- a/src/client/views/_nodeModuleOverrides.scss
+++ b/src/client/views/_nodeModuleOverrides.scss
@@ -44,8 +44,8 @@ div .lm_header {
     position: absolute;
     width: calc(100% - 60px);
     overflow: scroll;
-    background: #6b6b6b6b; //$dark-gray;
-    border-radius: 5px;
+    background: transparent; //$dark-gray;
+    border-radius: 0px;
 }
 
 .lm_tab {
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 091ba8e74..ac3541f2c 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -154,7 +154,15 @@
         background: $white;
     }
 
+    .lm_controls {
+        height: 27px;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+    }
+
     .lm_controls > li {
+        height: 27px !important;
         opacity: 1;
         transform: scale(1);
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index c0561e42c..a182a72c5 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -104,6 +104,7 @@
     text-overflow: ellipsis;
     white-space: pre-wrap;
     min-width: 10px;
+    grid-column: 2;
 }
 .docContainer-system {
     font-variant: all-small-caps;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index a82bd2dc8..98121f423 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -56,7 +56,9 @@ export class TabDocView extends React.Component<TabDocViewProps> {
         return this._document && Doc.Layout(this._document);
     }
     @computed get tabColor() {
-        return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor)));
+        let tabColor = StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor)));
+        if (tabColor === 'transparent') return 'black';
+        return tabColor;
     }
     @computed get tabTextColor() {
         return this._document?.type === DocumentType.PRES ? 'black' : StrCast(this._document?._color, StrCast(this._document?.color, DefaultStyleProvider(this._document, undefined, StyleProp.Color)));
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index ce87e6f89..cfb97709b 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -53,13 +53,16 @@
     }
 
     .bullet {
+        grid-column: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         position: relative;
         width: $TREE_BULLET_WIDTH;
+        min-height: 20px;
         color: $medium-gray;
-        margin-top: 3px;
-        // transform: scale(1.3, 1.3); // bcz: why was this here?  It makes displaying images in the treeView for documents that have icons harder.
         border: #80808030 1px solid;
-        border-radius: 4px;
+        border-radius: 5px;
     }
 }
 
@@ -113,7 +116,15 @@
 .treeView-header-editing,
 .treeView-header {
     border: transparent 1px solid;
-    display: flex;
+    display: grid;
+    align-items: center;
+    grid-auto-columns: 22px auto 22px;
+    width: 100%;
+    border-radius: 5px;
+
+    &:hover {
+        background-color: #bdddf5;
+    }
 
     //align-items: center;
     ::-webkit-scrollbar {
@@ -140,6 +151,7 @@
 
     .treeView-rightButtons {
         display: flex;
+        grid-column: 3;
         align-items: center;
         margin-left: 0.25rem;
         opacity: 0.75;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 833e364b3..b489b5214 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -736,7 +736,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                         }}
                     />
                 )}
-                {this.doc.treeViewExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
+                {Doc.noviceMode ? null : this.doc.treeViewExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
                     <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}>
                         {this.treeViewExpandedView}
                     </span>
@@ -953,7 +953,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 <div
                     className={`treeView-header` + (editing ? '-editing' : '')}
                     key="titleheader"
-                    style={{ width: StrCast(this.doc.treeViewHeaderWidth, 'max-content') }}
+                    style={{ width: '100%' }}
                     ref={this._header}
                     onClick={this.ignoreEvent}
                     onPointerDown={this.ignoreEvent}
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 8a75aeef8..ac2c04aaa 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -7,6 +7,10 @@ $medium-gray: #9f9f9f;
 $dark-gray: #323232;
 $black: #000000;
 
+$close-red: red;
+$minimize-yellow: yellow;
+$open-green: green;
+
 $light-blue: #bdddf5;
 $light-blue-transparent: #bdddf590;
 $medium-blue: #4476f7;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 4a6099fb3..6d1751b25 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -275,7 +275,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     icon = 'globe-asia';
                     text = 'User Default';
                 }
-                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
+                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
             } else if (script?.script.originalScript.startsWith('setFont')) {
                 const editorView = RichTextMenu.Instance?.TextView?.EditorView;
                 text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index ab59e6112..7f0f13437 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -2321,8 +2321,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
         const isMini: boolean = this.toolbarWidth <= 100;
         return (
-            <div className="presBox-buttons" style={{ background: Doc.ActivePresentation === this.rootDoc ? 'green' : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
-                {isMini ? null : (
+            <div className="presBox-buttons" style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
+                {isMini || Doc.noviceMode ? null : (
                     <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presStatus === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}>
                         <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}>
                             List
@@ -2330,11 +2330,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <option onPointerDown={StopEvent} value={CollectionViewType.Tree}>
                             Tree
                         </option>
-                        {Doc.noviceMode ? null : (
-                            <option onPointerDown={StopEvent} value={CollectionViewType.Carousel3D}>
-                                3D Carousel
-                            </option>
-                        )}
+                        <option onPointerDown={StopEvent} value={CollectionViewType.Carousel3D}>
+                            3D Carousel
+                        </option>
                     </select>
                 )}
                 <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length ? 1 : 0.3 }}>
@@ -2653,14 +2651,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         ) : null}
                     </div>
 
-                    {
+                    {/* {
                         // if the document type is a presentation, then the collection stacking view has a "+ new slide" button at the bottom of the stack
                         <Tooltip title={<div className="dash-tooltip">{'Click on document to pin to presentaiton or make a marquee selection to pin your desired view'}</div>}>
                             <button className="add-slide-button" onPointerDown={this.startMarqueeCreateSlide}>
                                 + NEW SLIDE
                             </button>
                         </Tooltip>
-                    }
+                    } */}
                 </div>
             </div>
         );
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index bbdb4621e..2fe0c6e79 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -52,7 +52,7 @@ export class TopBar extends React.Component {
                     <span style={{color: Colors.LIGHT_GRAY, fontWeight: 200}}>brown</span><span style={{color: Colors.LIGHT_BLUE, fontWeight: 500}}>dash</span>
                 </div>
                 }
-                {Doc.ActiveDashboard && <Button
+                {Doc.ActiveDashboard && !Doc.noviceMode && <Button
                     text="Explore"
                     tooltip="Browsing mode for directly navigating to documents"
                     fontSize={FontSize.SECONDARY}