diff --git a/packages/learn/src/templates/Challenges/components/CompletionModal.js b/packages/learn/src/templates/Challenges/components/CompletionModal.js index d1afd002c3..cbde4fde76 100644 --- a/packages/learn/src/templates/Challenges/components/CompletionModal.js +++ b/packages/learn/src/templates/Challenges/components/CompletionModal.js @@ -8,19 +8,27 @@ import { Button, Modal } from 'react-bootstrap'; import ga from '../../../analytics'; import GreenPass from './icons/GreenPass'; +import { dasherize } from '../../../../utils'; + import './completion-modal.css'; import { closeModal, submitChallenge, isCompletionModalOpenSelector, - successMessageSelector + successMessageSelector, + challengeFilesSelector, + challengeMetaSelector } from '../redux'; const mapStateToProps = createSelector( + challengeFilesSelector, + challengeMetaSelector, isCompletionModalOpenSelector, successMessageSelector, - (isOpen, message) => ({ + (files, { title }, isOpen, message) => ({ + files, + title, isOpen, message }) @@ -43,10 +51,12 @@ const mapDispatchToProps = function(dispatch) { const propTypes = { close: PropTypes.func.isRequired, + files: PropTypes.object.isRequired, handleKeypress: PropTypes.func.isRequired, isOpen: PropTypes.bool, message: PropTypes.string, - submitChallenge: PropTypes.func.isRequired + submitChallenge: PropTypes.func.isRequired, + title: PropTypes.string }; export class CompletionModal extends PureComponent { @@ -56,11 +66,21 @@ export class CompletionModal extends PureComponent { isOpen, submitChallenge, handleKeypress, - message + message, + files = {}, + title } = this.props; if (isOpen) { ga.modalview('/completion-modal'); } + const showDownloadButton = Object.keys(files).length; + const filesForDownload = Object.keys(files) + .map(key => files[key]) + .reduce((allFiles, { path, contents }) => ({ + ...allFiles, + [path]: contents + }), {}); + const dashedName = dasherize(title); return ( Submit and go to next challenge (Ctrl + Enter) + {showDownloadButton + ? + : null + } ); diff --git a/packages/learn/src/templates/Challenges/components/completion-modal.css b/packages/learn/src/templates/Challenges/components/completion-modal.css index 91542c63f0..1e8c67eedd 100644 --- a/packages/learn/src/templates/Challenges/components/completion-modal.css +++ b/packages/learn/src/templates/Challenges/components/completion-modal.css @@ -9,4 +9,3 @@ height: 30vh; width: 30vh; } - diff --git a/packages/learn/src/templates/Introduction/intro.css b/packages/learn/src/templates/Introduction/intro.css index ebe740e651..5fb9d1946d 100644 --- a/packages/learn/src/templates/Introduction/intro.css +++ b/packages/learn/src/templates/Introduction/intro.css @@ -2,6 +2,10 @@ margin-top: 1.45rem; } +.intro-toc .list-group-item { + margin: 5px auto; +} + .intro-toc .list-group-item:hover { background-color: #eee; } @@ -10,4 +14,4 @@ text-decoration: none; text-decoration-style: none; color: #006400; -} \ No newline at end of file +}