diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx index 8951df64..aa016950 100644 --- a/client/modules/App/components/Overlay.jsx +++ b/client/modules/App/components/Overlay.jsx @@ -57,14 +57,15 @@ Overlay.propTypes = { closeOverlay: PropTypes.func, title: PropTypes.string, ariaLabel: PropTypes.string, - previousPath: PropTypes.string.isRequired + previousPath: PropTypes.string }; Overlay.defaultProps = { children: null, title: 'Modal', closeOverlay: null, - ariaLabel: 'modal' + ariaLabel: 'modal', + previousPath: '/' }; export default Overlay; diff --git a/client/modules/IDE/components/HTTPSModal.jsx b/client/modules/IDE/components/HTTPSModal.jsx new file mode 100644 index 00000000..6240dd51 --- /dev/null +++ b/client/modules/IDE/components/HTTPSModal.jsx @@ -0,0 +1,24 @@ +import React from 'react'; + +function HTTPSModal() { + return ( +
+
+
+

Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.

+

You should choose HTTPS if you need to:

+
    +
  • access a webcam or microphone
  • +
  • access an API served over HTTPS
  • +
+

Choose HTTP if you need to:

+
    +
  • access an API served over HTTP
  • +
+
+
+
+ ); +} + +export default HTTPSModal; diff --git a/client/modules/IDE/components/HelpModal.jsx b/client/modules/IDE/components/HelpModal.jsx deleted file mode 100644 index df0adf24..00000000 --- a/client/modules/IDE/components/HelpModal.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { PropTypes } from 'react'; -import InlineSVG from 'react-inlinesvg'; - -const exitUrl = require('../../../images/exit.svg'); - -const helpContent = { - serveSecure: { - title: 'Serve over HTTPS', - body: ( -
-

Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.

-

You should choose HTTPS if you need to:

- -

Choose HTTP if you need to:

- -
- ) - } -}; - -const fallbackContent = { - title: 'No content for this topic', - body: null, -}; - -class HelpModal extends React.Component { - componentDidMount() { - this.shareModal.focus(); - } - render() { - const content = helpContent[this.props.type] == null ? - fallbackContent : - helpContent[this.props.type]; - - return ( -
{ this.shareModal = element; }} tabIndex="0"> -
-

{content.title}

- -
-
- {content.body} -
-
- ); - } -} - -HelpModal.propTypes = { - type: PropTypes.string.isRequired, - closeModal: PropTypes.func.isRequired, -}; - -export default HelpModal; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index e32c6e5f..3929f8e5 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -15,7 +15,7 @@ import NewFolderModal from '../components/NewFolderModal'; import ShareModal from '../components/ShareModal'; import KeyboardShortcutModal from '../components/KeyboardShortcutModal'; import ErrorModal from '../components/ErrorModal'; -import HelpModal from '../components/HelpModal'; +import HTTPSModal from '../components/HTTPSModal'; import Nav from '../../../components/Nav'; import Console from '../components/Console'; import Toast from '../components/Toast'; @@ -516,11 +516,11 @@ class IDEView extends React.Component { {(() => { // eslint-disable-line if (this.props.ide.helpType) { return ( - - + + ); }