diff --git a/client/less/lib/bootstrap/modals.less b/client/less/lib/bootstrap/modals.less index 3671ff0715..e2a0c6309a 100755 --- a/client/less/lib/bootstrap/modals.less +++ b/client/less/lib/bootstrap/modals.less @@ -81,10 +81,6 @@ border-bottom: 1px solid @modal-header-border-color; min-height: (@modal-title-padding + @modal-title-line-height); } -// Close icon -.modal-header .close { - margin-top: -2px; -} // Title text within header .modal-title { diff --git a/client/less/main.less b/client/less/main.less index 8c4c3c3bd6..d02dd193ce 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -500,7 +500,7 @@ form.update-email .btn{ } } -.challenge-list-header { +.challenges-list-header { background-color: @brand-primary; color: @gray-lighter; font-size: 36px; @@ -825,7 +825,7 @@ code { color: @night-text-color; .btn-group, .text-success, - .challenge-list-header, + .challenges-list-header, .fcc-footer { background-color: @night-body-bg; } diff --git a/common/app/routes/Challenges/Help-Modal.jsx b/common/app/routes/Challenges/Help-Modal.jsx new file mode 100644 index 0000000000..ebac1a5509 --- /dev/null +++ b/common/app/routes/Challenges/Help-Modal.jsx @@ -0,0 +1,94 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { Button, Modal } from 'react-bootstrap'; + +import ns from './ns.json'; +import { + createQuestion, + openHelpChatRoom, + closeHelpModal, + helpModalSelector +} from './redux'; + +const mapStateToProps = state => ({ isOpen: helpModalSelector(state) }); +const mapDispatchToProps = { createQuestion, openHelpChatRoom, closeHelpModal }; +const methodologyUrl = 'https://forum.freecodecamp.org/t/the-read-search-ask-methodology-for-getting-unstuck/137307'; // eslint-disable-line max-len + +const propTypes = { + closeHelpModal: PropTypes.func, + createQuestion: PropTypes.func, + isOpen: PropTypes.bool, + openHelpChatRoom: PropTypes.func +}; + +export class HelpModal extends PureComponent { + render() { + const { + isOpen, + closeHelpModal, + openHelpChatRoom, + createQuestion + } = this.props; + return ( + + + Ask for help? + + × + + + +

+ If you've already tried the Read-Search-Ask method, + then you can ask for help on the freeCodeCamp forum. +

+ + + + +
+
+ ); + } +} + +HelpModal.displayName = 'HelpModal'; +HelpModal.propTypes = propTypes; + +export default connect(mapStateToProps, mapDispatchToProps)(HelpModal); diff --git a/common/app/routes/Challenges/Side-Panel.jsx b/common/app/routes/Challenges/Side-Panel.jsx index 0faa9bd992..bc6d87d408 100644 --- a/common/app/routes/Challenges/Side-Panel.jsx +++ b/common/app/routes/Challenges/Side-Panel.jsx @@ -7,6 +7,7 @@ import { connect } from 'react-redux'; import ns from './ns.json'; import BugModal from './Bug-Modal.jsx'; +import HelpModal from './Help-Modal.jsx'; import ToolPanel from './Tool-Panel.jsx'; import ChallengeTitle from './Challenge-Title.jsx'; import ChallengeDescription from './Challenge-Description.jsx'; @@ -14,6 +15,7 @@ import TestSuite from './Test-Suite.jsx'; import Output from './Output.jsx'; import { openBugModal, + openHelpModal, updateHint, executeChallenge, unlockUntrustedCode, @@ -22,8 +24,7 @@ import { testsSelector, outputSelector, hintIndexSelector, - codeLockedSelector, - chatRoomSelector + codeLockedSelector } from './redux'; import { descriptionRegex } from './utils'; @@ -35,6 +36,7 @@ const mapDispatchToProps = { executeChallenge, updateHint, openBugModal, + openHelpModal, unlockUntrustedCode }; const mapStateToProps = createSelector( @@ -44,7 +46,6 @@ const mapStateToProps = createSelector( outputSelector, hintIndexSelector, codeLockedSelector, - chatRoomSelector, ( { description }, { title }, @@ -52,24 +53,22 @@ const mapStateToProps = createSelector( output, hintIndex, isCodeLocked, - helpChatRoom ) => ({ title, description, tests, output, - isCodeLocked, - helpChatRoom + isCodeLocked }) ); const propTypes = { description: PropTypes.arrayOf(PropTypes.string), executeChallenge: PropTypes.func, - helpChatRoom: PropTypes.string, hint: PropTypes.string, isCodeLocked: PropTypes.bool, makeToast: PropTypes.func, openBugModal: PropTypes.func, + openHelpModal: PropTypes.func, output: PropTypes.string, tests: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string, @@ -125,8 +124,8 @@ export class SidePanel extends PureComponent { executeChallenge, updateHint, makeToast, - helpChatRoom, openBugModal, + openHelpModal, isCodeLocked, unlockUntrustedCode } = this.props; @@ -147,15 +146,16 @@ export class SidePanel extends PureComponent { +

@@ -12,11 +14,11 @@ const unlockWarning = ( const propTypes = { executeChallenge: PropTypes.func.isRequired, - helpChatRoom: PropTypes.string, hint: PropTypes.string, isCodeLocked: PropTypes.bool, makeToast: PropTypes.func.isRequired, openBugModal: PropTypes.func.isRequired, + openHelpModal: PropTypes.func.isRequired, unlockUntrustedCode: PropTypes.func.isRequired, updateHint: PropTypes.func.isRequired }; @@ -93,10 +95,10 @@ export default class ToolPanel extends PureComponent { render() { const { executeChallenge, - helpChatRoom, hint, isCodeLocked, openBugModal, + openHelpModal, unlockUntrustedCode } = this.props; return ( @@ -111,13 +113,12 @@ export default class ToolPanel extends PureComponent { }