more updates

12 files changed, 73 insertions, 50 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f6b2e0736..b7ba6f1fe 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -230,6 +230,8 @@ export class DocumentOptions {
     linearViewExpandable?: boolean; // can linear view be expanded
     linearViewToggleButton?: string; // button to open close linear view group
     linearViewSubMenu?: boolean;
+    flexGap?: number; // Linear view flex gap
+    flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
 
     layout_linkView?: Doc; // view template for a link document
     layout_keyValue?: string; // view tempalte for key value docs
@@ -277,7 +279,6 @@ export class DocumentOptions {
     text?: string;
     textTransform?: string; // is linear view expanded
     letterSpacing?: string; // is linear view expanded
-    flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
     selectedIndex?: number; // which item in a linear view has been selected using the "thumb doc" ui
     clipboard?: Doc;
     searchQuery?: string; // for quersyBox
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0440367de..0210b5a1d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -892,10 +892,10 @@ export class CurrentUserUtils {
         CurrentUserUtils.setupUserDoc(doc);
     }
 
-    static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
-        ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _width: 100, boxShadow: "0 0", _forceActive: true,
+    static linearButtonList = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
+        ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, boxShadow: "0 0", _forceActive: true,
         dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
-        _lockedPosition: true, linearViewIsExpanded: true, system: true
+        _lockedPosition: true, linearViewIsExpanded: true, system: true, flexDirection: "column"
     })) as any as Doc
 
     static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({
@@ -911,7 +911,7 @@ export class CurrentUserUtils {
             doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), dontUndo: true, _stayInCollection: true, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo", title: "redo", icon: "redo-alt", system: true });
         }
         if (doc.dockedBtns === undefined) {
-            doc.dockedBtns = CurrentUserUtils.blist({ title: "docked buttons", linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
+            doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
         }
         (doc["dockedBtn-undo"] as Doc).dontUndo = true;
         (doc["dockedBtn-redo"] as Doc).dontUndo = true;
@@ -1013,7 +1013,7 @@ export class CurrentUserUtils {
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
                     }));
                 });
-                docList.push(CurrentUserUtils.blist({ linearViewSubMenu: true, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
+                docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
             } else if (type === "InkMenu") {
                 const inkBtns = (CurrentUserUtils.inkTools(doc)).map(({ title, toolTip, icon, btnType, click }) => {
                     textDocList.push(Docs.Create.FontIconDocument({
@@ -1039,7 +1039,7 @@ export class CurrentUserUtils {
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
                     }));
                 });
-                docList.push(CurrentUserUtils.blist({ linearViewSubMenu: true, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
+                docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
             } else {
                 docList.push(Docs.Create.FontIconDocument({
                     _nativeWidth: width ? width : 25,
@@ -1067,7 +1067,7 @@ export class CurrentUserUtils {
         });
 
         if (doc.contextMenuBtns === undefined) {
-            doc.contextMenuBtns = CurrentUserUtils.blist({ title: "menu buttons", ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList);
+            doc.contextMenuBtns = CurrentUserUtils.linearButtonList({ title: "menu buttons", flexGap: 0, ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList);
         }
     }
     // sets up the default set of documents to be shown in the Overlay layer
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 316f63240..d34efd01a 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -51,6 +51,7 @@ $linkGap : 3px;
         pointer-events: auto;
         background: $medium-gray;
         opacity: 0.1;
+
         &:hover {
             opacity: 1;
         }
@@ -94,6 +95,7 @@ $linkGap : 3px;
             position: absolute;
         }
     }
+
     .documentDecorations-rotation {
         background: transparent;
         right: -15;
@@ -189,6 +191,7 @@ $linkGap : 3px;
         margin-left: 5px;
         height: 22px;
         position: absolute;
+
         .documentDecorations-titleSpan {
             width: 100%;
             border-radius: 8px;
@@ -263,7 +266,7 @@ $linkGap : 3px;
 }
 
 .link-button-container {
-    border-radius: 10px;
+    border-radius: 13px;
     width: max-content;
     height: auto;
     display: flex;
@@ -338,6 +341,7 @@ $linkGap : 3px;
 .documentdecorations-icon {
     margin: 0px;
 }
+
 .templating-button,
 .docDecs-tagButton {
     width: 20px;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 163566d22..c35f088a6 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -14,8 +14,8 @@
     .collectionMenu-hardCodedButton {
         cursor: pointer;
         color: $white;
-        width: 31.5px;
-        height: 90%;
+        width: 25px;
+        height: 25px;
         padding: 5;
         text-align: center;
         display: flex;
@@ -23,10 +23,10 @@
         align-items: center;
         position: relative;
         transition: 0.2s;
+        border-radius: 3px;
 
         &:hover {
-            border-radius:5px;
-            background-color: rgba(0,0,0,0.2);
+            background-color: rgba(0, 0, 0, 0.2);
         }
     }
 }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 1f36e94cf..77e5132fc 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -40,6 +40,7 @@ import { CollectionLinearView } from "./CollectionLinearView";
 import "./CollectionMenu.scss";
 import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { TabDocView } from "./TabDocView";
+import { Colors } from "../global/globalEnums";
 
 @observer
 export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -135,7 +136,9 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
         const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
 
         const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="properties" placement="bottom">
-            <div className="collectionMenu-hardCodedButton" key="properties"
+            <div className="collectionMenu-hardCodedButton"
+                style={{ backgroundColor: CurrentUserUtils.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }}
+                key="properties"
                 onPointerDown={this.toggleProperties}>
                 <FontAwesomeIcon icon={propIcon} size="lg" />
             </div>
@@ -143,11 +146,11 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
 
         // NEW BUTTONS
         //dash col linear view buttons
-        const contMenuButtons = 
-        <div className="collectionMenu-container">
-            {this.contMenuButtons}
-            {prop}
-        </div>;
+        const contMenuButtons =
+            <div className="collectionMenu-container">
+                {this.contMenuButtons}
+                {prop}
+            </div>;
 
         return contMenuButtons;
 
@@ -779,7 +782,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                             onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
                             style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
                             •
-                    </button>
+                        </button>
                     </Tooltip>)}
             </div>;
     }
@@ -1050,7 +1053,7 @@ export class CollectionTreeViewChrome extends React.Component<CollectionMenuProp
                 <button className="collectionTreeViewChrome-sort" onClick={this.toggleSort}>
                     <div className="collectionTreeViewChrome-sortLabel">
                         Sort
-                        </div>
+                    </div>
                     <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.ascending === undefined ? "90" : this.ascending ? "180" : "0"}deg)` }}>
                         <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
                     </div>
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 2b3f8f2c9..44752e034 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -5,12 +5,12 @@
     overflow: visible;
     height: 100%;
     pointer-events: none;
-    
+
     &.true {
         padding-left: 5px;
         padding-right: 5px;
         border-left: $standard-border;
-        background-color: #4476f73d;
+        background-color: $medium-blue-alt;
     }
 
     >input:not(:checked)~&.true {
@@ -21,8 +21,9 @@
         display: flex;
         height: 100%;
         align-items: center;
+        gap: 5px;
 
-        .collectionView{
+        .collectionView {
             overflow: visible !important;
         }
 
@@ -56,7 +57,7 @@
         }
 
         .bottomPopup-descriptions {
-            cursor:pointer;
+            cursor: pointer;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
@@ -69,7 +70,7 @@
         }
 
         .bottomPopup-exit {
-            cursor:pointer;
+            cursor: pointer;
             display: inline;
             white-space: nowrap;
             margin-right: 10px;
@@ -97,7 +98,7 @@
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
-            transition:0.1s;
+            transition: 0.1s;
 
             &:hover {
                 transform: scale(1.05);
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 3327bef36..713d93f97 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -108,12 +108,13 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     }
 
     render() {
-        const guid = Utils.GenerateGuid();
-        const flexDir: any = StrCast(this.Document.flexDirection);
-        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable);
+        const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
+        const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
+        const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
+        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const icon: string = StrCast(this.props.Document.icon);
+        const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
 
         const menuOpener = <label htmlFor={`${guid}`}
             style={{
@@ -134,7 +135,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 <input id={`${guid}`} type="checkbox" checked={BoolCast(this.props.Document.linearViewIsExpanded)} ref={this.addMenuToggle}
                     onChange={action(() => this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked)} />
 
-                <div className="collectionLinearView-content" style={{ height: this.dimension(), flexDirection: flexDir }}>
+                <div className="collectionLinearView-content"
+                    style={{
+                        height: this.dimension(),
+                        flexDirection: flexDir,
+                        gap: flexGap
+                    }}>
                     {this.childLayoutPairs.map((pair, ind) => {
                         const nested = pair.layout._viewType === CollectionViewType.Linear;
                         const dref = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 7556f8b8a..a1baed7d9 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -8,6 +8,7 @@ $black: #000000;
 
 $light-blue: #bdddf5;
 $medium-blue: #4476f7;
+$medium-blue-alt: #4476f73d;
 $pink: #e0217d;
 $yellow: #f5d747;
 
@@ -24,7 +25,8 @@ $large-padding: 32px;
 $icon-size: 28px;
 
 // fonts
-$sans-serif: "Roboto", sans-serif;
+$sans-serif: "Roboto",
+sans-serif;
 $large-header: 16px;
 $body-text: 12px;
 $small-text: 9px;
@@ -43,6 +45,9 @@ $radialMenu-zindex: 100000; // context menu shows up over everything
 // borders
 $standard-border: solid 1px #9f9f9f;
 
+// border radius
+$standard-border-radius: 3px;
+
 $searchpanel-height: 32px;
 $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
 $docDecorations-zindex: 998; // then doc decorations appear over everything else
@@ -67,4 +72,4 @@ $TREE_BULLET_WIDTH: 20px;
     DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
     MENU_PANEL_WIDTH: $MENU_PANEL_WIDTH;
     TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
-}
+}
\ No newline at end of file
diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx
index 2aeb8e338..074a3aab3 100644
--- a/src/client/views/global/globalEnums.tsx
+++ b/src/client/views/global/globalEnums.tsx
@@ -5,6 +5,7 @@ export enum Colors {
     LIGHT_GRAY = "#DFDFDF",
     WHITE = "#FFFFFF",
     MEDIUM_BLUE = "#4476F7",
+    MEDIUM_BLUE_ALT = "#4476f73d", // REDUCED OPACITY
     LIGHT_BLUE = "#BDDDF5",
     PINK = "#E0217D",
     YELLOW = "#F5D747",
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index 8dfb66e30..f0ca43a09 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -6,10 +6,10 @@
     justify-content: center;
     align-items: center;
     font-size: 80%;
-    border-radius: 2px;
+    border-radius: $standard-border-radius;
 
     &:hover {
-        background-color: rgba(0,0,0,0.3) !important;
+        background-color: rgba(0, 0, 0, 0.3) !important;
     }
 
     .menuButton-wrap {
@@ -117,7 +117,7 @@
             top: 100%;
             z-index: 21;
             background-color: $white;
-            box-shadow: 0px 3px 4px rgba(0,0,0,0.3);
+            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
             padding: 1px;
 
             .list-item {
@@ -170,7 +170,7 @@
         right: 0;
     }
 
-    .menuButton-dropdown-header{
+    .menuButton-dropdown-header {
         width: 100%;
         font-weight: 300;
         padding: 5px;
@@ -186,7 +186,7 @@
         top: 0;
         z-index: 20;
         left: 0;
-        background:transparent;
+        background: transparent;
         position: fixed;
     }
 
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 2ecbb536b..d02a77fe4 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -22,7 +22,7 @@
 
         .topBar-icon {
             cursor: pointer;
-            font-size: 12px;
+            font-size: 12.5px;
             font-family: 'Roboto';
             width: fit-content;
             display: flex;
@@ -31,18 +31,20 @@
             align-items: center;
             justify-self: center;
             align-self: center;
-            border-radius: 5px;
+            border-radius: $standard-border-radius;
             padding: 5px;
             transition: linear 0.1s;
             color: $black;
             background-color: $light-gray;
-        }
 
-        .topBar-icon:hover {
-            background-color: $light-blue;
+            &:hover {
+                background-color: $light-blue;
+            }
         }
 
-        
+
+
+
         .topbar-center {
             grid-column: 2;
             display: inline-flex;
@@ -58,7 +60,7 @@
             .topbar-lozenge-dashboard {
                 display: flex;
 
-                    
+
 
                 .topbar-dashSelect {
                     border: none;
@@ -155,9 +157,9 @@
             }
 
             &.topbar-input {
-                margin:5px;
-                border-radius:20px;
-                border:$dark-gray;    
+                margin: 5px;
+                border-radius: 20px;
+                border: $dark-gray;
                 display: block;
                 width: 130px;
                 -webkit-transition: width 0.4s;
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 05edb975c..4dbd5e22c 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -28,7 +28,7 @@ export class TopBar extends React.Component {
                             {`${Doc.CurrentUserEmail}`}
                         </div>
                         <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {"Sign out"}
+                            {"Log out"}
                         </div>
                     </div>
                     <div className="topbar-center" >