annotation ui update

server/src/pages/shot/editor.js

@@ -31,7 +31,7 @@ exports.Editor = class Editor extends React.Component {
           <button className="button secondary cancel" id="cancel" onClick={this.onClickCancel.bind(this)}>Cancel</button>
         </div>
       </div>
-      <div className="main-container">
+      <div className="main-container inverse-color-scheme">
         <div className="canvas-container" id="canvas-container" ref={(canvasContainer) => this.canvasContainer = canvasContainer}>
           <canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ canvasHeight } width={ canvasWidth } style={{height: canvasHeight, width: canvasWidth}}></canvas>
           <canvas className="highlighter centered" id="highlighter" ref={(highlighter) => { this.highlighter = highlighter }} height={canvasHeight} width={canvasWidth}></canvas>

static/css/frame.scss

@@ -303,6 +303,7 @@ body {
 
   @include respond-to("small") {
     @include flex-container(row, space-between, stretch, wrap);
+    height: $grid-unit * 7;
   }
   z-index: 9999;
   width: 100%;
@@ -311,7 +312,6 @@ body {
   left: 0;
   height: $grid-unit * 5;
   align-items: center;
-  background: #f9f9fa;
 
   .button {
     margin: $grid-unit * 0.25;
@@ -337,16 +337,17 @@ body {
 }
 
 .annotation-actions {
-  justify-content: center;
   overflow: visible;
   @include respond-to("small") {
+    justify-content: center;
     background: none;
     border-bottom: none;
     border-top: none;
   }
 }
 
 .annotation-tools {
+  margin-left: $grid-unit;
   display: flex;
   flex-direction: row;
   background: #fff;
@@ -369,12 +370,16 @@ body {
 .main-container {
   z-index: 9990;
   position: absolute;
-  top: $grid-unit * 5;
+  top: $grid-unit * 2;
+  overflow: auto;
   left: 0;
-  height: calc(100% - 100px);
+  height: 100%;
   width: 100%;
-  background-color: #f9f9fa;
   text-align: center;
+
+  @include respond-to("small") {
+    top: $grid-unit * 4;
+  }
 }
 
 .canvas-container .editor {