refactor: refactor the structure of base container

Description:
Refactor the structure of base component
VAN-1840

example/index.jsx

@@ -7,14 +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'
+import AuthnComponent from '../src/authn-component'
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
+      <AuthnComponent open isPrivacyPolicy onClose={() => {}}>
         <div>Login Form</div>
-      </BaseContainer> 
+      </AuthnComponent> 
     </AppProvider>,
     document.getElementById('root'),
   );

src/authn-component/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import BaseContainer from '../base-container';
+import PrivacyPolicy from './PrivacyPolicyFooter';
+import './index.scss';
+
+const AuthnComponent = ({
+  children, open, onClose, isPrivacyPolicy,
+}) => (
+  <ModalDialog
+    isOpen={open}
+    onClose={onClose}
+    size="fullscreen"
+    variant="default"
+    hasCloseButton
+  >
+    <ModalDialog.Body className="modal-body-container overflow-hidden">
+      <BaseContainer>
+        {children}
+      </BaseContainer>
+    </ModalDialog.Body>
+    <ModalDialog.Footer className="modal-footer-content">
+      {isPrivacyPolicy && (<PrivacyPolicy />)}
+    </ModalDialog.Footer>
+  </ModalDialog>
+);
+
+AuthnComponent.defaultProps = {
+  isPrivacyPolicy: false,
+};
+
+AuthnComponent.propTypes = {
+  children: PropTypes.node.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  isPrivacyPolicy: PropTypes.bool,
+};
+
+export default AuthnComponent;

src/authn-component/index.scss

@@ -0,0 +1,16 @@
+.modal-body-container .pgn__modal-body-content {
+    height: 100%;
+}
+
+.pgn__modal-close-container {
+    background: white;
+    border-radius: 50%;
+}
+
+.modal-footer-content {
+    padding: 0 !important;
+}
+
+.privacy-policy-content {
+    margin-bottom: 0px;
+}

src/base-container/index.jsx

@@ -4,20 +4,12 @@ import { ModalDialog } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import LargeLayout from './layout/LargeLayout';
-import PrivacyPolicy from './PrivacyPolicyFooter';
 import './index.scss';
 
 const BaseContainer = ({
-  children, open, onClose, isPrivacyPolicy,
+  children
 }) => (
-  <ModalDialog
-    isOpen={open}
-    onClose={onClose}
-    size="fullscreen"
-    variant="default"
-    hasCloseButton
-  >
-    <ModalDialog.Body className="modal-body-container overflow-hidden">
+
       <div className="modal-body-content-layout">
         <div className="w-50 d-flex">
           {children}
@@ -26,11 +18,6 @@ const BaseContainer = ({
           <div className="w-100 h-100 bg-dark-500" />
         </LargeLayout>
       </div>
-    </ModalDialog.Body>
-    <ModalDialog.Footer className="modal-footer-content">
-      {isPrivacyPolicy && (<PrivacyPolicy />)}
-    </ModalDialog.Footer>
-  </ModalDialog>
 );
 
 BaseContainer.defaultProps = {

src/base-container/index.scss

@@ -1,22 +1,6 @@
-.modal-body-container .pgn__modal-body-content {
-    height: 100%;
-}
-
-.modal-body-container .modal-body-content-layout {
+.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;
-}