fix(layout): Improve project view (#16798)

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 />

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,9 +102,9 @@ export class ToolPanel extends PureComponent {
             this.renderSubmitButton(isSignedIn, submitChallenge) :
             <FormElement isSubmitting={ isSubmitting }/>
         }
-        <div className='button-spacer' />
-        <ButtonGroup vertical={ true }>
+        <ButtonSpacer />
         <Button
+          block={ true }
           bsStyle='primary'
           className='btn-primary-ghost btn-big'
           componentClass='a'
@@ -112,6 +113,7 @@ export class ToolPanel extends PureComponent {
           >
           Help
         </Button>
+        <ButtonSpacer />
         <Button
           block={ true }
           bsStyle='primary'
@@ -121,6 +123,7 @@ export class ToolPanel extends PureComponent {
           >
           Get a hint
         </Button>
+        <ButtonSpacer />
         <Button
           block={ true }
           bsStyle='primary'
@@ -129,7 +132,7 @@ export class ToolPanel extends PureComponent {
           >
           Ask for help on the forum
         </Button>
-        </ButtonGroup>
+        <ButtonSpacer />
       </div>
     );
   }