Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into schema_columns

1 files changed, 44 insertions, 55 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 38da3505e..37f4652a9 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,12 +1,21 @@
+@import "../global_variables";
 .collectionSchemaView-container {
-    border-style: solid;
+    border: 1px solid $intermediate-color;
+    border-radius: $border-radius;
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    .collectionSchemaView-content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+    }
     .collectionSchemaView-previewRegion {
         position: relative;
-        background: black;
+        background: $light-color;
         float: left;
         height: 100%;
     }
@@ -17,11 +26,13 @@
         z-index: 20;
         right: 0;
         top: 0;
-        background: Black;
+        background: $main-accent;
     }
     .collectionSchemaView-dividerDragger {
         position: relative;
-        background: black;
+        box-sizing: border-box;
+        border-left: 1px solid $intermediate-color;
+        border-right: 1px solid $intermediate-color;
         float: left;
         height: 100%;
     }
@@ -30,53 +41,14 @@
         float: left;
         height: 100%;
     }
-    .collectionSchemaView-addColumn {
-        position: absolute;
-        z-index: 20px;
-        right: 10px;
-        bottom: 10px;
-        input {
-            display: none;
-        }
-        label {
-            background: red;
-            display: inline-block;
-            border-radius: 18px;
-            font-size: 25px;
-            width: 36px;
-            height: 36px;
-            margin-right: 10px;
-            text-align: center;
-            cursor: pointer;
-        }
-        input:not(:checked)~.addColumn-options {
-            display: none;
-        }
-        .addColumn-options {
-            position: absolute;
-            right: 70px;
-            bottom: 0;
-            width: 150px;
-            background-color: white;
-            ul {
-                padding: 0;
-                margin: 0;
-            }
-            li {
-                padding: 6px;
-                border: 1px solid gray;
-                width: 100%;
-                margin: 0;
-            }
-        }
-    }
     .ReactTable {
         position: absolute; // display: inline-block;
         // overflow: auto;
         width: 100%;
         height: 100%;
-        background: white;
+        background: $light-color;
         box-sizing: border-box;
+        border: none !important;
         .rt-table {
             overflow-y: auto;
             overflow-x: auto;
@@ -94,8 +66,8 @@
             max-height: 44px;
         }
         .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
+            border-width: 1px;
+            border-right-color: $intermediate-color;
             .imageBox-cont {
                 position: relative;
                 max-height: 100%;
@@ -103,29 +75,38 @@
             .imageBox-cont img {
                 object-fit: contain;
                 max-width: 100%;
-                height: 100%
+                height: 100%;
+            }
+            .videobox-cont {
+                object-fit: contain;
+                width: auto;
+                height: 100%;
             }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
         }
     }
     .ReactTable .rt-thead.-header {
-        background: grey;
+        background: $intermediate-color;
+        color: $light-color;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        height: 30px;
+        padding-top: 4px;
     }
     .ReactTable .rt-th,
     .ReactTable .rt-td {
         max-height: 44;
         padding: 3px 7px;
+        font-size: 13px;
+        text-align: center;
     }
     .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
+        border-bottom: $intermediate-color;
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
     .documentView-node:first-child {
-        background: grey;
+        background: $light-color;
         .imageBox-cont img {
             object-fit: contain;
         }
@@ -239,4 +220,12 @@
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
+}
+
+.-even {
+    background: $light-color !important;
+}
+
+.-odd {
+    background: $light-color-secondary !important;
 }
\ No newline at end of file