diff --git a/example/index.jsx b/example/index.jsx
index 167a8eee..9914eb60 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -7,11 +7,14 @@ import { AppProvider } from '@edx/frontend-platform/react';
import { initialize, subscribe, APP_READY } from '@edx/frontend-platform';
import './index.scss';
+import BaseContainer from '../src/base-container'
subscribe(APP_READY, () => {
ReactDOM.render(
- Load the forms here
+ {}}>
+ Login Form
+
,
document.getElementById('root'),
);
diff --git a/src/base-container/PrivacyPolicyFooter.jsx b/src/base-container/PrivacyPolicyFooter.jsx
new file mode 100644
index 00000000..6fecbd86
--- /dev/null
+++ b/src/base-container/PrivacyPolicyFooter.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const PrivacyPolicy = () => {
+ const { formatMessage } = useIntl();
+ return (
+
+ {formatMessage(messages.privacyPolicyLabel)}
+
+ );
+};
+export default PrivacyPolicy;
diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx
new file mode 100644
index 00000000..908f554a
--- /dev/null
+++ b/src/base-container/index.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import PrivacyPolicy from './PrivacyPolicyFooter';
+import LargeLayout from './layout/LargeLayout';
+import './index.scss';
+
+const BaseContainer = ({
+ children, open, onClose, isPrivacyPolicy,
+}) => (
+
+
+
+
+
+ {isPrivacyPolicy && ()}
+
+
+);
+
+BaseContainer.defaultProps = {
+ isPrivacyPolicy: false,
+};
+
+BaseContainer.propTypes = {
+ children: PropTypes.node.isRequired,
+ open: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ isPrivacyPolicy: PropTypes.bool,
+};
+
+export default BaseContainer;
diff --git a/src/base-container/index.scss b/src/base-container/index.scss
new file mode 100644
index 00000000..f80ec157
--- /dev/null
+++ b/src/base-container/index.scss
@@ -0,0 +1,22 @@
+.modal-body-container .pgn__modal-body-content {
+ height: 100%;
+}
+
+.modal-body-container .modal-body-content-layout {
+ display: flex;
+ width: 100%;
+ height: 100%;
+}
+
+.pgn__modal-close-container {
+ background: white;
+ border-radius: 50%;
+}
+
+.modal-footer-content {
+ padding: 0 !important;
+}
+
+.privacy-policy-content {
+ margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/src/base-container/layout/LargeLayout.jsx b/src/base-container/layout/LargeLayout.jsx
new file mode 100644
index 00000000..dbdea002
--- /dev/null
+++ b/src/base-container/layout/LargeLayout.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LargeLayout = ({ children }) => (
+
+ {children}
+
+);
+
+LargeLayout.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default LargeLayout;
diff --git a/src/base-container/messages.js b/src/base-container/messages.js
new file mode 100644
index 00000000..dfb6927e
--- /dev/null
+++ b/src/base-container/messages.js
@@ -0,0 +1,13 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ privacyPolicyLabel: {
+ id: 'privacy.policy.label',
+ defaultMessage: 'By creating an account, you agree to the Terms of '
+ + 'Service and Honor Code and you acknowledge that edX and '
+ + 'each Member process your personal data in accordance with the Privacy Policy.',
+ description: 'Label for Privacy Policy',
+ },
+});
+
+export default messages;