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 login or registration form modal.
+ */
+
+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 BaseContainer component.
+ */
+
 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: '',
 };
 
 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;
-}
+