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)
2018-05-22 07:53:27 +01:00 · 2018-05-22 07:53:27 +01:00 · c804c968dd
parent b0b51c656e
commit c804c968dd
10 changed files with 98 additions and 51 deletions
--- a/packages/learn/src/components/Map/map.css
+++ b/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;
+}
--- a/packages/learn/src/components/MapModal/index.js
+++ b/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>
--- a/packages/learn/src/layouts/global.css
+++ b/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;
+}
--- a/packages/learn/src/pages/index.js
+++ b/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>
 );
--- a/packages/learn/src/templates/Challenges/classic/Show.js
+++ b/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>
--- a/packages/learn/src/templates/Challenges/components/Side-Panel.js
+++ b/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,
-      openHelpModal: () => openModal('help')
+      initConsole
    },
    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>
    );
  }
--- a/packages/learn/src/templates/Challenges/components/Tool-Panel.js
+++ b/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'>
-        <Button bsStyle='default' onClick={toggleMapModal}>
+      <div id='left-tool-panel'>
+        <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>
  );
 }
--- a/packages/learn/src/templates/Challenges/components/tool-panel.css
+++ b/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;
+}
--- a/packages/learn/src/templates/Challenges/project/Tool-Panel.js
+++ b/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>
--- a/packages/learn/src/templates/Introduction/Intro.js
+++ b/packages/learn/src/templates/Introduction/Intro.js
@ -55,15 +55,19 @@ function IntroductionPage({
        />
      </FullWidthRow>
      <FullWidthRow>
-        <Link to={firstLessonPath}>
-          <Button block={true} bsSize='lg' bsStyle='primary'>
-            Go to the first lesson
-          </Button>
+        <Link className='btn btn-lg btn-primary btn-block' to={firstLessonPath}>
+          Go to the first lesson
        </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>