Merge branch 'master' into temporalmedia-mehek

17 files changed, 133 insertions, 134 deletions

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index f4736eb29..a054f0ae1 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,4 +1,4 @@
-@import "../../views/globalCssVariables.scss";
+@import "../../views/global/globalCssVariables.scss";
 
 
 .lm_title {
@@ -110,7 +110,7 @@
     }
 
     .flexlayout__splitter {
-        background-color: black;
+        background-color: $dark-gray;
     }
 
     .flexlayout__splitter:hover {
@@ -179,7 +179,7 @@
         position: absolute;
         box-sizing: border-box;
         background-color: #222;
-        color: black;
+        color: $dark-gray;
     }
 
     .flexlayout__tab_button {
@@ -268,7 +268,7 @@
     }
 
     .flexlayout__tab_header_outer {
-        background-color: black;
+        background-color: $dark-gray;
         position: absolute;
         left: 0;
         right: 0;
@@ -332,28 +332,28 @@
     }
 
     .flexlayout__border_top {
-        background-color: black;
+        background-color: $dark-gray;
         border-bottom: 1px solid #ddd;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_bottom {
-        background-color: black;
+        background-color: $dark-gray;
         border-top: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_left {
-        background-color: black;
+        background-color: $dark-gray;
         border-right: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_right {
-        background-color: black;
+        background-color: $dark-gray;
         border-left: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index ca72b98a5..ec8805907 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 @import "../_nodeModuleOverrides";
 
 .collectionLinearView-outer {
@@ -12,8 +12,8 @@
         align-items: center;
 
         >span {
-            background: $dark-color;
-            color: $light-color;
+            background: $dark-gray;
+            color: $white;
             border-radius: 18px;
             margin-right: 6px;
             cursor: pointer;
@@ -63,8 +63,8 @@
         >label {
             margin-top: "auto";
             margin-bottom: "auto";
-            background: $dark-color;
-            color: $light-color;
+            background: $dark-gray;
+            color: $white;
             display: inline-block;
             border-radius: 18px;
             font-size: 12.5px;
@@ -82,7 +82,7 @@
         }
 
         label:hover {
-            background: $main-accent;
+            background: $medium-gray;
             transform: scale(1.15);
         }
 
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index dc5231a3a..c0fc774d3 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -1,5 +1,4 @@
-@import "../globalCssVariables";
-
+@import "../global/globalCssVariables";
 
 .collectionMenu-cont {
     position: relative;
@@ -8,8 +7,8 @@
     opacity: 0.9;
     z-index: 901;
     transition: top .5s;
-    background: #323232;
-    color: white;
+    background: $dark-gray;
+    color: $white;
     transform-origin: top left;
     top: 0;
     width: 100%;
@@ -18,7 +17,7 @@
         border-radius: 100%;
         width: 18px;
         height: 18px;
-        border: solid 1px #f5f5f5;
+        border: solid 1px $white;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -28,7 +27,7 @@
         border-radius: 100%;
         width: 70%;
         height: 70%;
-        background: white;
+        background: $white;
     }
 
     .collectionMenu {
@@ -43,7 +42,7 @@
             margin-left: 3px;
             margin-right: 3px;
             width: 1.5px;
-            background-color: #656060;
+            background-color: $medium-gray;
         }
 
         .collectionViewBaseChrome {
@@ -51,11 +50,11 @@
             align-items: center;
 
             .collectionViewBaseChrome-viewPicker {
-                font-size: 75%;
-                outline-color: black;
-                color: white;
+                font-size: $small-text;
+                outline-color: $black;
+                color: $white;
                 border: none;
-                background: #323232;               
+                background: $dark-gray;               
             }
 
             .collectionViewBaseChrome-viewPicker:focus {
@@ -64,16 +63,16 @@
             }
 
             .collectionViewBaseChrome-viewPicker:active {
-                outline-color: black;
+                outline-color: $black;
             }
 
             .collectionViewBaseChrome-button {
-                font-size: 75%;
+                font-size: $small-text;
                 text-transform: uppercase;
                 letter-spacing: 2px;
-                background: rgb(238, 238, 238);
-                color: purple;
-                outline-color: black;
+                background: $white;
+                color: $pink;
+                outline-color: $black;
                 border: none;
                 padding: 12px 10px 11px 10px;
                 margin-left: 10px;
@@ -82,11 +81,11 @@
             .collectionViewBaseChrome-cmdPicker {
                 margin-left: 3px;
                 margin-right: 0px;
-                font-size: 75%;
+                font-size: $small-text;
                 text-transform: capitalize;
-                color: white;
+                color: $white;
                 border: none;
-                background: #323232;     
+                background: $dark-gray;     
             }
 
             .collectionViewBaseChrome-cmdPicker:focus {
@@ -105,7 +104,7 @@
                 overflow: hidden;
 
                 .commandEntry-drop {
-                    color: white;
+                    color: $white;
                     width: 30px;
                     margin-top: auto;
                     margin-bottom: auto;
@@ -113,11 +112,11 @@
             }
 
             .commandEntry-outerDiv:hover{
-                background-color: rgba(0,0,0,0.2);
+                background-color: $drop-shadow;
 
                 .collectionViewBaseChrome-viewPicker,
                 .collectionViewBaseChrome-cmdPicker{
-                    background: rgb(41,41,41);
+                    background: $dark-gray;
                 }
             }
 
@@ -142,7 +141,7 @@
                 height: 100%;
                 display: flex;
                 background: transparent;
-                color: grey;
+                color: $medium-gray;
                 justify-content: center;
             }
 
@@ -150,31 +149,31 @@
                 margin-left: 5px;
                 display: grid;
                 border: none;
-                border-right: solid gray 1px;
+                border-right: solid $medium-gray 1px;
 
                 .collectionViewBaseChrome-filterIcon {
                     position: relative;
                     display: flex;
                     margin: auto;
-                    background: #323232;
-                    color: white;
+                    background: $dark-gray;
+                    color: $white;
                     width: 30px;
                     height: 30px;
                     align-items: center;
                     justify-content: center;
                     border: none;
-                    border-right: solid gray 1px;
+                    border-right: solid $medium-gray 1px;
                 }
 
                 .collectionViewBaseChrome-viewSpecsInput {
                     padding: 12px 10px 11px 10px;
                     border: 0px;
-                    color: grey;
+                    color: $medium-gray;
                     text-align: center;
                     letter-spacing: 2px;
-                    outline-color: black;
-                    font-size: 75%;
-                    background: rgb(238, 238, 238);
+                    outline-color: $black;
+                    font-size: $small-text;
+                    background: $white;
                     height: 100%;
                     width: 75px;
                 }
@@ -187,8 +186,8 @@
                     z-index: 100;
                     display: flex;
                     flex-direction: column;
-                    background: rgb(238, 238, 238);
-                    box-shadow: grey 2px 2px 4px;
+                    background: $white;
+                    box-shadow: $medium-gray 2px 2px 4px;
 
                     .qs-datepicker {
                         left: unset;
@@ -204,13 +203,13 @@
                         .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
                         .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
                         .collectionViewBaseChrome-viewSpecsMenu-rowRight {
-                            font-size: 75%;
+                            font-size: $small-text;
                             letter-spacing: 2px;
-                            color: grey;
+                            color: $medium-gray;
                             margin-left: 10px;
                             padding: 5px;
                             border: none;
-                            outline-color: black;
+                            outline-color: $black;
                         }
                     }
 
@@ -236,19 +235,19 @@
             margin-left: 10;
 
             .collectionGridViewChrome-viewPicker {
-                font-size: 75%;
+                font-size: $small-text;
                 //text-transform: uppercase;
                 //letter-spacing: 2px;
-                background: #121721;
-                color: white;
-                outline-color: black;
-                color: white;
+                background: $dark-gray;
+                color: $white;
+                outline-color: $black;
+                color: $white;
                 border: none;
-                border-right: solid gray 1px;
+                border-right: solid $medium-gray 1px;
             }
 
             .collectionGridViewChrome-viewPicker:active {
-                outline-color: black;
+                outline-color: $black;
             }
 
             .grid-control {
@@ -268,11 +267,11 @@
 
                 .collectionGridViewChrome-entryBox {
                     width: 50%;
-                    color: black;
+                    color: $black;
                 }
 
                 .collectionGridViewChrome-columnButton {
-                    color: black;
+                    color: $black;
                 }
             }
         }
@@ -302,7 +301,7 @@
             align-items: center;
             display: flex;
             grid-auto-columns: auto;
-            font-size: 75%;
+            font-size: $small-text;
             letter-spacing: 2px;
 
             .collectionStackingViewChrome-pivotField-label,
@@ -311,7 +310,7 @@
                 grid-column: 1;
                 margin-right: 7px;
                 user-select: none;
-                font-family: 'Roboto';
+                font-family: $sans-serif;
                 letter-spacing: normal;
             }
 
@@ -329,13 +328,13 @@
             }
 
             .collectionStackingViewChrome-sortIcon:hover {
-                background-color: rgba(0,0,0,0.2);
+                background-color: $drop-shadow;
             }
 
             .collectionStackingViewChrome-pivotField,
             .collectionTreeViewChrome-pivotField,
             .collection3DCarouselViewChrome-scrollSpeed {
-                color: white;
+                color: $white;
                 grid-column: 2;
                 grid-row: 1;
                 width: 90%;
@@ -344,7 +343,7 @@
                 height: 80%;
                 border-radius: 7px;
                 align-items: center;
-                background: #eeeeee;
+                background: $white;
 
                 .editable-view-input,
                 input,
@@ -352,16 +351,16 @@
                 .editableView-container-editing {
                     margin: auto;
                     border: 0px;
-                    color: grey !important;
+                    color: $light-gray !important;
                     text-align: center;
                     letter-spacing: 2px;
-                    outline-color: black;
+                    outline-color: $black;
                     height: 100%;
                 }
 
                 .react-autosuggest__container {
                     margin: 0;
-                    color: grey;
+                    color: $medium-gray;
                     padding: 0px;
                 }
             }
@@ -407,11 +406,11 @@
             }
 
             .switchToText {
-                color: $main-accent;
+                color: $medium-gray;
             }
 
             .switchToText:hover {
-                color: $dark-color;
+                color: $dark-gray;
             }
         }
 
@@ -424,11 +423,11 @@
 .collectionMenu-urlInput {
     padding: 12px 10px 11px 10px;
     border: 0px;
-    color: black;
-    font-size: 10px;
+    color: $black;
+    font-size: $small-text;
     letter-spacing: 2px;
-    outline-color: black;
-    background: rgb(238, 238, 238);
+    outline-color: $black;
+    background: $white;
     width: 100%;
     min-width: 350px;
     margin-right: 10px;
@@ -477,10 +476,10 @@
         width: 20;
         height: 30;
         bottom: 0;
-        background: #323232;
+        background: $dark-gray;
         display: inline-flex;
         align-items: center;
-        color: white;
+        color: $white;
     }
 
     .backKeyframe {
@@ -502,13 +501,13 @@
             margin: auto;
         }
 
-        border-right: solid gray 1px;
+        border-right: solid $medium-gray 1px;
     }
 }
 
 .collectionSchemaViewChrome-cont {
     display: flex;
-    font-size: 10.5px;
+    font-size: $small-text;
 
     .collectionSchemaViewChrome-toggle {
         display: flex;
@@ -527,19 +526,19 @@
     .collectionSchemaViewChrome-toggler {
         width: 100px;
         height: 35px;
-        background-color: black;
+        background-color: $black;
         position: relative;
     }
 
     .collectionSchemaViewChrome-togglerButton {
         width: 47px;
         height: 30px;
-        background-color: $light-color-secondary;
+        background-color: $light-gray;
         // position: absolute;
         transition: all 0.5s ease;
         // top: 3px;
         margin-top: 3px;
-        color: gray;
+        color: $medium-gray;
         letter-spacing: 2px;
         text-transform: uppercase;
         display: flex;
@@ -579,7 +578,7 @@
 }
 
 .react-autosuggest__input {
-    border: 1px solid #aaa;
+    border: 1px solid $light-gray;
     border-radius: 4px;
     width: 100%;
 }
@@ -603,11 +602,11 @@
     overflow-y: auto;
     max-height: 400px;
     width: 180px;
-    border: 1px solid #aaa;
-    background-color: #fff;
-    font-family: Helvetica, sans-serif;
+    border: 1px solid $light-gray;
+    background-color: $white;
+    font-family: $sans-serif;
     font-weight: 300;
-    font-size: 16px;
+    font-size: $large-header;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     z-index: 2;
@@ -625,5 +624,5 @@
 }
 
 .react-autosuggest__suggestion--highlighted {
-    background-color: #ddd;
+    background-color: $light-gray;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 8f2847139..e1e04915a 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -11,12 +11,13 @@ import { listSpec } from "../../../fields/Schema";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { Cast, NumCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, emptyPath, returnFalse, setupMoveUpEvents, returnEmptyDoclist, returnTrue } from "../../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils";
+import { DocUtils } from "../../documents/Documents";
 import { SelectionManager } from "../../util/SelectionManager";
 import { SnappingManager } from "../../util/SnappingManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import '../DocumentDecorations.scss';
@@ -24,8 +25,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { DefaultStyleProvider } from "../StyleProvider";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { SchemaTable } from "./SchemaTable";
-import { DocUtils } from "../../documents/Documents";
+import { SchemaTable } from "../collections/collectionSchema/SchemaTable";
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 export enum ColumnType {
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 9f56a0c0e..4b123c8b6 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionMasonryView {
     display: inline;
@@ -96,8 +96,8 @@
         height: 2vw;
         width: 100%;
         font-family: $sans-serif;
-        background: $dark-color;
-        color: $light-color;
+        background: $dark-gray;
+        color: $white;
     }
 
     .collectionStackingView-columnDragger {
@@ -128,7 +128,7 @@
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 2px;
-        background: $main-accent;
+        background: $medium-gray;
         height: 5px;
 
         &.active {
@@ -180,11 +180,11 @@
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin: auto;
-        background: $main-accent;
+        background: $medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
-            color: black;
+            color: $dark-gray;
         }
 
         .editableView-input:hover,
@@ -205,7 +205,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: black;
+            color: $dark-gray;
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 30f8e0112..7aa8dfd56 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -480,7 +480,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         if (value && this.columnHeaders) {
             const schemaHdrField = new SchemaHeaderField(value);
             this.columnHeaders.push(schemaHdrField);
-            DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: schemaHdrField.color }]);
+            DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]);
             return true;
         }
         return false;
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 72ab51784..ec461ab94 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionTreeView-dropTarget {
     border-width: $COLLECTION_BORDER_WIDTH;
@@ -12,7 +12,7 @@
     top: 0;
     padding-left: 10px;
     padding-right: 10px;
-    background: $light-color-secondary;
+    background: $light-gray;
     font-size: 13px;
     overflow: auto;
     user-select: none;
@@ -40,7 +40,7 @@
     }
 
     .delete-button {
-        color: $intermediate-color;
+        color: $medium-gray;
         // float: right;
         margin-left: 15px;
         // margin-top: 3px;
@@ -71,7 +71,7 @@
 .collectionTreeView-subtitle {
     font-style: italic;
     font-size: 8pt;
-    color: $intermediate-color;
+    color: $medium-gray;
 }
 
 .docContainer {
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss
index a5aef86de..5db489c0a 100644
--- a/src/client/views/collections/CollectionView.scss
+++ b/src/client/views/collections/CollectionView.scss
@@ -1,8 +1,8 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionView {
     border-width: 0;
-    border-color: $light-color-secondary;
+    border-color: $light-gray;
     border-style: solid;
     border-radius: 0 0 $border-radius $border-radius;
     box-sizing: border-box;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 3f6fc8b0c..1ebc5873e 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .treeView-label {
     max-height: 1.5em;
@@ -14,7 +14,7 @@
     .bullet-outline {
         position: relative;
         width: $TREE_BULLET_WIDTH;
-        color: $intermediate-color;
+        color: $medium-gray;
         transform: scale(0.5);
         display: inline-flex;
         align-items: center;
@@ -45,7 +45,7 @@
     .bullet {
         position: relative;
         width: $TREE_BULLET_WIDTH;
-        color: $intermediate-color;
+        color: $medium-gray;
         margin-top: 3px;
         transform: scale(1.3, 1.3);
         border: #80808030 1px solid;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index c1125c233..401bdcb02 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -20,7 +20,7 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
 import { EditableView } from "../EditableView";
-import { TREE_BULLET_WIDTH } from '../globalCssVariables.scss';
+import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss';
 import { DocumentView, DocumentViewProps, StyleProviderFunc, DocumentViewInternal } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
index c5b8fc5e8..5fa01b102 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "global/globalCssVariables";
 
 .collectionFreeFormRemoteCursors-cont {
     
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index eb0538c41..79e063f7f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
 
 .collectionfreeformview-none {
     position: inherit;
@@ -226,7 +226,7 @@
     //   linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
     // background-size: 30px 30px;
     // }
-    border: 0px solid $light-color-secondary;
+    border: 0px solid $light-gray;
     border-radius: inherit;
     box-sizing: border-box;
     position: absolute;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index accb80c5a..a4e310e6c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -28,7 +28,7 @@ import { SelectionManager } from "../../../util/SelectionManager";
 import { SnappingManager } from "../../../util/SnappingManager";
 import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
+import { COLLECTION_BORDER_WIDTH } from "../../../views/global/globalCssVariables.scss";
 import { Timeline } from "../../animationtimeline/Timeline";
 import { ContextMenu } from "../../ContextMenu";
 import { DocumentDecorations } from "../../DocumentDecorations";
@@ -834,10 +834,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 map(doc => ({ ...this.childDataProvider(doc, ""), ...this.childSizeProvider(doc, "") }));
             if (measuredDocs.length) {
                 const ranges = measuredDocs.reduce(({ xrange, yrange }, { x, y, width, height }) =>  // computes range of content
-                    ({
-                        xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) },
-                        yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) }
-                    })
+                ({
+                    xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) },
+                    yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) }
+                })
                     , {
                         xrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE },
                         yrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
index f75179cea..90f64f163 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
@@ -26,7 +26,7 @@ import { SnappingManager } from "../../../util/SnappingManager";
 import { undoBatch } from "../../../util/UndoManager";
 import '../../../views/DocumentDecorations.scss';
 import { EditableView } from "../../EditableView";
-import { MAX_ROW_HEIGHT } from '../../globalCssVariables.scss';
+import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss';
 import { DocumentIconContainer } from "../../nodes/DocumentIcon";
 import { OverlayView } from "../../OverlayView";
 import "./CollectionSchemaView.scss";
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index b57fee0e4..40cdcd14b 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -1,7 +1,7 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables.scss";
 .collectionSchemaView-container {
     border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $intermediate-color;
+    border-color: $medium-gray;
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
@@ -33,13 +33,13 @@
         cursor: col-resize;
     }
     // .documentView-node:first-child {
-    //     background: $light-color;
+    //     background: $white;
     // }
 }
 
 .collectionSchemaView-searchContainer {
     border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $intermediate-color;
+    border-color: $medium-gray;
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
@@ -72,7 +72,7 @@
         cursor: col-resize;
     }
     // .documentView-node:first-child {
-    //     background: $light-color;
+    //     background: $white;
     // }
 }
 
@@ -245,7 +245,7 @@ button.add-column {
         }
     }
     label {
-        color: $main-accent;
+        color: $medium-gray;
         font-weight: normal;
         letter-spacing: 2px;
         text-transform: uppercase;
@@ -260,11 +260,11 @@ button.add-column {
         background-color: white;
         transition: background-color 0.2s;
         &:hover {
-            background-color: $light-color-secondary;
+            background-color: $light-gray;
         }
         &.active {
             font-weight: bold;
-            border: 2px solid $light-color-secondary;
+            border: 2px solid $light-gray;
         }
         svg {
             color: gray;
@@ -277,7 +277,7 @@ button.add-column {
         //width: 100%;
         background-color: white;
         input {
-            border: 2px solid $light-color-secondary;
+            border: 2px solid $light-gray;
             padding: 3px;
             height: 28px;
             font-weight: bold;
@@ -303,7 +303,7 @@ button.add-column {
                     border-top: 0;
                 }
                 &:hover {
-                    background-color: $light-color-secondary;
+                    background-color: $light-gray;
                 }
             }
         }
@@ -329,7 +329,7 @@ button.add-column {
     height: 100%;
     background-color: white;
     &.row-focused .rt-td {
-        background-color: #bfffc0; //$light-color-secondary;
+        background-color: #bfffc0; //$light-gray;
     }
     &.row-wrapped {
         .rt-td {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ef28f75c8..585cda729 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -11,21 +11,21 @@ import { listSpec } from "../../../../fields/Schema";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../../fields/SchemaHeaderField";
 import { Cast, NumCast } from "../../../../fields/Types";
 import { TraceMobx } from "../../../../fields/util";
-import { emptyFunction, emptyPath, returnFalse, setupMoveUpEvents, returnEmptyDoclist, returnTrue } from "../../../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
+import { DocUtils } from "../../../documents/Documents";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { SnappingManager } from "../../../util/SnappingManager";
 import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../globalCssVariables.scss';
+import '../../../views/DocumentDecorations.scss';
 import { ContextMenu } from "../../ContextMenu";
 import { ContextMenuProps } from "../../ContextMenuItem";
-import '../../../views/DocumentDecorations.scss';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
 import { DocumentView } from "../../nodes/DocumentView";
 import { DefaultStyleProvider } from "../../StyleProvider";
-import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "../CollectionSubView";
+import "./CollectionSchemaView.scss";
 import { SchemaTable } from "./SchemaTable";
-import { DocUtils } from "../../../documents/Documents";
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 export enum ColumnType {
diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx
index 0d5c9e077..de08c327a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTable.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx
@@ -21,7 +21,7 @@ import { DocumentType } from "../../../documents/DocumentTypes";
 import { CompileScript, Transformer, ts } from "../../../util/Scripting";
 import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../globalCssVariables.scss';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
 import { ContextMenu } from "../../ContextMenu";
 import '../../../views/DocumentDecorations.scss';
 import { DocumentView } from "../../nodes/DocumentView";