1 files changed, 40 insertions, 75 deletions

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 3f04a0f3a..d913f2069 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "global/globalCssVariables";
 @import "nodeModuleOverrides";
 
 
@@ -22,10 +22,6 @@
     height: 100%;
 }
 
-.mainContent-div-flyout {
-    left: calc(-1 * var(--flyoutHandleWidth));
-}
-
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 .mainView-docButtons {
     position: absolute;
@@ -56,50 +52,50 @@
     touch-action: none;
 
     .searchBox-container {
-        background: lightgray;
+        background: $light-gray;
     }
 }
 
 .mainView-container {
-    color: black;
+    color: $dark-gray;
 
     .lm_title {
-        background: #cacaca;
-        color: black;
+        background: $light-gray;
+        color: $dark-gray;
     }
 }
 
 .mainView-container-dark {
-    color: lightgray;
+    color: $light-gray;
 
     .lm_goldenlayout {
-        background: dimgray;
+        background: $medium-gray;
     }
 
     .lm_title {
-        background: black;
+        background: $dark-gray;
         color: unset;
     }
 
     .marquee {
-        border-color: white;
+        border-color: $white;
     }
 
     #search-input {
-        background: lightgray;
+        background: $light-gray;
     }
 
     .searchBox-container {
-        background: rgb(45, 45, 45);
+        background: $dark-gray;
     }
 
     .contextMenu-cont,
     .contextMenu-item {
-        background: dimGray;
+        background: $medium-gray;
     }
 
     .contextMenu-item:hover {
-        background: gray;
+        background: $medium-gray;
     }
 }
 
@@ -111,14 +107,21 @@
     user-select: none;
 }
 
+.properties-container {
+    height: 100%;
+    position: relative;
+    left: 100%;
+    top: calc(-100% - 36px);
+    z-index: 3000;
+}
+
 .mainView-propertiesDragger {
     //background-color: rgb(140, 139, 139);
-    background-color: lightgrey;
+    background-color: $light-gray;
     height: 55px;
     width: 17px;
     position: absolute;
     top: 50%;
-    border: 1px black solid;
     border-radius: 0;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
@@ -141,18 +144,6 @@
     }
 }
 
-.mainiView-propertiesView {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    border-left: solid 1px;
-    z-index: 100000;
-    cursor: auto;
-}
-
 .mainView-innerContent, .mainView-innerContent-dark {
     display: contents;
     flex-direction: row;
@@ -163,43 +154,43 @@
         flex-direction: column;
         position: relative;
         height: 100%;
-        background: dimgray;
+        background: $medium-gray;
 
         .documentView-node-topmost {
-            background: lightgrey;
+            background: $light-gray;
         }
     }
 
     .propertiesView {
-        right: 0;
+        left: 0;
         position: absolute;
         z-index: 2;
-        background-color: rgb(159, 159, 159);
+        background-color: $light-gray;
         .editable-title {
-            background-color: lightgrey;
+            background-color: $light-gray;
         }
     }
 
 }
 .mainView-libraryHandle {
-    background-color: lightgrey;
+    background-color: $light-gray;
 }
 .mainView-innerContent-dark 
 {
     .propertiesView {
         background-color: #252525;
         input {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .propertiesView-sharingTable 
         {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .editable-title {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .propertiesView-field {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
     }
     .mainView-propertiesDragger,
@@ -209,17 +200,18 @@
 }
 .mainView-container-dark {
     .contextMenu-cont {
-        background: dimgrey;
-        color: white;
+        background: $medium-gray;
+        color: $white;
         input::placeholder {
-            color:white;
+            color:$white;
         }
     }
 }
 
 .mainView-menuPanel {
     min-width: var(--menuPanelWidth);
-    background-color: #121721;
+    background-color: $dark-gray;
+    border-right: $standard-border;
 
     .collectionStackingView {
         scrollbar-width: none;
@@ -233,13 +225,13 @@
         padding: 7px;
         padding-left: 7px;
         width: 100%;
-        background: black;
+        background: $dark-gray;
 
         .mainView-menuPanel-button-wrap {
             width: 45px;
             /* padding: 5px; */
             touch-action: none;
-            background: black;
+            background: $dark-gray;
             transform-origin: top left;
             /* margin-bottom: 5px; */
             margin-top: 5px;
@@ -247,7 +239,7 @@
             border-radius: 8px;
 
             &:hover {
-                background: rgb(61, 61, 61);
+                background: $black;
                 cursor: pointer;
             }
         }
@@ -419,31 +411,4 @@
     display: block;
     width: 500px;
     height: 1000px;
-}
-
-.lm_drag_tab {
-    padding: 0;
-    width: 15px !important;
-    height: 15px !important;
-    position: relative !important;
-    display: inline-flex !important;
-    align-items: center;
-    top: 0 !important;
-    right: unset !important;
-    left: 0 !important;
-}
-.lm_close_tab {
-    padding: 0;
-    width: 15px !important;
-    height: 15px !important;
-    position: relative !important;
-    display: inline-flex !important;
-    align-items: center;
-    top: 0 !important;
-    right: unset !important;
-    left: 0 !important;
-}
-.lm_tab, .lm_tab_active {
-    display: flex !important;
-    padding-right: 0 !important;
 }
\ No newline at end of file