menu UI updates

3 files changed, 20 insertions, 14 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 1969d728c..9ff1a0f61 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -124,6 +124,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
                     ({ layer, color }) => {
+                        console.log("TabDocView: " + this.tabColor);
+                        console.log("lightOrDark: " + lightOrDark(this.tabColor));
                         const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
                         titleEle.style.color = textColor;
                         titleEle.style.backgroundColor = "transparent";
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 9c766e03f..b37233892 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -5,12 +5,16 @@
     overflow: visible;
     height: 100%;
     pointer-events: none;
-    // background-color: rgba(0, 0, 0, 0.2);
     
     &.true {
         padding-left: 5px;
         padding-right: 5px;
         border-left: $standard-border;
+        background-color: #4476f780;
+    }
+
+    >input:not(:checked)~&.true {
+        background-color: transparent;
     }
 
     .collectionLinearView {
@@ -78,24 +82,25 @@
         }
 
         >label {
-            background: $dark-gray;
+            pointer-events: all;
+            cursor: pointer;
+            background-color: $medium-blue;
+            padding: 5;
+            border-radius: 2px;
+            height: 25;
+
+            margin: 0;
             color: $white;
             display: flex;
-            border-radius: 18px;
-            font-size: 12.5px;
-            font-weight:100;
+            font-weight: 100;
             width: fit-content;
-            height: 100%;
-            margin-top: auto;
-            margin-bottom: auto;
-            margin-right: 3px;
-            cursor: pointer;
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
+            transition:0.1s;
 
             &:hover {
-                background: $medium-gray;
+                transform: scale(1.05);
             }
         }
 
@@ -122,7 +127,6 @@
             .collectionLinearView-docBtn-scalable {
                 position: relative;
                 margin: auto;
-                margin-left: 3px;
                 transform-origin: center 80%;
             }
 
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index a8846fd45..5d89d82b4 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -114,12 +114,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const icon: string = StrCast(this.props.Document.icon);
 
-        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : backgroundColor, }}
+        const menuOpener = <label htmlFor={`${guid}`} style={{ pointerEvents: "all", cursor: "pointer", background: backgroundColor === color ? "black" : undefined, }}
             onPointerDown={e => e.stopPropagation()} >
             <p>{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"}</p>
         </label>;
 
-        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`}>
+        return <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : "transparent"}}>
             <div className="collectionLinearView" ref={this.createDashEventsTarget} >
                 {!expandable ? (null) : <Tooltip title={<><div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close menu" : "Open menu"}</div></>} placement="top">
                     {menuOpener}