fix(client): classic challenge styles and update react-reflex

client/package-lock.json

@@ -15835,13 +15835,38 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-measure": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.1.2.tgz",
-      "integrity": "sha512-2xgrlj77Pv8MIYhm+S5s4Q+QnsYFT3CXzoUkx2mWZBIWzQnT7ubMtmsVtCoNdYV5PGKjTlwo9iGAtS3SrTG/Gg==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.2.2.tgz",
+      "integrity": "sha512-7cnTiqUfS08o2VQ+tZ614/MSpzgr5NiSWF3mmWM2MbvL1r8V20LXJZ1Mpyi0Nfwf7G1bP692eGCmgOc0fsWvFg==",
       "requires": {
-        "get-node-dimensions": "^1.2.0",
-        "prop-types": "^15.5.10",
-        "resize-observer-polyfill": "^1.4.2"
+        "@babel/runtime": "^7.2.0",
+        "get-node-dimensions": "^1.2.1",
+        "prop-types": "^15.6.2",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+          "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+          "requires": {
+            "loose-envify": "^1.3.1",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
       }
     },
     "react-media": {
@@ -15926,11 +15951,11 @@
       }
     },
     "react-reflex": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/react-reflex/-/react-reflex-2.2.9.tgz",
-      "integrity": "sha512-NDn2fu7TuQlc0vKfIJW1gHa7n5SDj2fonfmpm9NzO1ql4je6mcqjTibeN0eyIAomcNwKAd5IPe8JOHKbK7pYYA==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/react-reflex/-/react-reflex-3.0.8.tgz",
+      "integrity": "sha512-IDq0CD4/hieuZaNKFA7p0W5b5jnzEWupasPB+yfI4aG5n3DzK1D6OjuHkehJqArN6NPF9Ku8Pl3P03W0dm5fNw==",
       "requires": {
-        "babel-runtime": "^6.23.0",
+        "@babel/runtime": "^7.0.0",
         "lodash.throttle": "^4.1.1",
         "prop-types": "^15.5.8",
         "react-measure": "^2.0.2"
@@ -16616,9 +16641,9 @@
       "dev": true
     },
     "resize-observer-polyfill": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
-      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
       "version": "1.8.1",

client/package.json

@@ -48,7 +48,7 @@
     "react-media": "^1.9.2",
     "react-monaco-editor": "^0.18.0",
     "react-redux": "^5.0.7",
-    "react-reflex": "^2.2.9",
+    "react-reflex": "^3.0.8",
     "react-spinkit": "^3.0.0",
     "react-stripe-elements": "^2.0.1",
     "react-youtube": "^7.8.0",

client/src/templates/Challenges/classic/DesktopLayout.js

@@ -29,7 +29,7 @@ class DesktopLayout extends Component {
       preview
     } = this.props;
     return (
-      <ReflexContainer orientation='vertical'>
+      <ReflexContainer className='desktop-layout' orientation='vertical'>
         <ReflexElement flex={1} {...resizeProps}>
           {instructions}
         </ReflexElement>

client/src/templates/Challenges/classic/Editor.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -130,7 +130,7 @@ class Editor extends Component {
     const { contents, ext, theme, fileKey } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     return (
-      <div className='classic-editor editor'>
+      <Fragment>
         <base href='/' />
         <MonacoEditor
           editorDidMount={this.editorDidMount}
@@ -142,7 +142,7 @@ class Editor extends Component {
           theme={editorTheme}
           value={contents}
         />
-      </div>
+      </Fragment>
     );
   }
 }

client/src/templates/Challenges/classic/MobileLayout.js

@@ -63,10 +63,10 @@ class MobileLayout extends Component {
             {instructions}
           </TabPane>
           <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>
-            <div className='challenge-editor-wrapper'>{editor}</div>
+            {editor}
           </TabPane>
           <TabPane eventKey={3} title='Tests' {...editorTabPaneProps}>
-            <div className='challenge-editor-wrapper'>{testOutput}</div>
+            {testOutput}
           </TabPane>
           {hasPreview && (
             <TabPane eventKey={4} title='Preview'>

client/src/templates/Challenges/classic/classic.css

@@ -2,28 +2,8 @@
   overflow: hidden !important;
 }
 
-.editor {
-  height: 100%;
-}
-
-.instructions-panel {
-  padding: 0 10px;
+.desktop-layout {
   height: calc(100vh - 38px);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-@media screen and (max-width: 767px) {
-  .instructions-panel {
-    height: calc(100vh - 112px);
-  }
-}
-
-.react-monaco-editor-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: end;
 }
 
 .monaco-menu .action-label {
@@ -45,7 +25,12 @@
   padding: 5px 10px;
 }
 
-.challenge-editor-wrapper {
-  height: calc(100vh - 112px);
+#challenge-page-tabs .tab-content {
+  height: calc(100vh - 107px);
+  overflow-y: auto;
+}
+
+#challenge-page-tabs .tab-pane {
+  height: 100%;
   overflow: hidden;
 }

client/src/templates/Challenges/components/preview.css

@@ -1,19 +1,12 @@
 .challenge-preview,
 .challenge-preview-frame {
-  height: calc(100vh - 38px);
+  height: 100%;
   width: 100%;
   padding: 0;
   margin: 0;
   border: none;
 }
 
-@media screen and (max-width: 767px) {
-  .challenge-preview,
-  .challenge-preview-frame {
-    height: calc(100vh - 112px);
-  }
-}
-
 .enable-iframe {
   pointer-events: auto;
 }

client/src/templates/Challenges/components/side-panel.css

@@ -5,3 +5,10 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
+.instructions-panel {
+  padding: 0 10px;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}

client/src/templates/Challenges/components/tool-panel.css

@@ -1,8 +1,10 @@
-.tool-panel-group button, .tool-panel-group a {
+.tool-panel-group button,
+.tool-panel-group a {
   font-size: 1.1rem;
 }
 
-.tool-panel-group-mobile button, .tool-panel-group-mobile a {
+.tool-panel-group-mobile button,
+.tool-panel-group-mobile a {
   font-size: 16px;
 }
 
@@ -10,8 +12,8 @@
   display: flex;
   flex-direction: row-reverse;
   padding: 0 2px;
-  background: #fff;
 }
+
 .tool-panel-group-mobile .btn-block + .btn-block {
   margin: 0 2px 0 0;
 }