From 12cf871249d5620ee5a1863ee3d4a9a4b8cb82a1 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Wed, 28 Feb 2018 19:22:56 +0000
Subject: [PATCH] fix(layout): Improve project view (#16798)

---
 .../Challenges/views/project/Project.jsx      | 23 +------
 .../Challenges/views/project/Tool-Panel.jsx   | 63 ++++++++++---------
 2 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/common/app/routes/Challenges/views/project/Project.jsx b/common/app/routes/Challenges/views/project/Project.jsx
index b8eb5de4ad..977cfa2aca 100644
--- a/common/app/routes/Challenges/views/project/Project.jsx
+++ b/common/app/routes/Challenges/views/project/Project.jsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
-import { Col, Image } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
 
 import SidePanel from './Side-Panel.jsx';
 import ToolPanel from './Tool-Panel.jsx';
@@ -14,24 +14,13 @@ import { challengeSelector } from '../../../../redux';
 const mapStateToProps = createSelector(
   challengeSelector,
   challengeMetaSelector,
-  (
-    {
-      id,
-      description,
-      image
-    },
-    { title }
-  ) => ({
-    id,
-    image,
+  ({ description }, { title }) => ({
     title,
     description
   })
 );
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
-  id: PropTypes.string,
-  image: PropTypes.string,
   isCompleted: PropTypes.bool,
   title: PropTypes.string
 };
@@ -39,13 +28,10 @@ const propTypes = {
 export class Project extends PureComponent {
   render() {
     const {
-      id,
       title,
-      image = 'ovKSXMs',
       isCompleted,
       description
     } = this.props;
-    const imageURL = 'https://i.imgur.com/' + image + '.png';
     return (
       <Col
         md={ 8 }
@@ -56,11 +42,6 @@ export class Project extends PureComponent {
           isCompleted={ isCompleted }
           title={ title }
         />
-        <Image
-          id={ id }
-          responsive={ true }
-          src={ imageURL }
-        />
         <br />
         <ToolPanel />
         <HelpModal />
diff --git a/common/app/routes/Challenges/views/project/Tool-Panel.jsx b/common/app/routes/Challenges/views/project/Tool-Panel.jsx
index 44bb6e91a3..bfb6ff0612 100644
--- a/common/app/routes/Challenges/views/project/Tool-Panel.jsx
+++ b/common/app/routes/Challenges/views/project/Tool-Panel.jsx
@@ -2,8 +2,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from 'react-bootstrap';
 
-import { Button, ButtonGroup } from 'react-bootstrap';
+import { ButtonSpacer } from '../../../../helperComponents';
 import {
   FrontEndForm,
   BackEndForm
@@ -101,35 +102,37 @@ export class ToolPanel extends PureComponent {
             this.renderSubmitButton(isSignedIn, submitChallenge) :
             <FormElement isSubmitting={ isSubmitting }/>
         }
-        <div className='button-spacer' />
-        <ButtonGroup vertical={ true }>
-          <Button
-            bsStyle='primary'
-            className='btn-primary-ghost btn-big'
-            componentClass='a'
-            href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
-            target='_blank'
-            >
-            Help
-          </Button>
-          <Button
-            block={ true }
-            bsStyle='primary'
-            className='btn-primary-ghost btn-big'
-            href={ guideUrl }
-            target='_blank'
-            >
-            Get a hint
-          </Button>
-          <Button
-            block={ true }
-            bsStyle='primary'
-            className='btn-primary-ghost btn-big'
-            onClick={ openHelpModal }
-            >
-            Ask for help on the forum
-          </Button>
-        </ButtonGroup>
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          componentClass='a'
+          href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
+          target='_blank'
+          >
+          Help
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          href={ guideUrl }
+          target='_blank'
+          >
+          Get a hint
+        </Button>
+        <ButtonSpacer />
+        <Button
+          block={ true }
+          bsStyle='primary'
+          className='btn-primary-ghost btn-big'
+          onClick={ openHelpModal }
+          >
+          Ask for help on the forum
+        </Button>
+        <ButtonSpacer />
       </div>
     );
   }