1 files changed, 30 insertions, 30 deletions

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 3f04a0f3a..07ca0257c 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "global/globalCssVariables";
 @import "nodeModuleOverrides";
 
 
@@ -56,50 +56,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;
     }
 }
 
@@ -113,7 +113,7 @@
 
 .mainView-propertiesDragger {
     //background-color: rgb(140, 139, 139);
-    background-color: lightgrey;
+    background-color: $light-gray;
     height: 55px;
     width: 17px;
     position: absolute;
@@ -163,10 +163,10 @@
         flex-direction: column;
         position: relative;
         height: 100%;
-        background: dimgray;
+        background: $medium-gray;
 
         .documentView-node-topmost {
-            background: lightgrey;
+            background: $light-gray;
         }
     }
 
@@ -174,32 +174,32 @@
         right: 0;
         position: absolute;
         z-index: 2;
-        background-color: rgb(159, 159, 159);
+        background-color: $medium-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 +209,17 @@
 }
 .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;
 
     .collectionStackingView {
         scrollbar-width: none;
@@ -233,13 +233,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 +247,7 @@
             border-radius: 8px;
 
             &:hover {
-                background: rgb(61, 61, 61);
+                background: $black;
                 cursor: pointer;
             }
         }