refactor: refactor the structure of base container

Description:
Refactor the structure of base component
VAN-1840

example/index.jsx

@@ -7,14 +7,11 @@ 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(
     <AppProvider>
-      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
-        <div>Login Form</div>
-      </BaseContainer> 
+      <div>Load the forms here</div>
     </AppProvider>,
     document.getElementById('root'),
   );

src/authn-component/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import BaseContainer from '../base-container';
+
+/**
+ * Main component that holds the logic for conditionally rendering login or registration form.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window containing login or registration form.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ *
+ * @returns {JSX.Element} The rendered BaseContainer component containing either login or registration form.
+ */
+
+const AuthnComponent = ({
+  open, setOpen,
+}) => (
+  <BaseContainer open={open} setOpen={setOpen}>
+    <div>Login form</div>
+  </BaseContainer>
+);
+
+AuthnComponent.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+export default AuthnComponent;

src/base-container/index.jsx

@@ -3,45 +3,58 @@ import React from 'react';
 import { ModalDialog } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import LargeLayout from './layout/LargeLayout';
-import PrivacyPolicy from './PrivacyPolicyFooter';
 import './index.scss';
 
+/**
+ * Base component for registration or login form modals.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ * @param {string} footerText - Optional. The text for the modal footer.
+ * @param {React.node} children - Required. The login or registration form.
+ *
+ * @returns {JSX.Element} The rendered login or registration form modal.
+ */
+
 const BaseContainer = ({
-  children, open, onClose, isPrivacyPolicy,
+  children, footerText, open, setOpen,
 }) => (
   <ModalDialog
     isOpen={open}
-    onClose={onClose}
+    onClose={setOpen}
     size="fullscreen"
     variant="default"
+    className="bg-light-400"
     hasCloseButton
   >
     <ModalDialog.Body className="modal-body-container overflow-hidden">
-      <div className="modal-body-content-layout">
+      <div className="d-flex w-100 h-100">
         <div className="w-50 d-flex">
           {children}
         </div>
-        <LargeLayout>
+        <div className="w-50 d-flex">
           <div className="w-100 h-100 bg-dark-500" />
-        </LargeLayout>
+        </div>
       </div>
     </ModalDialog.Body>
-    <ModalDialog.Footer className="modal-footer-content">
-      {isPrivacyPolicy && (<PrivacyPolicy />)}
-    </ModalDialog.Footer>
+    {footerText && (
+      <ModalDialog.Footer className="bg-dark-500 p-4.5">
+        <p className="mb-0 text-white">{footerText}</p>
+      </ModalDialog.Footer>
+    )}
   </ModalDialog>
-);
 
-BaseContainer.defaultProps = {
-  isPrivacyPolicy: false,
-};
+);
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
+  footerText: PropTypes.string,
   open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  isPrivacyPolicy: PropTypes.bool,
+  setOpen: PropTypes.func.isRequired,
+};
+
+BaseContainer.defaultProps = {
+  footerText: '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.',
 };
 
 export default BaseContainer;

src/base-container/index.scss

@@ -1,22 +1,18 @@
-.modal-body-container .pgn__modal-body-content {
-    height: 100%;
-}
+@import "@edx/brand/paragon/variables";
 
-.modal-body-container .modal-body-content-layout {
-    display: flex;
-    width: 100%;
+.modal-body-container .pgn__modal-body-content {
     height: 100%;
 }
 
+// This class is related to close button of modal
 .pgn__modal-close-container {
-    background: white;
+    background: $white;
     border-radius: 50%;
+    border: 2px solid $light-500;
 }
 
-.modal-footer-content {
-    padding: 0 !important;
+.pgn__modal-close-container .btn-icon__icon-container {
+    color: $light-700;
 }
 
-.privacy-policy-content {
-    margin-bottom: 0px;
-}
+