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 {
+