Fix: Map UI & Tool panel styles (#83)

Closes #75

![image](https://user-images.githubusercontent.com/18572518/40308418-21227656-5cfe-11e8-9fbc-e4384ba8bc98.png)
![image](https://user-images.githubusercontent.com/18572518/40308442-347f09b2-5cfe-11e8-8834-dd87c146fc74.png)
![image](https://user-images.githubusercontent.com/18572518/40308459-43b1205a-5cfe-11e8-9b47-75b9b946a029.png)
![image](https://user-images.githubusercontent.com/18572518/40308496-63870e62-5cfe-11e8-8359-c4fd9c3ec345.png)

packages/learn/src/components/Map/map.css

@@ -22,4 +22,8 @@
 
 li.open > .map-title svg {
   transform: rotate(90deg);
-}
+}
+
+.map-challenge-title {
+  margin-bottom: 0.25rem;
+}

packages/learn/src/components/MapModal/index.js

@@ -45,7 +45,7 @@ function MapModal({ introNodes, nodes, show, toggleMapModal }) {
       >
       <Modal.Header className='map-modal-header fcc-modal' closeButton={true}>
         <Modal.Title className='text-center'>
-          A Map to Learn to Code
+          A Curriculum to Learn to Code
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>

packages/learn/src/layouts/global.css

@@ -634,3 +634,22 @@ pre tt:after {
   font-size: 28px;
   text-shadow: none;
 }
+
+.btn-primary-invert {
+  color: #006400;
+  background-color: #fff;
+  border-color: #006400;
+}
+
+.btn-primary-invert:hover, .btn-primary-invert:focus, .btn-primary-invert:active {
+  color: #006400;
+  border-color: #006400;
+}
+
+.btn-primary-invert.btn-primary:hover {
+  color: #fff;
+}
+
+.btn-primary-link > a {
+  color: #fff;
+}

packages/learn/src/pages/index.js

@@ -49,9 +49,9 @@ const IndexPage = ({
       We recommend you start at the beginning{' '}
       <Link to={slug}>{`${blockName} -> ${title}`}</Link>
     </p>
-    <h3>Want to see what we can offer?</h3>
+    <h3>Want to dive into our curriculum?</h3>
     <Button block={true} bsSize='lg' bsStyle='primary' onClick={toggleMapModal}>
-      Explore the lesson map
+      Explore the curriculum
     </Button>
   </div>
 );

packages/learn/src/templates/Challenges/classic/Show.js

@@ -171,13 +171,12 @@ class ShowClassic extends PureComponent {
     return (
       <Fragment>
         <Helmet title={`${blockNameTitle} | Learn freeCodeCamp`} />
-        <ToolPanel />
+        <ToolPanel guideUrl={guideUrl} />
         <ReflexContainer orientation='vertical'>
           <ReflexElement flex={1}>
             <SidePanel
               className='full-height'
               description={description}
-              guideUrl={guideUrl}
               title={blockNameTitle}
             />
           </ReflexElement>

packages/learn/src/templates/Challenges/components/Side-Panel.js

@@ -3,30 +3,26 @@ import PropTypes from 'prop-types';
 import ReactDom from 'react-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Button } from 'react-bootstrap';
 
 import ChallengeTitle from './Challenge-Title';
 import ChallengeDescription from './Challenge-Description';
 import Spacer from '../../../components/util/Spacer';
 
-import { initConsole, openModal } from '../redux';
+import { initConsole } from '../redux';
 
 const mapStateToProps = () => ({});
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
-      initConsole,
+      initConsole
-      openHelpModal: () => openModal('help')
     },
     dispatch
   );
 
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
-  guideUrl: PropTypes.string,
   initConsole: PropTypes.func.isRequired,
-  openHelpModal: PropTypes.func.isRequired,
   title: PropTypes.string
 };
 
@@ -56,7 +52,7 @@ export class SidePanel extends PureComponent {
   }
 
   render() {
-    const { title, description, guideUrl, openHelpModal } = this.props;
+    const { title, description } = this.props;
     return (
       <div className='instructions-panel' role='complementary'>
         <div ref={this.bindTopDiv} />
@@ -66,28 +62,6 @@ export class SidePanel extends PureComponent {
           <ChallengeDescription description={description} />
         </div>
         <Spacer />
-        {guideUrl ? (
-          <div>
-            <Button
-              block={true}
-              bsStyle='primary'
-              className='btn-big'
-              href={guideUrl}
-              target='_blank'
-              >
-              Get a hint
-            </Button>
-            <div className='button-spacer' />
-          </div>
-        ) : null}
-        <Button
-          block={true}
-          bsStyle='primary'
-          className='btn-big'
-          onClick={openHelpModal}
-          >
-          Ask for help on the forum
-        </Button>
       </div>
     );
   }

packages/learn/src/templates/Challenges/components/Tool-Panel.js

@@ -14,6 +14,7 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       executeChallenge,
+      openHelpModal: () => openModal('help'),
       openResetModal: () => openModal('reset'),
       toggleMapModal
     },
@@ -22,19 +23,31 @@ const mapDispatchToProps = dispatch =>
 
 const propTypes = {
   executeChallenge: PropTypes.func.isRequired,
+  guideUrl: PropTypes.string,
+  openHelpModal: PropTypes.func.isRequired,
   openResetModal: PropTypes.func.isRequired,
   toggleMapModal: PropTypes.func.isRequired
 };
 
-function ToolPanel({ executeChallenge, openResetModal, toggleMapModal }) {
+function ToolPanel({
+  executeChallenge,
+  openHelpModal,
+  openResetModal,
+  toggleMapModal,
+  guideUrl
+}) {
   return (
     <div className='tool-panel'>
-      <div id='left-tool-panel sub-panel'>
+      <div id='left-tool-panel'>
-        <Button bsStyle='default' onClick={toggleMapModal}>
+        <Button
+          bsStyle='primary'
+          className='btn-primary-invert'
+          onClick={toggleMapModal}
+          >
           View the Curriculum
         </Button>
       </div>
-      <div id='centre-tool-panel sub-panel'>
+      <div id='centre-tool-panel'>
         <Button bsStyle='primary' onClick={executeChallenge}>
           Run the Tests
         </Button>
@@ -42,7 +55,27 @@ function ToolPanel({ executeChallenge, openResetModal, toggleMapModal }) {
           Reset All Code
         </Button>
       </div>
-      <div id='right-tool-panel sub-panel' />
+      <div id='right-tool-panel'>
+        {guideUrl ? (
+          <Button
+            block={true}
+            bsStyle='primary'
+            className='btn-primary-invert'
+            href={guideUrl}
+            target='_blank'
+            >
+            Get a hint
+          </Button>
+        ) : null}
+        <Button
+          block={true}
+          bsStyle='primary'
+          className='btn-primary-invert'
+          onClick={openHelpModal}
+          >
+          Ask for help
+        </Button>
+      </div>
     </div>
   );
 }

packages/learn/src/templates/Challenges/components/tool-panel.css

@@ -7,6 +7,16 @@
   background-color: #99C199;
 }
 
-.centre-tool-panel {
+#centre-tool-panel {
   width: 300px;
-}
+}
+
+#right-tool-panel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#right-tool-panel a, #right-tool-panel .btn-block {
+  margin: 0;
+}

packages/learn/src/templates/Challenges/project/Tool-Panel.js

@@ -31,7 +31,11 @@ export class ToolPanel extends PureComponent {
     return (
       <div className='tool-panel'>
         <div id='left-tool-panel sub-panel'>
-          <Button bsStyle='default' onClick={toggleMapModal}>
+          <Button
+            bsStyle='primary'
+            className='btn-primary-invert'
+            onClick={toggleMapModal}
+            >
             View the Curriculum
           </Button>
         </div>
@@ -41,7 +45,7 @@ export class ToolPanel extends PureComponent {
             <Button
               block={true}
               bsStyle='primary'
-              className='btn-primary-ghost btn-big'
+              className='btn-primary-invert'
               href={guideUrl}
               target='_blank'
               >
@@ -51,10 +55,10 @@ export class ToolPanel extends PureComponent {
           <Button
             block={true}
             bsStyle='primary'
-            className='btn-primary-ghost btn-big'
+            className='btn-primary-invert'
             onClick={openHelpModal}
             >
-            Ask for help on the forum
+            Ask for help
           </Button>
         </div>
       </div>

packages/learn/src/templates/Introduction/Intro.js

@@ -55,15 +55,19 @@ function IntroductionPage({
         />
       </FullWidthRow>
       <FullWidthRow>
-        <Link to={firstLessonPath}>
+        <Link className='btn btn-lg btn-primary btn-block' to={firstLessonPath}>
-          <Button block={true} bsSize='lg' bsStyle='primary'>
+          Go to the first lesson
-            Go to the first lesson
-          </Button>
         </Link>
         <ButtonSpacer />
-        <Button block={true} bsSize='sm' onClick={toggleMapModal}>
+        <Button
+          block={true}
+          bsSize='lg'
+          className='btn-primary-invert'
+          onClick={toggleMapModal}
+          >
           View the curriculum
         </Button>
+        <ButtonSpacer />
         <hr />
       </FullWidthRow>
       <FullWidthRow>