fix modal transition

Author: samuelcolvin

src/components/shared/Modal.js

@@ -42,20 +42,18 @@ class Modal extends Component {
 
   render () {
     return (
-      <div className={'tcs-modal-trans' + (this.state.show ? ' show' : '')}>
-        <div className="tcs-modal-mask" onClick={this.close}>
-          <div className="tcs-modal" onClick={e => e.stopPropagation()}>
-            <div className="tcs-header">
-              <h2>{this.props.title}</h2>
-              <div className="close" onClick={this.close}>
-                <Cross/>
-              </div>
+      <div className={'tcs-modal-mask' + (this.state.show ? ' show' : '')} onClick={this.close}>
+        <div className="tcs-modal" onClick={e => e.stopPropagation()}>
+          <div className="tcs-header">
+            <h2>{this.props.title}</h2>
+            <div className="close" onClick={this.close}>
+              <Cross/>
             </div>
+          </div>
 
-            {this.props.children}
+          {this.props.children}
 
-            <Footer/>
-          </div>
+          <Footer/>
         </div>
       </div>
     )

src/styles/modal.scss

@@ -1,15 +1,5 @@
 @import '../conf';
 
-.tcs-modal-mask {
-  position: fixed;
-  z-index: 9998;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba($back-colour, $back-colour, $back-colour, .6);
-}
-
 .tcs-modal {
   max-width: 900px;
   box-sizing: border-box;
@@ -22,6 +12,26 @@
     margin: 10px 4px 0;
     padding: 10px;
   }
+  transition: all .3s ease;
+  transform: translate(0, 40px);
+}
+
+.tcs-modal-mask {
+  position: fixed;
+  z-index: 99998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba($back-colour, $back-colour, $back-colour, .6);
+  opacity: 0;
+  transition: all .3s ease;
+  &.show {
+    opacity: 1;
+    .tcs-modal {
+      transform: translate(0, 0);
+    }
+  }
 }
 
 .tcs-header {
@@ -40,18 +50,3 @@
     float: right;
   }
 }
-
-.tcs-modal-trans {
-  opacity: 0;
-  transition: all .3s ease;
-  .tcs-modal {
-    transition: all .3s ease;
-    transform: translate(0, 40px);
-  }
-  &.show {
-    opacity: 1;
-    .tcs-modal {
-      transform: translate(0, 0);
-    }
-  }
-}