Merge branch 'master' into UI_Update_Eric_Ma

1 files changed, 31 insertions, 33 deletions

diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7eab03e1d..d22e85880 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,37 +21,20 @@
     }
 
     .treeView-bulletIcons {
-        // width: $TREE_BULLET_WIDTH;
         width: 100%;
         height: 100%;
-        position: absolute;
-
-        .treeView-expandIcon {
-            display: none;
-            left: -10px;
-            position: absolute;
-        }
-
-        .treeView-checkIcon {
-            left: 3.5px;
-            top: 2px;
-            position: absolute;
-        }
-
-        &:hover {
-            .treeView-expandIcon {
-                display: unset;
-            }
-        }
+        position: relative;
+        display: flex;
+        flex-direction: row;
     }
 
-    .treeView-bulletIcons:hover img {
-        left: 14px;
-        position: absolute;
-        transform-origin: center left;
-        transform: scale(6);
-        pointer-events: none;
-    }
+    // .treeView-bulletIcons:hover img {
+    //     left: 14px;
+    //     position: absolute;
+    //     transform-origin: center left;
+    //     transform: scale(6);
+    //     pointer-events: none;
+    // }
 
     .bullet {
         grid-column: 1;
@@ -59,11 +42,12 @@
         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;
         border-radius: 5px;
+        z-index: 1;
     }
 }
 
@@ -71,9 +55,6 @@
     position: absolute;
     height: max-content;
     pointer-events: none;
-    color: white;
-    border-radius: 4px;
-    font-size: 10px;
 }
 
 .treeView-container-active {
@@ -121,10 +102,26 @@
     align-items: center;
     width: max-content;
     border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    .treeView-background {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        filter: opacity(0);
+    }
 
     &:hover {
-        background-color: #bdddf5;
+        .treeView-background {
+            filter: opacity(0.2) !important;
+        }
     }
+    
 
     //align-items: center;
     ::-webkit-scrollbar {
@@ -157,6 +154,7 @@
         opacity: 0.75;
         pointer-events: all;
         cursor: pointer;
+        z-index: 1;
 
         > svg {
             margin-left: 0.25rem;