more updates

4 files changed, 33 insertions, 23 deletions

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>();