Delete some CSS. (#4191)

mozilla-services · Mar 6, 2018 · 2146ffc · 2146ffc
1 parent 601d580
commit 2146ffc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
@@ -122,11 +122,31 @@ exports.Editor = class Editor extends React.Component {
 
   renderCanvas(color, toolBar) {
     return <div className="main-container">
-      <div className={`inverse-color-scheme canvas-container ${this.state.tool}`} id="canvas-container" ref={(canvasContainer) => this.canvasContainer = canvasContainer} style={{height: this.canvasHeight}}>
-        <canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ this.canvasHeight } width={ this.canvasWidth } style={{height: this.canvasHeight, width: this.canvasWidth}}></canvas>
-        <canvas className={`temp-highlighter centered ${color}`} id="highlighter" ref={(highlighter) => { this.highlighter = highlighter }} height={ this.canvasHeight } width={ this.canvasWidth }></canvas>
-        <canvas className="crop-tool centered" id="crop-tool" ref={(cropper) => { this.cropper = cropper }} height={this.canvasHeight} width={this.canvasWidth}></canvas>
-        <div className="crop-container centered" ref={(cropContainer) => this.cropContainer = cropContainer} style={{height: this.canvasHeight, width: this.canvasWidth}}></div>
+      <div
+        className={`inverse-color-scheme canvas-container ${this.state.tool}`}
+        id="canvas-container"
+        ref={(canvasContainer) => this.canvasContainer = canvasContainer}
+        style={{ height: this.canvasHeight, width: this.canvasWidth }}>
+        <canvas
+          className="image-holder"
+          id="image-holder"
+          ref={(image) => { this.imageCanvas = image }}
+          height={this.canvasHeight} width={this.canvasWidth}
+          style={{ height: this.canvasHeight, width: this.canvasWidth }}></canvas>
+        <canvas
+          className={`temp-highlighter ${color}`}
+          id="highlighter"
+          ref={(highlighter) => { this.highlighter = highlighter }}
+          height={this.canvasHeight} width={this.canvasWidth}></canvas>
+        <canvas
+          className="crop-tool"
+          id="crop-tool"
+          ref={(cropper) => { this.cropper = cropper }}
+          height={this.canvasHeight} width={this.canvasWidth}></canvas>
+        <div
+          className="crop-container"
+          ref={(cropContainer) => this.cropContainer = cropContainer}
+          style={{ height: this.canvasHeight, width: this.canvasWidth }}></div>
       </div>
     </div>
   }

diff --git a/static/css/frame.scss b/static/css/frame.scss
@@ -484,29 +484,19 @@ body {
 }
 
 .main-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
+  margin-top: $grid-unit * 5;
   position: relative;
-  flex: 1;
   z-index: 1;
-  margin-top: $grid-unit * 5;
 
   @include respond-to("small") {
     top: $grid-unit * 4;
   }
 }
 
 .canvas-container {
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 auto;
-  margin: 20px auto;
-  max-width: 90%;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  margin: 20px auto;
+  z-index: 9999;
 
   &.pen {
     cursor: url("../img/cursor-pen.png"), auto;