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,
+  testOutput: PropTypes.element
-  toolPanel: PropTypes.element
 };
 
 class DesktopLayout extends Component {
@@ -27,11 +26,9 @@ class DesktopLayout extends Component {
       editor,
       testOutput,
       hasPreview,
-      preview,
+      preview
-      toolPanel
     } = this.props;
     return (
-      <Fragment>
       <ReflexContainer className='desktop-layout' orientation='vertical'>
         <ReflexElement flex={1} {...resizeProps}>
           {instructions}
@@ -69,8 +66,6 @@ class DesktopLayout extends Component {
           </ReflexElement>
         )}
       </ReflexContainer>
-        {toolPanel}
-      </Fragment>
     );
   }
 }

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
+      <div className={`tool-panel-group ${
-        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(
+export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);
-  mapStateToProps,
-  mapDispatchToProps
-)(ToolPanel);
 
 /*
 <Button