ui: modals are replaced with mantine modal

platform/firecamp-platform/package.json

@@ -84,7 +84,6 @@
     "react-ga": "^3.1.2",
     "react-hook-form": "^6.8.1",
     "react-hotkeys-hook": "^3.3.1",
-    "react-responsive-modal": "^6.2.0",
     "redux": "^3.2.1",
     "xml-js": "^1.6.9",
     "xmljson": "^0.2.0",

platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx

@@ -83,7 +83,7 @@ const EnvironmentDD: FC<IEnvironmentDD> = ({ onChange = () => {} }) => {
       onSelect={_onSelectEnv}
       classNames={{
         dropdown: '!pt-0',
-        label: 'uppercase font-sans',
+        label: 'uppercase',
         item: '!px-5',
       }}
       sm

platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx

@@ -23,10 +23,8 @@ const ErrorPopup: FC<FallbackProps> = ({ error }) => {
 
   return (
     <Modal
-      isOpen={isOpen}
+      opened={isOpen}
-      modalConfig={{
+      styles={{ content: bg.modal }}
-        styles: bg,
-      }}
       onClose={_onClose}
       className="fc-error-popup"
     >

platform/firecamp-platform/src/components/modals/ModalContainer.tsx

@@ -1,11 +1,10 @@
 import shallow from 'zustand/shallow';
-import { Modal } from '@firecamp/ui';
 // import SSLnProxyManager from '../modals/ssl-proxy-manager/SSLnProxyManager';
 // import AuthContainer from '../common/auth/AuthContainer';
 // import CookieManager from '../modals/cookie-manager/CookieManager';
 // import RefreshToken from '../common/auth/RefreshToken';
 import { useModalStore } from '../../store/modal';
-import { EPlatformModalDefaultProps, EPlatformModalTypes } from '../../types';
+import { EPlatformModalTypes } from '../../types';
 import ForgotPassword from './auth/ForgotPassword';
 import RefreshToken from './auth/RefreshToken';
 import ResetPassword from './auth/ResetPassword';
@@ -38,115 +37,51 @@ export const ModalContainer = () => {
 
       // Organization
       case EPlatformModalTypes.OrgManagement:
-        return <OrgManagement isOpen={isOpen} onClose={close} />;
+        return <OrgManagement opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.SwitchOrg:
-        return <SwitchOrg isOpen={isOpen} onClose={close} />;
+        return <SwitchOrg opened={isOpen} onClose={close} />;
 
       // Workspace
       case EPlatformModalTypes.InviteMembers:
-        return <InviteMembers isOpen={isOpen} onClose={close} />;
+        return <InviteMembers opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.WorkspaceManagement:
-        return <WorkspaceManagement isOpen={isOpen} onClose={close} />;
+        return <WorkspaceManagement opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.SwitchWorkspace:
-        return <SwitchWorkspace isOpen={isOpen} onClose={close} />;
+        return <SwitchWorkspace opened={isOpen} onClose={close} />;
 
       // Request
       case EPlatformModalTypes.EditRequest:
-        return <EditRequest onClose={close} />;
+        return <EditRequest opened={isOpen} onClose={close} />;
 
       // Environment
       case EPlatformModalTypes.CloneEnvironment:
-        return <CloneEnvironment onClose={close} />;
+        return <CloneEnvironment opened={isOpen} onClose={close} />;
 
       // User
       // case EPlatformModalTypes.UserProfile: return <UserProfile isOpen={isOpen} onClose={close} />;
 
       // Auth
       case EPlatformModalTypes.SignIn:
-        return <SignIn isOpen={isOpen} onClose={close} />;
+        return <SignIn opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.SignInWithEmail:
-        return <SignInWithEmail isOpen={isOpen} onClose={close} />;
+        return <SignInWithEmail opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.SignUp:
-        return <SignUp isOpen={isOpen} onClose={close} />;
+        return <SignUp opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.ForgotPassword:
-        return <ForgotPassword isOpen={isOpen} onClose={close} />;
+        return <ForgotPassword opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.ResetPassword:
-        return <ResetPassword isOpen={isOpen} onClose={close} />;
+        return <ResetPassword opened={isOpen} onClose={close} />;
       case EPlatformModalTypes.RefreshToken:
-        return <RefreshToken isOpen={isOpen} onClose={close} />;
+        return <RefreshToken opened={isOpen} onClose={close} />;
       default:
         return <></>;
     }
   };
-  // return renderModal(currentOpenModal);
 
-  const modalProps = EPlatformModalDefaultProps[currentOpenModal];
-  // console.log(modalProps, '.....');
   return (
-    <Modal isOpen={isOpen} onClose={close} {...modalProps}>
-      {renderModal(currentOpenModal)}
-    </Modal>
-  );
-
-  const modalType = currentOpenModal;
-  return (
-    <Modal isOpen={isOpen} onClose={close} {...modalProps}>
     <>
-        {/* Organization */}
+      {renderModal(currentOpenModal)}
-        <OrgManagement
-          isOpen={modalType == EPlatformModalTypes.OrgManagement && isOpen}
-          onClose={close}
-        />
-        <SwitchOrg
-          isOpen={modalType == EPlatformModalTypes.SwitchOrg && isOpen}
-          onClose={close}
-        />
-
-        {/* Workspace */}
-        <InviteMembers
-          isOpen={modalType == EPlatformModalTypes.InviteMembers && isOpen}
-          onClose={close}
-        />
-        <WorkspaceManagement
-          isOpen={
-            modalType == EPlatformModalTypes.WorkspaceManagement && isOpen
-          }
-          onClose={close}
-        />
-        <SwitchWorkspace
-          isOpen={modalType == EPlatformModalTypes.SwitchWorkspace && isOpen}
-          onClose={close}
-        />
-
-        {/* User */}
-        {/* <UserProfile isOpen={modalType == EPlatformModalTypes.UserProfile && isOpen} onClose={close} />; */}
-
-        {/* Auth */}
-        <SignIn
-          isOpen={modalType == EPlatformModalTypes.SignIn && isOpen}
-          onClose={close}
-        />
-        <SignInWithEmail
-          isOpen={modalType == EPlatformModalTypes.SignInWithEmail && isOpen}
-          onClose={close}
-        />
-        <SignUp
-          isOpen={modalType == EPlatformModalTypes.SignUp && isOpen}
-          onClose={close}
-        />
-        <ForgotPassword
-          isOpen={modalType == EPlatformModalTypes.ForgotPassword && isOpen}
-          onClose={close}
-        />
-        <ResetPassword
-          isOpen={modalType == EPlatformModalTypes.ResetPassword && isOpen}
-          onClose={close}
-        />
-        <RefreshToken
-          isOpen={modalType == EPlatformModalTypes.RefreshToken && isOpen}
-          onClose={close}
-        />
     </>
-    </Modal>
   );
+
 };

platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx

@@ -1,12 +1,13 @@
 import { FC, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Modal, Button, Input, IModal } from '@firecamp/ui';
+import { Mail } from 'lucide-react';
 import _auth from '../../../services/auth';
 import platformContext from '../../../services/platform-context';
 /**
  * ForgotPassword component
  */
-const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
+const ForgotPassword: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
   const [isRequesting, setFlagIsRequesting] = useState(false);
   const form = useForm();
   let { handleSubmit, errors } = form;
@@ -50,17 +51,17 @@ const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit);
 
   return (
-    <>
+    <Modal opened={opened} onClose={onClose} size={440}>
-      <Modal.Header>
+      <Mail
-        <img className="mx-auto w-12 mb-6" src={'img/mail-send.png'} />
+        size="48"
+        className="mb-6 mx-auto text-activityBar-foreground-inactive"
+      />
       <div className="text-xl mb-2 w-full text-center font-semibold">
         Enter your Email Address
       </div>
       <div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16">
         You’ll get the password recovery token in your inbox.
       </div>
-      </Modal.Header>
-      <Modal.Body>
       <div className="">
         <form onSubmit={handleSubmit(_onSubmit)}>
           <Input
@@ -89,9 +90,8 @@ const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
           />
         </form>
       </div>
-      </Modal.Body>
+
-      <Modal.Footer>
+      <div className="text-sm p-4">
-        <div className="text-sm mt-6">
         <a
           className="text-base text-center block"
           href="#"
@@ -105,8 +105,7 @@ const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
           Already have a token?
         </a>
       </div>
-      </Modal.Footer>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx

@@ -13,19 +13,13 @@ import { useUserStore } from '../../../store/user';
 /**
  * RefreshToken component for user to autenticate.
  */
-const RefreshToken: FC<IModal> = ({ onClose = () => {} }) => {
+const RefreshToken: FC<IModal> = ({ opened, onClose = () => {} }) => {
   return (
-    <>
+    <Modal opened={opened} onClose={onClose} closeOnEscape={false}>
-      <Modal.Header>
       <Header />
-      </Modal.Header>
-      <Modal.Body>
       <Body onClose={onClose} />
-      </Modal.Body>
-      <Modal.Footer>
       <Footer />
-      </Modal.Footer>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx

@@ -8,7 +8,7 @@ import platformContext from '../../../services/platform-context';
 /**
  * ResetPassword component
  */
-const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
+const ResetPassword: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
   const [isRequesting, setFlagIsRequesting] = useState(false);
   const [showPassword, toggleShowPassword] = useState(false);
 
@@ -54,14 +54,13 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit);
 
   return (
+    <Modal opened={opened} onClose={onClose} size={440}>
       <>
-      <Modal.Header>
         <img className="mx-auto w-12 mb-6" src={'img/reset-icon.png'} />
         <div className="text-xl mb-6 w-full text-center font-semibold">
           Reset Password
         </div>
-      </Modal.Header>
+      </>
-      <Modal.Body>
       <div className="">
         <form onSubmit={handleSubmit(_onSubmit)}>
           <Input
@@ -130,7 +129,7 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
             }
           />
           <Button
-              type='submit'
+            type="submit"
             text={isRequesting ? `Resetting password...` : 'Reset Password'}
             onClick={handleSubmit(_onSubmit)}
             fullWidth
@@ -139,8 +138,7 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
           />
         </form>
       </div>
-      </Modal.Body>
+
-      <Modal.Footer>
       <div className="flex-col">
         <div className="text-sm mt-6 text-center text-app-foreground-inactive">
           Not have an account?
@@ -157,7 +155,7 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
             Sign Up
           </a>
         </div>
-          <div className="text-sm mt-2 text-center text-app-foreground-inactive">
+        <div className="text-sm text-center text-app-foreground-inactive">
           Already have an account?
           <a
             href="#"
@@ -197,8 +195,7 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
         Already have an account? Sign In
       </a>
     </div> */}
-      </Modal.Footer>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/auth/SignIn.tsx

@@ -9,10 +9,9 @@ import platformContext from '../../../services/platform-context';
 /**
  * User Sign in
  */
-const SignIn: FC<IModal> = () => {
+const SignIn: FC<IModal> = ({ opened, onClose }) => {
   return (
-    <>
+    <Modal opened={opened} onClose={onClose} size={440}>
-      <Modal.Body>
       {/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
       <div className="mb-4">
         <FcLogo className="mx-auto w-14" size={80} />
@@ -25,7 +24,7 @@ const SignIn: FC<IModal> = () => {
         <Button
           text="Continue with Email"
           leftIcon={<VscAccount size={18} />}
-            classNames={{root: "mb-5"}}
+          classNames={{ root: 'mb-5' }}
           onClick={() => platformContext.app.modals.openSignInWithEmail()}
           outline
           fullWidth
@@ -36,13 +35,13 @@ const SignIn: FC<IModal> = () => {
           <hr className="border-t border-app-border w-full" />
           <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">OR</span>
         </div> */}
-        <div className="flex-col">
+      <div className="pt-px">
         <div className="text-sm mt-6 text-center">
           Not have an account?
           <a
             href="#"
             id="sign-up"
-              className="font-bold underline"
+            className="font-bold underline px-1"
             onClick={(e) => {
               if (e) e.preventDefault();
               platformContext.app.modals.openSignUp();
@@ -57,7 +56,7 @@ const SignIn: FC<IModal> = () => {
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             Term of Service
@@ -66,7 +65,7 @@ const SignIn: FC<IModal> = () => {
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             Privacy Policy
@@ -74,8 +73,7 @@ const SignIn: FC<IModal> = () => {
           .
         </div>
       </div>
-      </Modal.Body>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx

@@ -8,7 +8,7 @@ import { EProvider } from '../../../services/auth/types';
 import platformContext from '../../../services/platform-context';
 
 /** User Sign in */
-const SignInWithEmail: FC<IModal> = () => {
+const SignInWithEmail: FC<IModal> = ({ opened, onClose }) => {
   const form = useForm();
   const [isRequesting, setFlagIsRequesting] = useState(false);
   const [showPassword, toggleShowPassword] = useState(false);
@@ -62,27 +62,25 @@ const SignInWithEmail: FC<IModal> = () => {
   };
 
   return (
-    <>
+    <Modal opened={opened} onClose={onClose} size={440}>
-      <Modal.Body>
+      <div className="mb-2">
-        {/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
-        <div className="mb-4">
         <FcLogo className="mx-auto w-14" size={80} />
       </div>
-        <div className="text-xl mb-6 w-full text-center font-semibold">
+      <div className="text-xl mb-3 w-full text-center font-semibold">
         Sign in to Firecamp
       </div>
       <div className="">
         <GithubGoogleAuth />
       </div>
-        <div className="mb-8 mt-8 flex justify-center items-center">
+      <div className="relative my-4 flex justify-center items-center">
         <hr className="border-t border-app-border w-full" />
         <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
           OR
         </span>
       </div>
-        <div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16">
+      {/* <div className="text-sm text-app-foreground-inactive max-w-sm mx-auto mb-3 text-center">
           Welcome back! enter your email and password below to sign in.
-        </div>
+        </div> */}
       <div className="">
         <form onSubmit={handleSubmit(_onSignIn)}>
           <Input
@@ -103,7 +101,8 @@ const SignInWithEmail: FC<IModal> = () => {
             onKeyDown={_onKeyDown}
             error={
               errors?.username
-                  ? errors?.username?.message || 'Please enter valid username or email'
+                ? errors?.username?.message ||
+                  'Please enter valid username or email'
                 : ''
             }
             wrapperClassName="!mb-2"
@@ -143,7 +142,7 @@ const SignInWithEmail: FC<IModal> = () => {
             <a
               href="#"
               id="forgotPassword"
-                className="!text-primaryColor text-sm mb-4 -mt-1"
+              className="!text-primaryColor text-sm mb-2 -mt-1"
               onClick={(e) => {
                 if (e) e.preventDefault();
                 platformContext.app.modals.openForgotPassword();
@@ -164,12 +163,12 @@ const SignInWithEmail: FC<IModal> = () => {
         </form>
       </div>
       <div className="flex-col">
-          <div className="text-sm mt-6 text-center">
+        <div className="text-sm mt-3 text-center">
           Not have an account?
           <a
             href="#"
             id="signup"
-              className="font-bold underline"
+            className="font-bold underline px-1"
             onClick={(e) => {
               if (e) e.preventDefault();
               platformContext.app.modals.openSignUp();
@@ -180,12 +179,12 @@ const SignInWithEmail: FC<IModal> = () => {
             Sign Up
           </a>
         </div>
-          <div className="text-sm mt-6 text-center text-app-foreground-inactive">
+        <div className="text-sm mt-3 text-center text-app-foreground-inactive">
           By moving forward, you acknowledge that you have read and accept the
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             {' '}
@@ -195,7 +194,7 @@ const SignInWithEmail: FC<IModal> = () => {
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             {' '}
@@ -204,9 +203,7 @@ const SignInWithEmail: FC<IModal> = () => {
           .
         </div>
       </div>
-      </Modal.Body>
+    </Modal>
-      <Modal.Footer></Modal.Footer>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/auth/SignUp.tsx

@@ -10,7 +10,7 @@ import platformContext from '../../../services/platform-context';
 /**
  * User Sign up
  */
-const SignUp: FC<IModal> = () => {
+const SignUp: FC<IModal> = ({ opened, onClose }) => {
   const [showPassword, toggleShowPassword] = useState(false);
   const [isRequesting, setFlagIsRequesting] = useState(false);
 
@@ -68,25 +68,24 @@ const SignUp: FC<IModal> = () => {
   const _onKeyDown = (e) => e.key === 'Enter' && handleSubmit(_onSignUp);
 
   return (
-    <>
+    <Modal opened={opened} onClose={onClose} size={440}>
-      <Modal.Body>
       {/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
-        <div className="mb-3">
+      <div className="-mt-4">
         <FcLogo className="mx-auto w-14" size={80} />
       </div>
-        <div className="text-xl mb-4 w-full text-center font-semibold">
+      <div className="text-xl mb-2 w-full text-center font-semibold">
         Create a firecamp account
       </div>
       <div className="">
         <GithubGoogleAuth />
       </div>
-        <div className="mb-6 mt-6 flex justify-center items-center">
+      <div className="relative my-3 flex justify-center items-center">
         <hr className="border-t border-app-border w-full" />
         <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
           OR
         </span>
       </div>
-        <div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16">
+      <div className="text-sm text-app-foreground-inactive max-w-sm mx-auto mb-3 text-center">
         Give us some of your information to get free access to Firecamp
       </div>
       <div className="">
@@ -128,7 +127,10 @@ const SignUp: FC<IModal> = () => {
             useformRef={form}
             onKeyDown={_onKeyDown}
             error={
-                errors?.email ? errors?.email?.message || 'Please enter valid username or password' : ''
+              errors?.email
+                ? errors?.email?.message ||
+                  'Please enter valid username or password'
+                : ''
             }
             wrapperClassName="!mb-2"
           />
@@ -161,6 +163,7 @@ const SignUp: FC<IModal> = () => {
                 ? errors?.password?.message || 'Please enter valid password'
                 : ''
             }
+            wrapperClassName="!mb-3"
           />
 
           <Button
@@ -173,15 +176,14 @@ const SignUp: FC<IModal> = () => {
           />
         </form>
       </div>
-      </Modal.Body>
+
-      <Modal.Footer>
       <div className="flex-col">
-          <div className="text-sm mt-6 text-center">
+        <div className="text-sm mt-3 text-center">
           Already have an account
           <a
             href="#"
             id="signup"
-              className="font-bold underline"
+            className="font-bold underline px-1"
             onClick={(e) => {
               if (e) e.preventDefault();
               platformContext.app.modals.openSignIn();
@@ -192,12 +194,12 @@ const SignUp: FC<IModal> = () => {
             Sign In
           </a>
         </div>
-          <div className="text-sm mt-6 text-center text-app-foreground-inactive">
+        <div className="text-sm mt-3 text-center text-app-foreground-inactive">
           By moving forward, you acknowledge that you have read and accept the
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             Term of Service
@@ -206,7 +208,7 @@ const SignUp: FC<IModal> = () => {
           <a
             href="https://firecamp.io/legals/privacy-policy/"
             tabIndex={1}
-              className="font-bold underline"
+            className="font-bold underline px-1"
             target={'_blank'}
           >
             Privacy Policy
@@ -214,8 +216,7 @@ const SignUp: FC<IModal> = () => {
           .
         </div>
       </div>
-      </Modal.Footer>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx

@@ -24,7 +24,7 @@ type TModalMeta = {
   envId: string;
 };
 
-const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
+const CloneEnvironment: FC<IModal> = ({ opened, onClose = () => {} }) => {
   const { open: openTab } = useTabStore.getState();
   const { explorer } = useExplorerStore.getState();
   const { collections } = explorer;
@@ -113,27 +113,37 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
       });
   };
 
-  if (isFetching) {
   return (
-      <Modal.Body>
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size={500}
+      classNames={{
+        content: 'h-[750px]'
+      }}
+      title={
+        !isFetching ? (
+          <>
+            <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
+              Clone Environment
+            </div>
+          </>
+        ) : (
+          <></>
+        )
+      }
+    >
+      {isFetching ? (
+        <>
           <ProgressBar active={isRequesting} />
           <div className="flex items-center justify-center h-full w-full">
             <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2 text-center">
               Fetching...
             </label>
           </div>
-      </Modal.Body>
+        </>
-    );
+      ) : (
-  }
-
-  return (
         <>
-      <Modal.Header className="with-divider">
-        <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
-          Clone Environment
-        </div>
-      </Modal.Header>
-      <Modal.Body>
           <ProgressBar active={isRequesting} />
           <div className="p-4">
             <div className="">
@@ -229,12 +239,7 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
           <div className="p-4">
             <TabHeader className="!p-0">
               <TabHeader.Right>
-              <Button
+                <Button text="Cancel" onClick={(e) => onClose()} ghost xs />
-                text="Cancel"
-                onClick={(e) => onClose()}
-                ghost
-                xs
-              />
                 <Button
                   text={isRequesting ? 'Cloning...' : 'Clone Environment'}
                   onClick={onCreate}
@@ -245,8 +250,9 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
               </TabHeader.Right>
             </TabHeader>
           </div>
-      </Modal.Body>
         </>
+      )}
+    </Modal>
   );
 };
 

platform/firecamp-platform/src/components/modals/organization/OrgManagement.tsx

@@ -11,7 +11,7 @@ import {
 import { _misc } from '@firecamp/utils';
 import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
 
-const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
+const OrgManagement: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
   // let { create, checkNameAvailability } = useWorkspaceStore((s: IWorkspaceStore)=>({
   //   create: s.create,
   //   checkNameAvailability: s.checkNameAvailability
@@ -38,13 +38,20 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   };
 
   return (
-    <>
+    <Modal
-      <Modal.Header>
+      opened={opened}
-        <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium  border-b border-app-border ">
+      onClose={onClose}
+      size={600}
+      classNames={{
+        body: 'h-[80vh]',
+      }}
+      title={
+        <div className="text-lg leading-5 px-6 flex items-center font-medium">
           Organization Management
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+    >
+      <>
         <SecondaryTab
           className="flex items-center p-4 pb-0"
           list={tabs}
@@ -52,8 +59,8 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
           onSelect={setActiveTab}
         />
         {renderTab(activeTab)}
-      </Modal.Body>
+      </>
-      <Modal.Footer className="!py-3 border-t border-app-border ">
+      <div className="!py-3 border-t border-app-border ">
         <TabHeader>
           <TabHeader.Right>
             <Button text="Cancel" onClick={(e) => onClose(e)} ghost xs />
@@ -66,8 +73,8 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
             />
           </TabHeader.Right>
         </TabHeader>
-      </Modal.Footer>
+      </div>
-    </>
+    </Modal>
   );
 };
 export default OrgManagement;
@@ -79,11 +86,11 @@ const EditInfoTab: FC<any> = () => {
   });
 
   return (
-    <div className="p-6">
+    <div className="px-6 py-3">
       <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
         ADD NEW WORKSPACE INFO
       </label>
-      <div className="mt-8">
+      <div className="mt-4">
         <Input
           autoFocus={true}
           label="Name"

platform/firecamp-platform/src/components/modals/organization/SwitchOrg.tsx

@@ -5,7 +5,7 @@ import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 import { usePlatformStore } from '../../../store/platform';
 import platformContext from '../../../services/platform-context';
 
-const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
+const SwitchOrg: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
   const { setSwitchingOrg } = usePlatformStore((s) => ({
     setSwitchingOrg: s.setSwitchingOrg,
   }));
@@ -13,7 +13,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   const [orgs, setOrgs] = useState([]);
 
   useEffect(() => {
-    if (!isOpen) return;
+    if (!opened) return;
     setFetchOrgFlag(true);
     Rest.organization
       .getMyOrganizations()
@@ -41,7 +41,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
         else
           return (
             <>
-              <div className="p-4">
+              <div className="py-4">
                 <div className="text-sm">
                   <label className="font-semibold text-app-foreground uppercase">
                     Please select organization to switch
@@ -53,7 +53,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
                   </span>
                 </div>
               </div>
-              <div className="pl-4 pb-4 pr-2  overflow-auto visible-scrollbar h-80 mr-2">
+              <div className="pb-4 overflow-auto visible-scrollbar h-80">
                 {orgs.map((org, i) => (
                   <div
                     className="card relative flex items-center p-2 mb-2 text-base font-semibold border border-app-border cursor-pointer hover:border-focusBorder after:absolute after:top-0 after:left-0 after:bottom-0 after:right-0 hover:after:bg-focusBorder after:opacity-10 "
@@ -83,17 +83,20 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   };
 
   return (
-    <>
+    <Modal
-      <Modal.Header className="with-divider">
+      opened={opened}
-        <div className="text-lg leading-5 p-4 flex items-center font-medium">
+      onClose={onClose}
+      size={440}
+      classNames={{ content: '!pb-6' }}
+      title={
+        <div className="text-lg leading-5 px-4 flex items-center font-medium">
           Switch Organization
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+    >
       <ProgressBar active={isFetchingOrgs} />
       {renderBody(isFetchingOrgs)}
-      </Modal.Body>
+    </Modal>
-    </>
   );
 };
 

platform/firecamp-platform/src/components/modals/request/edit-request/EditRequest.tsx

@@ -24,10 +24,8 @@ type TModalMeta = {
 };
 
 const EditRequest: FC<IModal> = ({
-  isOpen = false,
+  opened = false,
   onClose = () => {},
-  height = '732px',
-  width = '500px',
 }) => {
   const { name, description, requestId, requestType, collectionId, folderId } =
     useModalStore.getState().__meta as TModalMeta;
@@ -82,18 +80,25 @@ const EditRequest: FC<IModal> = ({
   };
 
   return (
-    <>
+    <Modal
-      <Modal.Header className="with-divider">
+      opened={opened}
-        <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium display-block">
+      onClose={onClose}
-          {/* Update Request Info */}
+      size={450}
+      title={
+        <div className="text-lg leading-5 px-6 flex items-center font-medium display-block">
           <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mt-2">
             Update Request Info
           </label>
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+      classNames={{
+        content: 'h-[600px]',
+        body: 'p-0',
+      }}
+    >
+      <>
         <ProgressBar active={isRequesting} />
-        <div className="p-6 !pb-0">
+        <div className="p-6 !pb-0 mx-4 ">
           <div className="">
             <Input
               autoFocus={true}
@@ -125,9 +130,9 @@ const EditRequest: FC<IModal> = ({
             // icon={<VscEdit />}
           />
         </div>
-      </Modal.Body>
+      </>
 
-      <Modal.Footer className="!py-3 border-t border-app-border">
+      <div className="!py-3 border-t border-app-border">
         <TabHeader className="px-6">
           <TabHeader.Right>
             <Button text="Cancel" onClick={(e) => onClose()} ghost xs />
@@ -140,8 +145,8 @@ const EditRequest: FC<IModal> = ({
             />
           </TabHeader.Right>
         </TabHeader>
-      </Modal.Footer>
+      </div>
-    </>
+    </Modal>
   );
 };
 

platform/firecamp-platform/src/components/modals/workspace/SwitchWorkspace.tsx

@@ -6,7 +6,7 @@ import { usePlatformStore } from '../../../store/platform';
 import './workspace.scss';
 
 const SwitchWorkspace: FC<IModal> = ({
-  isOpen = false,
+  opened = false,
   onClose = () => {},
 }) => {
   const { switchingOrg, unsetSwitchingOrg } = usePlatformStore((s) => ({
@@ -17,7 +17,7 @@ const SwitchWorkspace: FC<IModal> = ({
   const [workspaces, setWorkspaces] = useState([]);
 
   useEffect(() => {
-    if (!isOpen) return () => {};
+    if (!opened) return () => {};
     const orgId = localStorage.getItem('switchToOrg');
     setFetchWrsFlag(true);
     Rest.organization
@@ -50,7 +50,7 @@ const SwitchWorkspace: FC<IModal> = ({
         else
           return (
             <>
-              <div className="p-4">
+              <div className="py-4 ">
                 <div className="text-sm">
                   <label className="font-semibold text-app-foreground-inactive block">
                     {switchingOrg?.name}
@@ -63,7 +63,7 @@ const SwitchWorkspace: FC<IModal> = ({
                   </span>
                 </div>
               </div>
-              <div className="pl-4 pb-4 pr-2 overflow-auto visible-scrollbar h-80 mr-2">
+              <div className="pb-4 overflow-auto visible-scrollbar h-80 mr-1">
                 {workspaces.map((w) => (
                   <WorkspaceCard
                     key={w.__ref.id}
@@ -83,18 +83,21 @@ const SwitchWorkspace: FC<IModal> = ({
   };
 
   return (
-    <>
+    <Modal
-      <Modal.Header className="with-divider">
+      opened={opened}
-        <div className="text-lg leading-5 p-4 flex items-center font-medium">
+      onClose={onClose}
+      size={440}
+      title={
+        <div className="text-lg leading-5 flex items-center font-medium">
           Switch Workspace
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+    >
+      <>
         <ProgressBar active={isFetchingWrs} />
         {renderBody(isFetchingWrs)}
-      </Modal.Body>
-      <Modal.Footer></Modal.Footer>
       </>
+    </Modal>
   );
 };
 

platform/firecamp-platform/src/components/modals/workspace/WorkspaceManagement.tsx

@@ -18,7 +18,7 @@ enum ETabTypes {
   Members = 'members',
 }
 const WorkspaceManagement: FC<IModal> = ({
-  isOpen = false,
+  opened = false,
   onClose = () => {},
 }) => {
   let { workspace } = useWorkspaceStore((s: IWorkspaceStore) => ({
@@ -104,18 +104,25 @@ const WorkspaceManagement: FC<IModal> = ({
   };
 
   return (
-    <>
+    <Modal
-      <Modal.Header className="with-divider">
+      opened={opened}
-        <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
+      onClose={onClose}
+      title={
+        <div className="text-lg leading-5 px-2 flex items-center font-medium">
           Workspace Management
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+      size={550}
+      classNames={{
+        body: '!p-4 h-[450px]'
+      }}
+    >
+      <>
         <ProgressBar active={isRequesting} />
         <Container>
           <Container.Header>
             <SecondaryTab
-              className="flex items-center !pt-3 w-full"
+              className="flex items-center w-full"
               list={tabs}
               activeTab={activeTab}
               onSelect={(tabId: ETabTypes) => setActiveTab(tabId)}
@@ -123,8 +130,8 @@ const WorkspaceManagement: FC<IModal> = ({
           </Container.Header>
           <Container.Body>{renderTab(activeTab)}</Container.Body>
         </Container>
-      </Modal.Body>
       </>
+    </Modal>
   );
 };
 

platform/firecamp-platform/src/components/modals/workspace/invite-members/InviteMembers.tsx

@@ -12,7 +12,7 @@ enum EInviteMemberTabs {
   OrgMembers = 'orgMembers',
 }
 
-const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
+const InviteMembers: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
   const [isFetchingMembers, setIsFetchingMembers] = useState(false);
   const [orgMembers, setOrgMembers] = useState([]);
 
@@ -86,14 +86,21 @@ const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
   }, [activeTab]);
 
   return (
-    <>
+    <Modal
-      <Modal.Header className="border-b border-app-border">
+      opened={opened}
-        <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
+      onClose={onClose}
+      size={576}
+      classNames={{
+        content: 'h-[700px]',
+        body: 'h-[480px]'
+      }}
+      title={
+        <div className="text-lg leading-5 px-1 flex items-center font-medium">
           Invite Members To Join The Workspace
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body scrollbar={false}>
+    >
-        <div className="p-4 h-fit flex flex-col">
+        <div className="!pt-4 h-fit flex flex-col">
           <SecondaryTab
             className="flex items-center pb-6 -ml-2"
             list={tabs}
@@ -114,8 +121,7 @@ const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
             />
           )}
         </div>
-      </Modal.Body>
+    </Modal>
-    </>
   );
 };
 export default InviteMembers;

platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx

@@ -50,7 +50,7 @@ const InviteOrgMembers: FC<IProps> = ({
 
   const _role = RoleOptions.find((r) => r.id == member.role);
   return (
-    <Container className="gap-2">
+    <Container className="gap-3">
       <Container.Header className="text-base font-semibold leading-3 text-app-foreground-inactive p-6">
         Invite your team colleagues to join the workspace.
       </Container.Header>

platform/firecamp-platform/src/components/modals/workspace/tabs/EditInfoTab.tsx

@@ -11,7 +11,7 @@ const EditInfoTab: FC<any> = ({
   close,
 }) => {
   return (
-    <div className="py-6 px-3 flex-1 flex flex-col">
+    <div className="p-3 flex-1 flex flex-col">
       <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
         UPDATE WORKSPACE INFO
       </label>
@@ -29,12 +29,13 @@ const EditInfoTab: FC<any> = ({
           // error={error.name}
           // iconPosition="right"
           // icon={<VscEdit />}
+          wrapperClassName='!mb-3'
         />
       </div>
 
       <TextArea
         type="text"
-        minHeight="200px"
+        minHeight="180px"
         label="Description (optional)"
         labelClassName="fc-input-label"
         placeholder="Description"

platform/firecamp-platform/src/components/prompt/Confirm.tsx

@@ -38,17 +38,22 @@ const ConfirmationModal: FC<IConfirm> = ({
 
   return (
     <Modal
-      isOpen={state.isOpen}
+      opened={state.isOpen}
       onClose={_close}
-      width={'400px'}
+      size={400}
-      className="min-h-0"
+      classNames={{
-    >
+        header: 'border-0',
-      <Modal.Body>
+        body: 'px-6',
-        <div className="px-2 py-4">
+        content: 'min-h-0',
-          <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
+      }}
+      title={
+        <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative px-2">
           {`CONFIRMATION Required.`}
         </label>
-          <div className="my-4">{title}</div>
+      }
+    >
+      <div>
+        <div className="mb-4">{title}</div>
         <TabHeader className="!px-0">
           <TabHeader.Right>
             <Button
@@ -66,7 +71,6 @@ const ConfirmationModal: FC<IConfirm> = ({
           </TabHeader.Right>
         </TabHeader>
       </div>
-      </Modal.Body>
     </Modal>
   );
 };

platform/firecamp-platform/src/components/prompt/PromptInput.tsx

@@ -81,18 +81,23 @@ export const PromptInput: FC<IPromptInput> = ({
 
   return (
     <Modal
-      isOpen={state.isOpen}
+      opened={state.isOpen}
       onClose={_close}
-      className="min-h-0"
+      size={400}
-      width={'400px'}
+      classNames={{
-    >
+        header: 'border-0 pb-0',
-      <Modal.Body>
+        body: 'px-6',
-        <ProgressBar active={state.isExecuting} />
+        content: 'min-h-0',
-        <div className="px-2 py-4">
+      }}
-          <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
+      title={
+        <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative px-2">
           {header || `THIS IS A HEADER PLACE`}
         </label>
-          <div className="mt-4">
+      }
+    >
+      <ProgressBar active={state.isExecuting} />
+      <div className="pt-4">
+        <div className="">
           <Input
             autoFocus={true}
             label={label}
@@ -125,7 +130,6 @@ export const PromptInput: FC<IPromptInput> = ({
           </TabHeader.Right>
         </TabHeader>
       </div>
-      </Modal.Body>
     </Modal>
   );
 };

platform/firecamp-platform/src/components/prompt/PromptSaveItem.tsx

@@ -90,19 +90,22 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
   texts = { ..._texts, ...texts };
   return (
     <Modal
-      isOpen={state.isOpen}
+      opened={state.isOpen}
       onClose={_close}
-      width={'400px'}
+      size={400}
-      className="p-6"
+      classNames={{
-    >
+        header: 'border-0 px-6 pt-6 pb-0',
-      <ProgressBar active={state.isExecuting} />
+        
-      <Modal.Header>
+      }}
+      title={
         <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
           {header || `THIS IS A HEADER PLACE`}
         </label>
-      </Modal.Header>
+      }
-      <Modal.Body>
+    >
-        <div>
+      <ProgressBar active={state.isExecuting} />
+      <>
+        <div className='h-[340px] pt-4'>
           <div className="mt-4">
             <Input
               autoFocus={true}
@@ -124,8 +127,8 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
             collection={collection}
           />
         </div>
-      </Modal.Body>
+      </>
-      <Modal.Footer className="!pt-4">
+      <div className="!pt-4">
         <TabHeader className="!px-0">
           <TabHeader.Right>
             <Button
@@ -145,7 +148,7 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
             />
           </TabHeader.Right>
         </TabHeader>
-      </Modal.Footer>
+      </div>
     </Modal>
   );
 };

platform/firecamp-platform/src/components/tabs/header/Menu.tsx

@@ -81,7 +81,7 @@ const Menu: FC = () => {
       onSelect={(v) => v.onClick()}
       classNames={{
         dropdown: '!pt-0 -ml-2 border-focusBorder',
-        label: 'uppercase font-sans',
+        label: 'uppercase',
         item: '!px-5'
       }}
       menuProps={{

platform/firecamp-platform/src/types.ts

@@ -56,47 +56,6 @@ export enum EPlatformModalTypes {
   SslNProxy = 'sslNProxy',
 }
 
-export const EPlatformModalDefaultProps = {
-  // organization
-  [EPlatformModalTypes.OrgManagement]: { height: '80vh', width: '600px' },
-  [EPlatformModalTypes.SwitchOrg]: { width: '440px', className: 'p-0 !pb-6' },
-
-  // workspace
-  [EPlatformModalTypes.WorkspaceManagement]: {
-    height: '650px',
-    width: '550px',
-  },
-  [EPlatformModalTypes.InviteMembers]: { height: '700px' },
-  [EPlatformModalTypes.SwitchWorkspace]: {
-    width: '440px',
-    className: 'p-0 !pb-6',
-  },
-
-  // request
-  [EPlatformModalTypes.EditRequest]: { height: '600px', width: '450px' },
-
-  // environment
-
-  [EPlatformModalTypes.CloneEnvironment]: { height: '750px', width: '500px' },
-
-  // auth
-  [EPlatformModalTypes.SignIn]: { width: '440px', className: 'p-4' },
-  [EPlatformModalTypes.SignInWithEmail]: { width: '440px', className: 'p-4' },
-  [EPlatformModalTypes.SignUp]: { width: '440px', className: 'p-4' },
-  [EPlatformModalTypes.RefreshToken]: { modalConfig: { closeOnEsc: false } },
-  [EPlatformModalTypes.ForgotPassword]: { width: '440px', className: 'p-4' },
-  [EPlatformModalTypes.ResetPassword]: { width: '440px', className: 'p-4' },
-
-  // user
-  [EPlatformModalTypes.UserProfile]: {},
-
-  // cookie
-  [EPlatformModalTypes.CookieManager]: {},
-
-  // ssl & proxy
-  [EPlatformModalTypes.SslNProxy]: {},
-};
-
 export enum ECloudApiHeaders {
   Authorization = 'Authorization',
   SocketId = 'X-Socket-Id',

platform/firecamp-ui/package.json

@@ -110,7 +110,6 @@
     "react-complex-tree": "^2.0.0",
     "react-hook-form": "^6.8.1",
     "react-reflex": "^4.0.3",
-    "react-responsive-modal": "^6.2.0",
     "react-table": "7.8.0",
     "react-tiny-popover": "^7.0.1",
     "react-window": "^1.8.5",

platform/firecamp-ui/src/components/buttons/Button.tsx

@@ -7,7 +7,6 @@ const useStyles = createStyles(
   (theme, { variant, color, primary, secondary, transparent, animate }: IButton) => ({
     root: {
       display: 'flex',
-      fontFamily: 'sans-serif',
       fontWeight: 'normal',
       
       ...(!animate ? { ':active': { transform: 'none' } }: {}),

platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx

@@ -318,7 +318,7 @@ export const BodyTab = () => {
       onSelect={(value: any) => setSelected(value.name)}
       classNames={{
         dropdown: 'pt-0 pb-2 -mt-2',
-        label: 'uppercase pl-2 font-sans',
+        label: 'uppercase pl-2',
         item: '!px-4',
       }}
       width={144}
@@ -703,7 +703,7 @@ export const EnvCollectionOption = () => {
       onSelect={(v) => setSelected(v.name)}
       classNames={{
         dropdown: '!pt-0 !pb-2 ',
-        label: 'uppercase font-sans',
+        label: 'uppercase  ',
         item: '!px-5',
       }}
       sm
@@ -728,7 +728,7 @@ export const MemberRoleSelection = () => {
         )}
         classNames={{
           dropdown: '!py-0',
-          label: 'uppercase font-sans !text-start',
+          label: 'uppercase   !text-start',
         }}
         sm
         options={[

platform/firecamp-ui/src/components/modal/Modal.scss

@@ -1,21 +0,0 @@
-/*-----Modal css Start------------*/
-
-  .react-responsive-modal-modal {
-    padding: 0px;
-  }
-  
-  .react-responsive-modal-closeButton {
-    z-index: 99999;
-  }
-  
-  a.border {
-    border-color: inherit !important;
-  }
-
-  .fc-modal-wrapper {
-    display: flex;
-    flex-direction: column;
-    max-height: 90vh;
-    min-height: 400px;
-}
-  /*-----Modal css End------------*/

platform/firecamp-ui/src/components/modal/Modal.stories.mdx

@@ -7,43 +7,12 @@ import LinkTo from '@storybook/addon-links/react';
 
 Modal : To create modals
 
-- Consists of sub-section like :
+- Consists of section like :
-  - header
+  - header (includes title)
   - body
-  - footer
-- Any of the section can be used individually as well.
 
 #### **Component Usage**:
 
-Use `Modal` as wrapper to use single/multiple sub sections <br/>
+- The Modal component is implemented using MantineModal. 
-Modal is created using `react-responsive-modal`
+- It shares the same prop usage as described in the documentation for MantineModal.
-
+- It is essential to supply values for the "opened" prop and the "onClose" prop to control the modal's visibility and handle the close event, respectively.
-| Component    | Description                                                    |
-| ------------ | -------------------------------------------------------------- |
-| Modal        | Wrapper for which takes height & width of its parent component |
-| Modal.Header | section for the header having height of its content            |
-| Modal.Body   | section for the body having the height of its content          |
-| Modal.Footer | section for the footer having height of its content            |
-
-#### **Best Practices**:
-
-Do:
-
-```
-<Modal>
-    <Modal.Header>
-		Header Section
-    </Modal.Header>
-    <Modal.Body>
-		<component> Body Section </component>
-    </Modal.Body>
-    <Modal.Footer>
-		Footer Section
-    </Modal.Footer>
-</Modal>
-```
-
-- #### **Examples**:
-- <LinkTo kind="ui-kit-modal--modal-demo" className="!text-primaryColor">
-    Modal Examples
-  </LinkTo>

platform/firecamp-ui/src/components/modal/Modal.stories.tsx

@@ -1,118 +1,113 @@
-import { useState } from "react";
+import { useState } from 'react';
-import { VscGithub } from "@react-icons/all-files/vsc/VscGithub";
+import { VscGithub } from '@react-icons/all-files/vsc/VscGithub';
-import { VscLock } from "@react-icons/all-files/vsc/VscLock";
+import { VscLock } from '@react-icons/all-files/vsc/VscLock';
-import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
+import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
-import { GrGoogle } from "@react-icons/all-files/gr/GrGoogle";
 
-import { default as Modal } from './Modal';
+import { Modal, Button, FormField, Input, IModal } from '@firecamp/ui';
-import { default as Button } from '../buttons/Button';
-import { default as FormField } from '../form/FormField';
-import { default as Input } from '../input/Input';
 
 export default {
-    title: "UI-Kit/Modal",
+  title: 'UI-Kit/Modal',
   component: Modal,
   argTypes: {
-        className: ""
+    className: '',
-    }
+  },
 };
 
-const Template = (args: any) => {
+const Template = ({ opened, ...args }: IModal) => {
-    const [isOpen, toggleOpen] = useState(true);
+  const [isOpen, openModal] = useState(opened);
 
-    return <div className="bg-app-background h-screen w-screen block">
+  return (
-        <Button text="Open Modal" onClick={() => toggleOpen(true)} />
+    <div>
-        <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
+      <Button text="Open Modal" onClick={() => openModal(true)} />
-            <Modal.Header >
+      <Modal opened={isOpen} onClose={() => openModal(false)} {...args} />
-                {args?.header() || ''}
-            </Modal.Header>
-            <Modal.Body >
-                {args?.body() || ''}
-            </Modal.Body>
-            <Modal.Footer >
-                {args?.footer() || ''}
-            </Modal.Footer>
-        </Modal>
     </div>
+  );
 };
 
 export const ModalDemo = Template.bind({});
-
 ModalDemo.args = {
-    className: 'test',
+  opened: true,
-    header: () => <ModalHeader />,
+  title: <div>SignIn to Firecamp</div>,
-    body: () => <ModalBody />,
+  children: <FormPreview />,
-    footer: () => <ModalFooter />
 };
 
-export const SignUpDemo = Template.bind({});
+export const ModalTitleWithoutBorder = Template.bind({});
-
+ModalTitleWithoutBorder.args = {
-SignUpDemo.args = {
+  opened: true,
-    className: 'test',
+  title: <div>SignIn to Firecamp</div>,
-    header: () => <SignUpHeader />,
+  classNames: {
-    body: () => <SignUpBody />,
+    header: 'border-0',
-    footer: () => <SignUpFooter />
+  },
+  children: <FormPreview />,
+};
+export const ModalContentOverflow = Template.bind({});
+ModalContentOverflow.args = {
+  opened: true,
+  title: <div>SignIn to Firecamp</div>,
+  children: (
+    <>
+      <FormPreview overflowContent />
+      <FormPreview overflowContent />
+    </>
+  ),
 };
 
-const SignUpHeader = () => {
+function FormPreview({ overflowContent = false }) {
-    return (
-        <div className="text-modal-foreground-active text-lg text-center mb-6">sign in to your firecamp account</div>
-    )
-}
-
-const SignUpBody = () => {
   return (
+    <div className="pt-6">
       <div>
-            <div className="" >
-                <div className="text-center w-full mb-5">new to firecamp? <a className="text-primaryColor cursor-pointer">sign up</a></div>
-                <a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <VscGithub size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">github</span></a>
-                <a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <GrGoogle size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">google</span></a>
-            </div>
-            <hr className="border-modal-border -ml-8 -mr-8 mb-6" />
         <div className="">
-                <FormField label="Username or E-mail" >
+          <a
+            href="#"
+            className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"
+          >
+            {' '}
+            <VscGithub size={20} className="mr-2" /> continue with{' '}
+            <span className="text-modal-foreground-active ml-2">github</span>
+          </a>
+        </div>
+
+        <div className="relative my-4 flex justify-center items-center">
+          <hr className="border-t border-app-border w-full" />
+          <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
+            OR
+          </span>
+        </div>
+        <div className="">
+          <div className="text-center w-full text-sm mb-5">
+            Sign in again to continue
+          </div>
+          <FormField label="Username or E-mail">
             <Input
-                        placeholder='Username or E-mail'
+              value="dnishchit@gmail.com"
-                        iconPosition='left'
+              iconPosition="left"
-                        icon={<VscAccount title="Account" size={16} />} />
+              icon={<VscAccount title="Account" size={16} />}
+            />
           </FormField>
           <FormField label="password">
-                    <Input placeholder='password' iconPosition='left' icon={<VscLock title="Account" size={16} />} />
+            <Input
+              placeholder="password"
+              iconPosition="left"
+              icon={<VscLock title="Account" size={16} />}
+            />
           </FormField>
-                <Button text="sign in" fullWidth primary sm/>
+          <a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm">
-                <a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm -mt-4">Already have an account? Sign In</a>
+            Forgot Password?
+          </a>
+          <Button text="sign in" fullWidth primary sm />
         </div>
       </div>
-    )
-}
 
-const SignUpFooter = () => {
+      {overflowContent ? (
-    return (
+        <>
+          <hr className="border-modal-border -ml-8 -mr-8 mb-6 mt-6" />
           <div className="text-sm mt-6">
-            By moving forward, you acknowledge that you have read and accept the <a className="text-modal-foreground-active cursor-pointer">Terms of Service</a> and <a className="text-modal-foreground-active">Privacy Policy.</a>
+            <div className="text-center">SignOut Forcefully</div>
           </div>
-    )
+        </>
-}
+      ) : (
-
+        <></>
-const ModalHeader = () => {
+      )}
-    return (
-        <div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
-    )
-}
-
-const ModalBody = () => {
-    return (
-        <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     </div>
-    )
+  );
-}
-
-const ModalFooter = () => {
-    return (
-        <div className="text-sm mt-6">
-            Modal Footer
-        </div>
-    )
 }

platform/firecamp-ui/src/components/modal/Modal.test.tsx

@@ -1,88 +1,85 @@
-import { useState } from "react";
+// TODO : update tests based on new button
-import "@testing-library/jest-dom";
-import { screen, render, waitFor } from "@testing-library/react";
-import { default as Modal } from './Modal';
-import Button from "../buttons/Button";
-import { click } from "../../../__mocks__/eventMock";
 
-const Template = (args: any) => {
+// import { useState } from "react";
-    const [isOpen, toggleOpen] = useState(true);
+// import "@testing-library/jest-dom";
+// import { screen, render, waitFor } from "@testing-library/react";
+// import { default as Modal } from './Modal';
+// import Button from "../buttons/Button";
+// import { click } from "../../../__mocks__/eventMock";
 
-    return <div className="bg-app-background h-screen w-screen block">
+// const Template = (args: any) => {
-        <Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} />
+//     const [isOpen, toggleOpen] = useState(true);
-        <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
-            <Modal.Header>
-                <div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
-            </Modal.Header>
-            <Modal.Body >
-                <div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-                </div>
-            </Modal.Body>
-            <Modal.Footer>
-                <div className="text-sm mt-6">
-                    Modal Footer
-                </div>
-            </Modal.Footer>
-        </Modal>
-    </div>
-};
 
-describe("Modal component", () => {
+//     return <div className="bg-app-background h-screen w-screen block">
+//         <Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} />
+//         <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
+//             <Modal.Header>
+//                 <div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
+//             </Modal.Header>
+//             <Modal.Body >
+//                 <div>
+//                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+//                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+//                 </div>
+//             </Modal.Body>
+//             <Modal.Footer>
+//                 <div className="text-sm mt-6">
+//                     Modal Footer
+//                 </div>
+//             </Modal.Footer>
+//         </Modal>
+//     </div>
+// };
 
-    test("Validating child element count and styles of modal wrapper", () => {
+// describe("Modal component", () => {
-        render(<Template id={'modal-container-div'} />);
 
-        const ModalContainer = screen.queryByTestId('root');
+//     test("Validating child element count and styles of modal wrapper", () => {
-        const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
+//         render(<Template id={'modal-container-div'} />);
 
-        expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper');
+//         const ModalContainer = screen.queryByTestId('root');
-        expect(ModalContainerDiv.childElementCount).toBe(3);
+//         const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
 
-    });
+//         expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper');
+//         expect(ModalContainerDiv.childElementCount).toBe(3);
     
-    test("Validating default classnames for modal children elements", () => {
+//     });
-        render(<Template id={'modal-container-div'} />);
 
-        const ModalContainer = screen.queryByTestId('root');
+//     test("Validating default classnames for modal children elements", () => {
-        const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
+//         render(<Template id={'modal-container-div'} />);
-        const ModalContainerElements = ModalContainerDiv.children;
 
-        //Header - dont have default class names
+//         const ModalContainer = screen.queryByTestId('root');
+//         const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
+//         const ModalContainerElements = ModalContainerDiv.children;
 
-        //Body
+//         //Header - dont have default class names
-        expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
 
-        //Footer
+//         //Body
-        expect(ModalContainerElements[2]).toHaveClass('flex')
+//         expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
-    });
 
-    test("should appears/disappers based on button click event", async () => {
+//         //Footer
-        render(<Template id={'modal-container-div'} />);
+//         expect(ModalContainerElements[2]).toHaveClass('flex')
+//     });
 
-        // when react-responsive-modal is visible
+//     test("should appears/disappers based on button click event", async () => {
-        const container = screen.queryByTestId('overlay');
+//         render(<Template id={'modal-container-div'} />);
-        expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
 
-        // validate the button text for popup state
+//         // when react-responsive-modal is visible
-        let button = screen.queryByText('Close Modal');
+//         const container = screen.queryByTestId('overlay');
-        expect(button).toBeInTheDocument();
+//         expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
 
-        // modal should not be visible after clicking close button
+//         // validate the button text for popup state
-        const ClosePopupButton = screen.queryByTestId("close-button");
+//         let button = screen.queryByText('Close Modal');
-        click(ClosePopupButton);
+//         expect(button).toBeInTheDocument();
 
-        button = await waitFor(() => screen.queryByText('Open Modal'));
+//         // modal should not be visible after clicking close button
-        expect(button).toBeInTheDocument();
+//         const ClosePopupButton = screen.queryByTestId("close-button");
+//         click(ClosePopupButton);
 
-        // visibility of react-responsive-modal is seen by update in style property 
+//         button = await waitFor(() => screen.queryByText('Open Modal'));
-        expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
+//         expect(button).toBeInTheDocument();
-    });
 
-});
+//         // visibility of react-responsive-modal is seen by update in style property 
-
+//         expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
-// Todo update the import in Modal component to run the test case
+//     });
-// import Container from "../grid/Container";
-// import Row from "../grid/Row";
 
+// });

platform/firecamp-ui/src/components/modal/Modal.tsx

@@ -1,101 +1,93 @@
 import { FC } from 'react';
-import cx from 'classnames';
+import { Modal as MantineModal, ModalProps, ScrollArea } from '@mantine/core';
-import { VscClose } from '@react-icons/all-files/vsc/VscClose';
+import { createStyles } from '@mantine/core';
-import ResponsiveModal from 'react-responsive-modal';
-import 'react-responsive-modal/styles.css';
-import './Modal.scss';
 
-import { Container, Row } from '../../ui-kit';
+export interface IModal extends ModalProps {}
 
-import { IModal, IHeader, IBody, IFooter } from './interfaces/Modal.interface';
+// custom styles for variants
+const useStyles = createStyles((theme, { title }: IModal) => ({
+  content: {
+    borderRadius: '0px',
+    backgroundColor:
+      theme.colorScheme === 'light'
+        ? theme.colors.gray[1]
+        : theme.colors.dark[6],
+    color:
+      theme.colorScheme === 'light'
+        ? theme.colors.dark[5]
+        : theme.colors.gray[4],
+    maxWidth: '48rem',
+    minHeight: '400px',
+  },
+  header: {
+    backgroundColor: 'transparent',
+    color:
+      theme.colorScheme === 'light'
+        ? theme.colors.dark[5]
+        : theme.colors.gray[4],
+    paddingRight: '1rem',
+    paddingTop: '1rem',
+    paddingBottom: !!title ? '1rem' : '0px',
+    ...(!!title
+      ? {
+          borderBottom: `1px solid ${
+            theme.colorScheme === 'light'
+              ? theme.colors.gray[4]
+              : theme.colors.dark[4]
+          }`,
+          backgroundColor:
+          theme.colorScheme === 'light'
+            ? theme.colors.gray[1]
+            : theme.colors.dark[6],
+        }
+      : {}),
+  },
+  body: {
+    paddingLeft: '2rem',
+    paddingRight: '2rem',
+    paddingBottom: '2rem',
+    position: 'relative',
+  },
+}));
 
-const Modal: FC<IModal> & {
+const Modal: FC<IModal> = ({
-  Header: FC<IHeader>;
-  Body: FC<IBody>;
-  Footer: FC<IFooter>;
-} = ({
   id = '',
-  showCloseIcon = true,
+  opened = false,
-  isOpen = false,
+  classNames = {},
-  className = '',
-  modalClass = '',
-  modalConfig = {},
   onClose = () => {},
-  children = '',
+  children = <></>,
-  height,
+  ...props
-  width,
 }) => {
+  const { classes, cx, theme } = useStyles({
+    title: props.title,
+    opened,
+    onClose: () => {},
+  });
+
   return (
-    <ResponsiveModal
+    <MantineModal
-      open={isOpen}
+      opened={opened}
-      onClose={() => {
+      onClose={() => onClose()}
-        onClose();
-      }}
-      center
-      closeIcon={<VscClose size={20} className="cursor-pointer z-50" />}
-      {...modalConfig}
-    >
-      <div
-        className={cx(
-          className,
-          'max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper h-full'
-        )}
-        style={{ height: height, width: width }}
       id={id}
-      >
+      centered
-        {/* {showCloseIcon ? (
+      classNames={{
-            <VscClose
+        ...classNames,
-              size={20}
+        content: cx('invisible-scrollbar', classes.content, classNames.content),
-              className="absolute top-3 right-3 cursor-pointer z-50"
+        header: cx(classes.header, classNames.header),
-              onClick={(e) => {
+        body: cx(classes.body, classNames.body),
-                onClose();
       }}
-            />
+      scrollAreaComponent={ScrollArea.Autosize}
-          ) : <></>} */}
+      closeButtonProps={{
-        {children}
+        bg:
-      </div>
+          theme.colorScheme === 'light'
-    </ResponsiveModal>
+            ? theme.colors.gray[1]
-  );
+            : theme.colors.dark[6],
-};
+      }}
-
+      {...props}
-// `id`: is not being updated on the element
-let Header: FC<IHeader> = ({ id = '', children = '', className = '' }) => {
-  return (
-    <Container.Header className={className || ''} id={id}>
-      {children}
-    </Container.Header>
-  );
-};
-
-// `id`: is not being updated on the element
-let Body: FC<IBody> = ({
-  id = '',
-  children = '',
-  className = '',
-  scrollbar = true,
-}) => {
-  return (
-    <Container.Body
-      className={cx(className, 'flex flex-col overflow-auto thin !p-4', {
-        'visible-scrollbar': scrollbar,
-      })}
-      id={id}
     >
       {children}
-    </Container.Body>
+    </MantineModal>
   );
 };
 
-let Footer: FC<IFooter> = ({ id = '', children = '', className = '' }) => {
-  return (
-    <Container.Footer className={className || 'flex'} id={id}>
-      <Row className="w-full with-divider">{children}</Row>
-    </Container.Footer>
-  );
-};
-
-Modal.Header = Header;
-Modal.Body = Body;
-Modal.Footer = Footer;
-
 export default Modal;

platform/firecamp-ui/src/components/modal/SessionExpired.stories.tsx

@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { VscGithub } from "@react-icons/all-files/vsc/VscGithub";
-import { VscLock } from "@react-icons/all-files/vsc/VscLock";
-import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
-import { GrGoogle } from "@react-icons/all-files/gr/GrGoogle";
-
-import { default as Modal } from './Modal';
-import { default as Button } from '../buttons/Button';
-import { default as FormField } from '../form/FormField';
-import { default as Input } from '../input/Input';
-
-
-export default {
-    title: "UI-Kit/Modal",
-    component: Modal,
-    argTypes: {
-        className: ""
-    }
-};
-
-const Template = (args: any) => {
-    let [isOpen, toggleOpen] = useState(true);
-
-return <div className="bg-app-background h-screen w-screen block">
-    <Button text="Open Modal"  onClick={() => toggleOpen(true)}/>
-    <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
-        <Modal.Header >
-            {args?.header() || ''}
-        </Modal.Header>
-        <Modal.Body >
-            {args?.body() || ''}
-        </Modal.Body>
-        <Modal.Footer >
-            {args?.footer() || ''}
-        </Modal.Footer>
-    </Modal>
-</div>};
-
-export const SessionExpireDemo = Template.bind({});
-SessionExpireDemo.args = {
-    className: 'test',
-    header: () => <SignUpHeader />,
-    body: () => <SignUpBody />,
-    footer: () => <SignUpFooter />
-};
-
-const SignUpHeader = () => {
-    return (
-        <div className="text-error text-lg text-center mb-6">Session expired</div>
-    )
-}
-const SignUpBody = () => {
-    return (
-        <div>
-            <div className="" >
-                <div className="text-center w-full text-sm mb-5">Sign in again to continue</div>
-                <FormField label="Username or E-mail" >
-                    <VscAccount title="Account" size={16} />
-                    <Input value="dnishchit@gmail.com" />
-                </FormField>
-                <FormField label="password" >
-                    <Input placeholder='password' iconPosition='left' icon={<VscLock title="Account" size={16} />} />
-                </FormField>
-                <a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm">Forgot Password?</a>
-                <Button text="sign in" fullWidth primary sm/>
-            </div>
-            <hr className="border-modal-border -ml-8 -mr-8 mb-6 mt-6" />
-            <div className="">
-
-                <a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <VscGithub size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">github</span></a>
-                <a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <GrGoogle size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">google</span></a>
-
-            </div>
-        </div>
-    )
-}
-const SignUpFooter = () => {
-    return (
-        <div className="text-sm mt-6">
-            <div className="text-center">SignOut Forcefully</div>
-        </div>
-    )
-}

platform/firecamp-ui/src/components/modal/interfaces/Modal.interface.ts

@@ -1,61 +0,0 @@
-import { ReactChildren } from 'react';
-
-export interface IModal {
-  /**
-   * DOM id
-   */
-  id?: string;
-  /**
-   * Show close icon flag
-   */
-  showCloseIcon?: boolean;
-  /**
-   * Is modal open or not
-   */
-  isOpen?: boolean;
-  /**
-   * Classname to show custom styling
-   */
-  className?: string;
-  /**
-   * Modal class name
-   */
-  modalClass?: string;
-  /**
-   * Modal (react-responsive-modal) configuration
-   * @ref: https://react-responsive-modal.leopradel.com/#props
-   */
-  modalConfig?: object;
-  /**
-   * Function to call on close modal
-   */
-  onClose?: (e?: any) => any;
-  /**
-   * child component
-   */
-  children?: any;
-
-  height?: number | string;
-  width?: number | string;
-
-  scrollbar?: boolean;
-}
-
-export interface IHeader {
-  id?: string;
-  children?: any;
-  className?: string;
-}
-
-export interface IBody {
-  id?: string;
-  children?: any;
-  className?: string;
-  scrollbar?: boolean;
-}
-
-export interface IFooter {
-  id?: string;
-  children?: any;
-  className?: string;
-}

platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx

@@ -123,6 +123,315 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
     >
       <MantineProvider
         theme={{
+          // added custom preflight css to prevent default button styles as it affects the mantine button component preview
+          globalStyles: (theme) => ({
+            /*
+            1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+            2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+            */
+            '*,::before,::after': {
+              boxSizing: 'border-box' /* 1 */,
+              borderWidth: 0 /* 2 */,
+              borderStyle: 'solid' /* 2 */,
+              borderColor: 'currentColor' /* 2 */,
+            },
+
+            '::before,::after': {
+              '--tw-content': '',
+            },
+
+            /*
+            1. Use a consistent sensible line-height in all browsers.
+            2. Prevent adjustments of font size after orientation changes in iOS.
+            3. Use a more readable tab size.
+            4. Use the user's configured `sans` font-family by default.
+            5. Use the user's configured `sans` font-feature-settings by default.
+            6. Use the user's configured `sans` font-variation-settings by default.
+            */
+
+            html: {
+              lineHeight: 1.5 /* 1 */,
+              '-webkit-text-size-adjust': '100%' /* 2 */,
+              '-moz-tab-size': 4 /* 3 */,
+              '-o-tab-size': 4,
+              tabSize: 4 /* 3 */,
+              fontFamily: 'sans-serif' /* 4 */,
+              fontFeatureSettings: 'normal' /* 5 */,
+              fontVariationSettings: 'normal' /* 6 */,
+            },
+
+            /*
+            1. Remove the margin in all browsers.
+            2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+            */
+            body: {
+              margin: 0 /* 1 */,
+              lineHeight: 'inherit' /* 2 */,
+            },
+
+            /*
+            1. Add the correct height in Firefox.
+            2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+            3. Ensure horizontal rules are visible by default.
+            */
+            'hr ': {
+              height: 0 /* 1 */,
+              color: 'inherit' /* 2 */,
+              borderTopWidth: '1px' /* 3 */,
+            },
+
+            /*
+            Add the correct text decoration in Chrome, Edge, and Safari.
+            */
+            'abbr:where([title])': {
+              textDecoration: 'underline dotted',
+            },
+
+            /*
+            Remove the default font size and weight for headings.
+            */
+            'h1,h2,h3,h4,h5,h6': {
+              fontSize: 'inherit',
+              fontWeight: 'inherit',
+            },
+
+            /*
+            Reset links to optimize for opt-in styling instead of opt-out.
+            */
+            a: {
+              color: 'inherit',
+              textDecoration: 'inherit',
+            },
+
+            /*
+            Add the correct font weight in Edge and Safari.
+            */
+            'b,strong': {
+              fontWeight: 'bolder',
+            },
+
+            /*
+            1. Use the user's configured `mono` font family by default.
+            2. Correct the odd `em` font sizing in all browsers.
+            */
+            'code,kbd,samp,pre': {
+              fontFamily: 'ui-monospace' /* 1 */,
+              fontSize: '1em' /* 2 */,
+            },
+
+            /*
+            Add the correct font size in all browsers.
+            */
+            small: {
+              fontSize: '80%',
+            },
+
+            /*
+            Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+            */
+            'sub,sup': {
+              fontSize: '75%',
+              lineHeight: 0,
+              position: 'relative',
+              verticalAlign: 'baseline',
+            },
+
+            sub: {
+              bottom: '-0.25em',
+            },
+
+            sup: {
+              top: '-0.5em',
+            },
+
+            /*
+            1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+            2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+            3. Remove gaps between table borders by default.
+            */
+            table: {
+              textIndent: 0 /* 1 */,
+              borderColor: 'inherit' /* 2 */,
+              borderCollapse: 'collapse' /* 3 */,
+            },
+
+            /*
+            1. Change the font styles in all browsers.
+            2. Remove the margin in Firefox and Safari.
+            3. Remove default padding in all browsers.
+            */
+            'button,input,optgroup,select,textarea': {
+              fontFamily: 'inherit' /* 1 */,
+              fontSize: '100%' /* 1 */,
+              fontWeight: 'inherit' /* 1 */,
+              lineHeight: 'inherit' /* 1 */,
+              color: 'inherit' /* 1 */,
+              margin: 0 /* 2 */,
+              padding: 0 /* 3 */,
+            },
+
+            /*
+            Remove the inheritance of text transform in Edge and Firefox.
+            */
+            'button,select': {
+              textTransform: 'none',
+            },
+
+            /*
+            1. Correct the inability to style clickable types in iOS and Safari.
+            2. Remove default button styles.
+            */
+            /* Update: The default button styles were commented out due to their interference with the default styles of Mantine components. */
+            /* button,[type='button'],[type='reset'],[type='submit'] {
+              -webkit-appearance: button; //1
+              background-color: transparent; //2
+              background-image: none; //2
+            } */
+
+            /*
+            Use the modern Firefox focus style for all focusable elements.
+            */
+            ':-moz-focusring': {
+              outline: 'auto',
+            },
+
+            /*
+            Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+            */
+            ':-moz-ui-invalid': {
+              boxShadow: 'none',
+            },
+
+            /*
+            Add the correct vertical alignment in Chrome and Firefox.
+            */
+            progress: {
+              verticalAlign: 'baseline',
+            },
+
+            /*
+            Correct the cursor style of increment and decrement buttons in Safari.
+            */
+            '::-webkit-inner-spin-button,::-webkit-outer-spin-button': {
+              height: 'auto',
+            },
+
+            /*
+            1. Correct the odd appearance in Chrome and Safari.
+            2. Correct the outline style in Safari.
+            */
+            '[type="search"]': {
+              '-webkit-appearance': 'textfield' /* 1 */,
+              'outline-offset': '-2px' /* 2 */,
+            },
+
+            /*
+            Remove the inner padding in Chrome and Safari on macOS.
+            */
+            '::-webkit-search-decoration': {
+              '-webkit-appearance': 'none',
+            },
+
+            /*
+            1. Correct the inability to style clickable types in iOS and Safari.
+            2. Change font properties to `inherit` in Safari.
+            */
+            '::-webkit-file-upload-button': {
+              '-webkit-appearance': 'button' /* 1 */,
+              font: 'inherit' /* 2 */,
+            },
+
+            /*
+            Add the correct display in Chrome and Safari.
+            */
+            summary: {
+              display: 'list-item',
+            },
+
+            /*
+            Removes the default spacing and border for appropriate elements.
+            */
+            'blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre': {
+              margin: 0,
+            },
+
+            fieldset: {
+              margin: 0,
+              padding: 0,
+            },
+
+            legend: {
+              padding: 0,
+            },
+
+            'ol,ul,menu': {
+              listStyle: 'none',
+              margin: 0,
+              padding: 0,
+            },
+
+            /*
+            Prevent resizing textareas horizontally by default.
+            */
+            textarea: {
+              resize: 'vertical',
+            },
+
+            /*
+            1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+            2. Set the default placeholder color to the user's configured gray 400 color.
+            */
+            'input::-moz-placeholder,textarea::-moz-placeholder': {
+              opacity: 1 /* 1 */,
+              color: '#9ca3af' /* 2 */,
+            },
+
+            /*
+            1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+            2. Set the default placeholder color to the user's configured gray 400 color.
+            */
+            'input::placeholder,textarea::placeholder': {
+              opacity: 1 /* 1 */,
+              color: '#9ca3af' /* 2 */,
+            },
+
+            /*
+            Set the default cursor for buttons.
+            */
+            'button,[role="button"]': {
+              cursor: 'pointer',
+            },
+
+            /*
+            Make sure disabled buttons don't get the pointer cursor.
+            */
+            ':disabled': {
+              cursor: 'default',
+            },
+
+            /*
+            1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+            2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+            This can trigger a poorly considered lint error in some tools but is included by design.
+            */
+            'img,svg,video,canvas,audio,iframe,embed,object': {
+              display: 'block' /* 1 */,
+              verticalAlign: 'middle' /* 2 */,
+            },
+
+            /*
+            Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+            */
+            'img,video': {
+              maxWidth: '100%',
+              height: 'auto',
+            },
+
+            /* Make elements with the HTML hidden attribute stay hidden by default */
+            '[hidden]': {
+              display: 'none',
+            },
+          }),
           colorScheme,
           colors: {
             'primary-color': [

platform/firecamp-ui/src/scss/base.scss

@@ -9,8 +9,6 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
-/* added custom preflight css to prevent default button styles as it affects the mantine button component preview */
-@import url('./preflight.css');
 
 @layer base {
   :root{

platform/firecamp-ui/src/scss/preflight.css

@@ -1,381 +0,0 @@
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: currentColor; /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-*/
-
-html {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  -o-tab-size: 4;
-  tab-size: 4; /* 3 */
-  font-family: sans-serif; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-/* Update: The default button styles were commented out due to their interference with the default styles of Mantine components. */
-/* button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button; //1
-  background-color: transparent; //2
-  background-image: none; //2
-} */
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role='button'] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
-  display: none;
-}

platform/firecamp-ui/src/scss/tailwind.scss

@@ -453,10 +453,6 @@
 .z-30{
    z-index: 30;
 
-}
-.z-50{
-   z-index: 50;
-
 }
 .float-right{
    float: right;
@@ -504,6 +500,11 @@
    margin-left: 0.5rem;
    margin-right: 0.5rem;
 
+}
+.mx-4{
+   margin-left: 1rem;
+   margin-right: 1rem;
+
 }
 .mx-auto{
    margin-left: auto;
@@ -542,6 +543,10 @@
 .\!mb-2{
    margin-bottom: 0.5rem !important;
 
+}
+.\!mb-3{
+   margin-bottom: 0.75rem !important;
+
 }
 .\!ml-auto{
    margin-left: auto !important;
@@ -726,6 +731,10 @@
 .mt-2{
    margin-top: 0.5rem;
 
+}
+.mt-3{
+   margin-top: 0.75rem;
+
 }
 .mt-4{
    margin-top: 1rem;
@@ -798,6 +807,10 @@
 .contents{
    display: contents;
 
+}
+.list-item{
+   display: list-item;
+
 }
 .hidden{
    display: none;
@@ -895,14 +908,42 @@
 .h-\[30px\]{
    height: 30px;
 
+}
+.h-\[340px\]{
+   height: 340px;
+
+}
+.h-\[450px\]{
+   height: 450px;
+
+}
+.h-\[480px\]{
+   height: 480px;
+
 }
 .h-\[50vh\]{
    height: 50vh;
 
+}
+.h-\[600px\]{
+   height: 600px;
+
+}
+.h-\[700px\]{
+   height: 700px;
+
 }
 .h-\[70vh\]{
    height: 70vh;
 
+}
+.h-\[750px\]{
+   height: 750px;
+
+}
+.h-\[80vh\]{
+   height: 80vh;
+
 }
 .h-fit{
    height: -moz-fit-content;
@@ -1255,6 +1296,10 @@
 .gap-2{
    gap: 0.5rem;
 
+}
+.gap-3{
+   gap: 0.75rem;
+
 }
 .gap-4{
    gap: 1rem;
@@ -2042,10 +2087,22 @@
 .pt-3{
    padding-top: 0.75rem;
 
+}
+.pt-4{
+   padding-top: 1rem;
+
 }
 .pt-5{
    padding-top: 1.25rem;
 
+}
+.pt-6{
+   padding-top: 1.5rem;
+
+}
+.pt-px{
+   padding-top: 1px;
+
 }
 .text-left{
    text-align: left;
@@ -2811,8 +2868,6 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
-/* added custom preflight css to prevent default button styles as it affects the mantine button component preview */
-@import url('./preflight.css');
 
 body{
    background-color: var(--app-background);

platform/firecamp-ui/src/ui-kit.ts

@@ -30,7 +30,7 @@ export { default as FileInput } from './components/input/FileInput';
 
 // Modal
 export { default as Modal } from './components/modal/Modal';
-export type { IModal } from './components/modal/interfaces/Modal.interface';
+export type { IModal } from './components/modal/Modal';
 
 export { default as SplitView } from './components/split-view/SplitView';
 

playgrounds/firecamp-rest/src/components/common/code-snippets/CodeSnippets.tsx

@@ -104,17 +104,18 @@ const CodeSnippets = ({ tabId = '' }) => {
 
   return (
     <Modal
-      isOpen={isCodeSnippetOpen}
+      opened={isCodeSnippetOpen}
       onClose={() => toggleOpenCodeSnippet()}
-      height="80vh"
+      size={768}
-      width="768px"
+      classNames={{
-    >
+        content: 'h-[80vh]'
-      <Modal.Header className="border-app-border border-b">
+      }}
+      title={
         <div className="text-modal-foreground-active text-lg px-6 py-3 ">
           {'Rest code snippet'}
         </div>
-      </Modal.Header>
+      }
-      <Modal.Body>
+    >
         <Container>
           <Container.Header className="z-20">
             <Tabs
@@ -191,7 +192,6 @@ const CodeSnippets = ({ tabId = '' }) => {
             </div>
           </Container.Body>
         </Container>
-      </Modal.Body>
     </Modal>
   );
 };

playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx

@@ -200,7 +200,7 @@ const BodyTypeDropDown: FC<any> = ({
       onSelect={(selected) => onSelect(selected)}
       classNames={{
         dropdown: '!pt-0 -mt-2',
-        label: 'uppercase pl-2 font-sans',
+        label: 'uppercase pl-2  ',
         item: '!px-4',
       }}
       width={144}