revert(client): place tool panel at the bottom

This reverts commit e6d2a9df93.

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

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import PropTypes from 'prop-types';
 
@@ -14,8 +14,7 @@ const propTypes = {
     onStopResize: PropTypes.func,
     onResize: PropTypes.func
   }),
-  testOutput: PropTypes.element,
-  toolPanel: PropTypes.element
+  testOutput: PropTypes.element
 };
 
 class DesktopLayout extends Component {
@@ -27,50 +26,46 @@ class DesktopLayout extends Component {
       editor,
       testOutput,
       hasPreview,
-      preview,
-      toolPanel
+      preview
     } = this.props;
     return (
-      <Fragment>
-        <ReflexContainer className='desktop-layout' orientation='vertical'>
-          <ReflexElement flex={1} {...resizeProps}>
-            {instructions}
-          </ReflexElement>
-          <ReflexSplitter propagate={true} {...resizeProps} />
-          <ReflexElement flex={1} {...resizeProps}>
-            {challengeFile && (
-              <ReflexContainer key={challengeFile.key} orientation='horizontal'>
-                <ReflexElement
-                  flex={1}
-                  propagateDimensions={true}
-                  renderOnResize={true}
-                  renderOnResizeRate={20}
-                  {...resizeProps}
-                  >
-                  {editor}
-                </ReflexElement>
-                <ReflexSplitter propagate={true} {...resizeProps} />
-                <ReflexElement
-                  flex={0.25}
-                  propagateDimensions={true}
-                  renderOnResize={true}
-                  renderOnResizeRate={20}
-                  {...resizeProps}
-                  >
-                  {testOutput}
-                </ReflexElement>
-              </ReflexContainer>
-            )}
-          </ReflexElement>
-          {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
-          {hasPreview && (
-            <ReflexElement flex={0.7} {...resizeProps}>
-              {preview}
-            </ReflexElement>
+      <ReflexContainer className='desktop-layout' orientation='vertical'>
+        <ReflexElement flex={1} {...resizeProps}>
+          {instructions}
+        </ReflexElement>
+        <ReflexSplitter propagate={true} {...resizeProps} />
+        <ReflexElement flex={1} {...resizeProps}>
+          {challengeFile && (
+            <ReflexContainer key={challengeFile.key} orientation='horizontal'>
+              <ReflexElement
+                flex={1}
+                propagateDimensions={true}
+                renderOnResize={true}
+                renderOnResizeRate={20}
+                {...resizeProps}
+                >
+                {editor}
+              </ReflexElement>
+              <ReflexSplitter propagate={true} {...resizeProps} />
+              <ReflexElement
+                flex={0.25}
+                propagateDimensions={true}
+                renderOnResize={true}
+                renderOnResizeRate={20}
+                {...resizeProps}
+                >
+                {testOutput}
+              </ReflexElement>
+            </ReflexContainer>
           )}
-        </ReflexContainer>
-        {toolPanel}
-      </Fragment>
+        </ReflexElement>
+        {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
+        {hasPreview && (
+          <ReflexElement flex={0.7} {...resizeProps}>
+            {preview}
+          </ReflexElement>
+        )}
+      </ReflexContainer>
     );
   }
 }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 
+import ToolPanel from '../components/Tool-Panel';
 import { createStructuredSelector } from 'reselect';
 import { currentTabSelector, moveToTab } from '../redux';
 import { bindActionCreators } from 'redux';
@@ -22,12 +23,13 @@ const mapDispatchToProps = dispatch =>
 const propTypes = {
   currentTab: PropTypes.number,
   editor: PropTypes.element,
+  guideUrl: PropTypes.string,
   hasPreview: PropTypes.bool,
   instructions: PropTypes.element,
   moveToTab: PropTypes.func,
   preview: PropTypes.element,
   testOutput: PropTypes.element,
-  toolPanel: PropTypes.element
+  videoUrl: PropTypes.string
 };
 
 class MobileLayout extends Component {
@@ -40,7 +42,8 @@ class MobileLayout extends Component {
       testOutput,
       hasPreview,
       preview,
-      toolPanel
+      guideUrl,
+      videoUrl
     } = this.props;
 
     const editorTabPaneProps = {
@@ -71,7 +74,7 @@ class MobileLayout extends Component {
             </TabPane>
           )}
         </Tabs>
-        {toolPanel}
+        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
       </Fragment>
     );
   }

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

@@ -19,7 +19,6 @@ import VideoModal from '../components/VideoModal';
 import ResetModal from '../components/ResetModal';
 import MobileLayout from './MobileLayout';
 import DesktopLayout from './DesktopLayout';
-import ToolPanel from '../components/Tool-Panel';
 
 import { createGuideUrl } from '../utils';
 import { challengeTypes } from '../../../../utils/challengeTypes';
@@ -244,17 +243,6 @@ class ShowClassic extends Component {
     );
   }
 
-  renderToolPanel(isMobile) {
-    return (
-      <ToolPanel
-        className='classic-tool-panel'
-        guideUrl={this.getGuideUrl()}
-        isMobile={isMobile}
-        videoUrl={this.getVideoUrl()}
-      />
-    );
-  }
-
   render() {
     return (
       <LearnLayout>
@@ -266,13 +254,14 @@ class ShowClassic extends Component {
             matches ? (
               <MobileLayout
                 editor={this.renderEditor()}
+                guideUrl={this.getGuideUrl()}
                 hasPreview={this.hasPreview()}
                 instructions={this.renderInstructionsPanel({
                   showToolPanel: false
                 })}
                 preview={this.renderPreview()}
                 testOutput={this.renderTestOutput()}
-                toolPanel={this.renderToolPanel(true)}
+                videoUrl={this.getVideoUrl()}
               />
             ) : (
               <DesktopLayout
@@ -280,12 +269,11 @@ class ShowClassic extends Component {
                 editor={this.renderEditor()}
                 hasPreview={this.hasPreview()}
                 instructions={this.renderInstructionsPanel({
-                  showToolPanel: false
+                  showToolPanel: true
                 })}
                 preview={this.renderPreview()}
                 resizeProps={this.resizeProps}
                 testOutput={this.renderTestOutput()}
-                toolPanel={this.renderToolPanel(false)}
               />
             )
           }

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

@@ -3,7 +3,7 @@
 }
 
 .desktop-layout {
-  height: calc(100vh - var(--header-height) - 42px);
+  height: calc(100vh - var(--header-height));
 }
 
 .monaco-menu .action-label {
@@ -34,13 +34,3 @@
   height: 100%;
   overflow: hidden;
 }
-
-.classic-tool-panel.tool-panel-group {
-  display: flex;
-  flex-direction: row-reverse;
-  padding: 0 2px;
-}
-
-.classic-tool-panel.tool-panel-group .btn-block + .btn-block {
-  margin: 0 2px 0 0;
-}

client/src/templates/Challenges/components/Tool-Panel.js

@@ -21,7 +21,6 @@ const mapDispatchToProps = dispatch =>
   );
 
 const propTypes = {
-  className: PropTypes.string,
   executeChallenge: PropTypes.func.isRequired,
   guideUrl: PropTypes.string,
   isMobile: PropTypes.bool,
@@ -32,7 +31,6 @@ const propTypes = {
 };
 
 function ToolPanel({
-  className,
   executeChallenge,
   isMobile,
   openHelpModal,
@@ -43,11 +41,9 @@ function ToolPanel({
 }) {
   return (
     <Fragment>
-      <div
-        className={`tool-panel-group ${
+      <div className={`tool-panel-group ${
           isMobile ? 'tool-panel-group-mobile' : ''
-        } ${className}`}
-        >
+        }`}>
         <Button block={true} bsStyle='primary' onClick={executeChallenge}>
           {isMobile ? 'Run' : 'Run the Tests'}
         </Button>
@@ -96,10 +92,7 @@ function ToolPanel({
 ToolPanel.displayName = 'ToolPanel';
 ToolPanel.propTypes = propTypes;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ToolPanel);
+export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);
 
 /*
 <Button