added some flair to freeform views

12 files changed, 248 insertions, 225 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ecb3cc8c8..3565a929a 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -3,7 +3,7 @@
   position: absolute;
   display: flex;
   z-index: 1000;
-  box-shadow: #aaaaaa 0.2vw 0.2vw 0.4vw;
+  box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
   flex-direction: column;
 }
 
@@ -23,7 +23,7 @@
   transition: all 0.1s;
   border-width: 0.11px;
   border-style: none;
-  border-color: #aaaaaa;
+  border-color: $intermediate-color;
   border-bottom-style: solid;
   padding: 10px;
   white-space: nowrap;
@@ -32,7 +32,7 @@
 
 .contextMenu-item:hover {
   transition: all 0.1s;
-  background: $alt-accent;
+  background: $lighter-alt-accent;
 }
 
 .contextMenu-description {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index dc8c3a0cc..722980019 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -3,8 +3,8 @@
   position: absolute;
   display: grid;
   z-index: 1000;
-  grid-template-rows: 10px 1fr 10px;
-  grid-template-columns: 10px 1fr 10px;
+  grid-template-rows: 8px 1fr 8px;
+  grid-template-columns: 8px 1fr 8px;
   pointer-events: none;
   #documentDecorations-centerCont {
     background: none;
@@ -12,7 +12,7 @@
   .documentDecorations-resizer {
     pointer-events: auto;
     background: $alt-accent;
-    opacity: 0.4;
+    opacity: 0.8;
   }
   #documentDecorations-topLeftResizer,
   #documentDecorations-bottomRightResizer {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 36395ed0d..406d6a234 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -11,6 +11,7 @@ export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
+    private _resizeBorderWidth = 16;
     @observable private _hidden = false;
 
     constructor(props: Readonly<{}>) {
@@ -149,10 +150,10 @@ export class DocumentDecorations extends React.Component {
         }
         return (
             <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 20) + "px",
-                height: (bounds.b - bounds.y + 20) + "px",
-                left: bounds.x - 10,
-                top: bounds.y - 10,
+                width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                left: bounds.x - this._resizeBorderWidth / 2,
+                top: bounds.y - this._resizeBorderWidth / 2,
             }}>
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 929fb42a1..fc6a266e4 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -49,7 +49,7 @@ export class InkingControl extends React.Component {
 
     selected = (tool: InkTool) => {
         if (this._selectedTool === tool) {
-            return { backgroundColor: "black", color: "white" }
+            return { backgroundColor: "#61aaa3", color: "white" }
         }
         return {}
     }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 89a9e1bd1..3e2ab6ff7 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -10,6 +10,16 @@ body {
   margin: 0;
 }
 
+#dash-title {
+  position: absolute;
+  right: 46.5%;
+  letter-spacing: 3px;
+  top: 9px;
+  font-size: 12px;
+  color: $alt-accent;
+  z-index: 9999;
+}
+
 h1 {
   font-size: 50px;
   position: fixed;
@@ -65,7 +75,7 @@ button:hover {
 
 .clear-db-button {
   position: absolute;
-  left: 47%;
+  right: 45%;
   bottom: 1em;
   font-size: 50%;
 }
@@ -119,7 +129,7 @@ button:hover {
     height: 36px;
     margin-right: 10px;
     cursor: pointer;
-    transition: transform 0.5s;
+    transition: transform 0.2s;
   }
   label p {
     padding-left: 10.5px;
@@ -127,6 +137,7 @@ button:hover {
   }
   label:hover {
     background: $main-accent;
+    transform: scale(1.15);
   }
   input {
     display: none;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 38a3d4b69..1caaa1cba 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -100,6 +100,8 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
     ReactDOM.render((
         <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+            <div id="dash-title">— DASH —</div>
+
             <DocumentView Document={mainContainer}
                 AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
                 ContentScaling={() => 1}
diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss
index c91000bf0..333fb3122 100644
--- a/src/client/views/_global_variables.scss
+++ b/src/client/views/_global_variables.scss
@@ -4,7 +4,8 @@
 $light-color: #fcfbf7;
 $light-color-secondary: rgb(241, 239, 235);
 $main-accent: #61aaa3;
-$alt-accent: #afcbff;
+$alt-accent: #cdd5ec;
+$lighter-alt-accent: rgb(207, 220, 240);
 $intermediate-color: #9c9396;
 $dark-color: #121721;
 
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 4d0619c54..90caa0d14 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -7,7 +7,15 @@
     width: 100%;
   }
 
-  border-style: solid;
+  //nested freeform views
+  .collectionfreeformview-container {
+    background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
+      linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
+    background-size: 30px 30px;
+  }
+
+  border: 0px solid $light-color-secondary;
+  border-radius: $border-radius;
   box-sizing: border-box;
   position: relative;
   top: 0;
@@ -15,6 +23,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
   .collectionfreeformview {
     position: absolute;
     top: 0;
@@ -32,7 +41,7 @@
     background: $light-color-secondary;
   }
 
-  border-style: solid;
+  border: 0px solid $intermediate-color;
   border-radius: $border-radius;
   box-sizing: border-box;
   position: absolute;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d40e6d314..2fd4a2df0 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,185 +1,140 @@
-
-
 .collectionSchemaView-container {
-    border-style: solid;
-    box-sizing: border-box;
+  border-style: solid;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  .collectionSchemaView-previewRegion {
+    position: relative;
+    background: black;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-previewHandle {
     position: absolute;
+    height: 37px;
+    width: 20px;
+    z-index: 20;
+    right: 0;
+    top: 0;
+    background: Black;
+  }
+  .collectionSchemaView-dividerDragger {
+    position: relative;
+    background: black;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-tableContainer {
+    position: relative;
+    float: left;
+    height: 100%;
+  }
+
+  .ReactTable {
+    position: absolute;
+    // display: inline-block;
+    // overflow: auto;
     width: 100%;
     height: 100%;
-    .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    .collectionSchemaView-previewHandle {
-        position: absolute;
-        height: 37px;
-        width: 20px; 
-        z-index: 20; 
-        right: 0; 
-        top: 0; 
-        background: Black ;
-    }
-    .collectionSchemaView-dividerDragger{
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    .collectionSchemaView-tableContainer {
-        position: relative;
-        float: left;
-        height: 100%; 
-    }
+    background: white;
+    box-sizing: border-box;
+    .rt-table {
+      overflow-y: auto;
+      overflow-x: auto;
+      height: 100%;
 
-    .ReactTable {
-        position: absolute;
-       // display: inline-block;
-       // overflow: auto;
-        width: 100%;
+      display: -webkit-inline-box;
+      direction: ltr;
+      // direction:rtl;
+      // display:block;
+    }
+    .rt-tbody {
+      //direction: ltr;
+      direction: rtl;
+    }
+    .rt-tr-group {
+      direction: ltr;
+      max-height: 44px;
+    }
+    .rt-td {
+      border-width: 1;
+      border-right-color: #aaa;
+      .imageBox-cont {
+        position: relative;
+        max-height: 100%;
+      }
+      .imageBox-cont img {
+        object-fit: contain;
+        max-width: 100%;
         height: 100%;
-        background: white;
-        box-sizing: border-box;
-        .rt-table {
-            overflow-y: auto;
-            overflow-x: auto;
-            height: 100%;
-
-            display: -webkit-inline-box;
-            direction: ltr;
-            // direction:rtl;
-            // display:block;
-        }
-        .rt-tbody {
-            //direction: ltr;
-            direction: rtl;
-        }
-        .rt-tr-group {
-            direction: ltr;
-            max-height: 44px;
-        }
-        .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
-            .imageBox-cont {
-                position:relative;
-                max-height:100%;
-            }
-            .imageBox-cont img {
-                object-fit: contain;
-                max-width: 100%;
-                height: 100%
-            }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
-        }
-    }
-    .ReactTable .rt-thead.-header {
-            background:grey;
-        }
-    .ReactTable .rt-th, .ReactTable .rt-td {
-        max-height: 44;
-        padding: 3px 7px;
-    }
-    .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
-        border-bottom-style: solid;
-        border-bottom-width: 1;
-    }
-    .documentView-node:first-child {
-        background: grey;
-        .imageBox-cont img {
-            object-fit: contain;
-        }
-    }
+      }
+    }
+    .rt-tr-group {
+      border-width: 1;
+      border-bottom-color: #aaa;
+    }
+  }
+  .ReactTable .rt-thead.-header {
+    background: grey;
+  }
+  .ReactTable .rt-th,
+  .ReactTable .rt-td {
+    max-height: 44;
+    padding: 3px 7px;
+  }
+  .ReactTable .rt-tbody .rt-tr-group:last-child {
+    border-bottom: grey;
+    border-bottom-style: solid;
+    border-bottom-width: 1;
+  }
+  .documentView-node:first-child {
+    background: grey;
+    .imageBox-cont img {
+      object-fit: contain;
+    }
+  }
 }
 
 .Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
+  box-sizing: border-box;
+  background: #000;
+  opacity: 0.5;
+  z-index: 1;
+  background-clip: padding-box;
+  &.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
     &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
+      border-top: 5px solid rgba(0, 0, 0, 0.5);
+      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+    &:hover {
+      border-left: 5px solid rgba(0, 0, 0, 0.5);
+      border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
 }
 
 .vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.parent {
-    width: 100%;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
+  section {
+    width: 100vh;
+    height: 100vh;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -189,19 +144,63 @@
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.horizontal {
+  section {
+    width: 100vh;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.parent {
+  width: 100%;
+  height: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
+  background: #aaa;
+  height: 3rem;
+  line-height: 3rem;
 }
 
 .wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
\ No newline at end of file
+  background: #ffa;
+  margin: 5rem;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 5797fde45..85a115f1c 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,23 +1,23 @@
 @import "../global_variables";
 .documentView-node {
-    position: absolute;
-    background: $light-color; //overflow: hidden;
-    &.minimized {
-        width: 30px;
-        height: 30px;
-    }
-    .top {
-        background: #232323;
-        height: 20px;
-        cursor: pointer;
-    }
-    .content {
-        padding: 20px 20px;
-        height: auto;
-        box-sizing: border-box;
-    }
-    .scroll-box {
-        overflow-y: scroll;
-        height: calc(100% - 20px);
-    }
-}
\ No newline at end of file
+  position: absolute;
+  background: $light-color; //overflow: hidden;
+  &.minimized {
+    width: 30px;
+    height: 30px;
+  }
+  .top {
+    background: #232323;
+    height: 20px;
+    cursor: pointer;
+  }
+  .content {
+    padding: 20px 20px;
+    height: auto;
+    box-sizing: border-box;
+  }
+  .scroll-box {
+    overflow-y: scroll;
+    height: calc(100% - 20px);
+  }
+}
diff --git a/src/client/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
index b6ce2fabc..d2cd61b0d 100644
--- a/src/client/views/nodes/FieldTextBox.scss
+++ b/src/client/views/nodes/FieldTextBox.scss
@@ -1,14 +1,14 @@
 .ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
+  margin-top: -1em;
+  width: 100%;
+  height: 100%;
 }
 
 .ProseMirror:focus {
-    outline: none !important
+  outline: none !important;
 }
 
 .fieldTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
+  background: white;
+  padding: 1vw;
+}
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 1b10cfff7..32da2632e 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -12,8 +12,8 @@
 
 .formattedTextBox-cont {
   background: $light-color-secondary;
-  padding: 0.7em;
-  border-width: 1px;
+  padding: 0.9em;
+  border-width: 0px;
   border-radius: $border-radius;
   border-color: $intermediate-color;
   box-sizing: border-box;