mirror of
https://github.com/LukeHagar/firecamp.git
synced 2025-12-10 04:19:54 +00:00
ui: modals are replaced with mantine modal
This commit is contained in:
Nishchit
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -23,10 +23,8 @@ const ErrorPopup: FC<FallbackProps> = ({ error }) => {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
modalConfig={{
|
||||
styles: bg,
|
||||
}}
|
||||
opened={isOpen}
|
||||
styles={{ content: bg.modal }}
|
||||
onClose={_onClose}
|
||||
className="fc-error-popup"
|
||||
>
|
||||
|
||||
@@ -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 */}
|
||||
<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}
|
||||
/>
|
||||
{renderModal(currentOpenModal)}
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
@@ -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.Header>
|
||||
<img className="mx-auto w-12 mb-6" src={'img/mail-send.png'} />
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
<Mail
|
||||
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 mt-6">
|
||||
|
||||
<div className="text-sm p-4">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header>
|
||||
<Modal opened={opened} onClose={onClose} closeOnEscape={false}>
|
||||
<Header />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Body onClose={onClose} />
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Footer />
|
||||
</Modal.Footer>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Body>
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
{/* <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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Body>
|
||||
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
|
||||
<div className="mb-4">
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
<div className="mb-2">
|
||||
<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.Footer></Modal.Footer>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Body>
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
{/* <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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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
|
||||
text="Cancel"
|
||||
onClick={(e) => onClose()}
|
||||
ghost
|
||||
xs
|
||||
/>
|
||||
<Button 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header>
|
||||
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium border-b border-app-border ">
|
||||
<Modal
|
||||
opened={opened}
|
||||
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"
|
||||
|
||||
@@ -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.Header className="with-divider">
|
||||
<div className="text-lg leading-5 p-4 flex items-center font-medium">
|
||||
<Modal
|
||||
opened={opened}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header className="with-divider">
|
||||
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium display-block">
|
||||
{/* Update Request Info */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header className="with-divider">
|
||||
<div className="text-lg leading-5 p-4 flex items-center font-medium">
|
||||
<Modal
|
||||
opened={opened}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header className="with-divider">
|
||||
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
|
||||
<Modal
|
||||
opened={opened}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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.Header className="border-b border-app-border">
|
||||
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
|
||||
<Modal
|
||||
opened={opened}
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -38,17 +38,22 @@ const ConfirmationModal: FC<IConfirm> = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={state.isOpen}
|
||||
opened={state.isOpen}
|
||||
onClose={_close}
|
||||
width={'400px'}
|
||||
className="min-h-0"
|
||||
>
|
||||
<Modal.Body>
|
||||
<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">
|
||||
size={400}
|
||||
classNames={{
|
||||
header: 'border-0',
|
||||
body: 'px-6',
|
||||
content: 'min-h-0',
|
||||
}}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -81,18 +81,23 @@ export const PromptInput: FC<IPromptInput> = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={state.isOpen}
|
||||
opened={state.isOpen}
|
||||
onClose={_close}
|
||||
className="min-h-0"
|
||||
width={'400px'}
|
||||
>
|
||||
<Modal.Body>
|
||||
<ProgressBar active={state.isExecuting} />
|
||||
<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">
|
||||
size={400}
|
||||
classNames={{
|
||||
header: 'border-0 pb-0',
|
||||
body: 'px-6',
|
||||
content: 'min-h-0',
|
||||
}}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -90,19 +90,22 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
|
||||
texts = { ..._texts, ...texts };
|
||||
return (
|
||||
<Modal
|
||||
isOpen={state.isOpen}
|
||||
opened={state.isOpen}
|
||||
onClose={_close}
|
||||
width={'400px'}
|
||||
className="p-6"
|
||||
>
|
||||
<ProgressBar active={state.isExecuting} />
|
||||
<Modal.Header>
|
||||
size={400}
|
||||
classNames={{
|
||||
header: 'border-0 px-6 pt-6 pb-0',
|
||||
|
||||
}}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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' } }: {}),
|
||||
|
||||
@@ -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={[
|
||||
|
||||
@@ -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------------*/
|
||||
@@ -7,43 +7,12 @@ import LinkTo from '@storybook/addon-links/react';
|
||||
|
||||
Modal : To create modals
|
||||
|
||||
- Consists of sub-section like :
|
||||
- header
|
||||
- Consists of section like :
|
||||
- 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/>
|
||||
Modal is created using `react-responsive-modal`
|
||||
|
||||
| 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>
|
||||
- The Modal component is implemented using MantineModal.
|
||||
- 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.
|
||||
|
||||
@@ -1,118 +1,113 @@
|
||||
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 { 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 { 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';
|
||||
import { Modal, Button, FormField, Input, IModal } from '@firecamp/ui';
|
||||
|
||||
export default {
|
||||
title: "UI-Kit/Modal",
|
||||
title: 'UI-Kit/Modal',
|
||||
component: Modal,
|
||||
argTypes: {
|
||||
className: ""
|
||||
}
|
||||
className: '',
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args: any) => {
|
||||
const [isOpen, toggleOpen] = useState(true);
|
||||
const Template = ({ opened, ...args }: IModal) => {
|
||||
const [isOpen, openModal] = useState(opened);
|
||||
|
||||
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>
|
||||
return (
|
||||
<div>
|
||||
<Button text="Open Modal" onClick={() => openModal(true)} />
|
||||
<Modal opened={isOpen} onClose={() => openModal(false)} {...args} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ModalDemo = Template.bind({});
|
||||
|
||||
ModalDemo.args = {
|
||||
className: 'test',
|
||||
header: () => <ModalHeader />,
|
||||
body: () => <ModalBody />,
|
||||
footer: () => <ModalFooter />
|
||||
opened: true,
|
||||
title: <div>SignIn to Firecamp</div>,
|
||||
children: <FormPreview />,
|
||||
};
|
||||
|
||||
export const SignUpDemo = Template.bind({});
|
||||
|
||||
SignUpDemo.args = {
|
||||
className: 'test',
|
||||
header: () => <SignUpHeader />,
|
||||
body: () => <SignUpBody />,
|
||||
footer: () => <SignUpFooter />
|
||||
export const ModalTitleWithoutBorder = Template.bind({});
|
||||
ModalTitleWithoutBorder.args = {
|
||||
opened: true,
|
||||
title: <div>SignIn to Firecamp</div>,
|
||||
classNames: {
|
||||
header: 'border-0',
|
||||
},
|
||||
children: <FormPreview />,
|
||||
};
|
||||
export const ModalContentOverflow = Template.bind({});
|
||||
ModalContentOverflow.args = {
|
||||
opened: true,
|
||||
title: <div>SignIn to Firecamp</div>,
|
||||
children: (
|
||||
<>
|
||||
<FormPreview overflowContent />
|
||||
<FormPreview overflowContent />
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
const SignUpHeader = () => {
|
||||
return (
|
||||
<div className="text-modal-foreground-active text-lg text-center mb-6">sign in to your firecamp account</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SignUpBody = () => {
|
||||
function FormPreview({ overflowContent = false }) {
|
||||
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'
|
||||
iconPosition='left'
|
||||
icon={<VscAccount title="Account" size={16} />} />
|
||||
value="dnishchit@gmail.com"
|
||||
iconPosition="left"
|
||||
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 -mt-4">Already have an account? Sign In</a>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SignUpFooter = () => {
|
||||
return (
|
||||
{overflowContent ? (
|
||||
<>
|
||||
<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>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,88 +1,85 @@
|
||||
import { useState } from "react";
|
||||
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";
|
||||
// TODO : update tests based on new button
|
||||
|
||||
const Template = (args: any) => {
|
||||
const [isOpen, toggleOpen] = useState(true);
|
||||
// import { useState } from "react";
|
||||
// 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">
|
||||
<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>
|
||||
};
|
||||
// const Template = (args: any) => {
|
||||
// const [isOpen, toggleOpen] = useState(true);
|
||||
|
||||
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", () => {
|
||||
render(<Template id={'modal-container-div'} />);
|
||||
// describe("Modal component", () => {
|
||||
|
||||
const ModalContainer = screen.queryByTestId('root');
|
||||
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
// test("Validating child element count and styles of modal wrapper", () => {
|
||||
// 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');
|
||||
expect(ModalContainerDiv.childElementCount).toBe(3);
|
||||
// const ModalContainer = screen.queryByTestId('root');
|
||||
// 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');
|
||||
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
const ModalContainerElements = ModalContainerDiv.children;
|
||||
// test("Validating default classnames for modal children elements", () => {
|
||||
// render(<Template id={'modal-container-div'} />);
|
||||
|
||||
//Header - dont have default class names
|
||||
// const ModalContainer = screen.queryByTestId('root');
|
||||
// const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
// const ModalContainerElements = ModalContainerDiv.children;
|
||||
|
||||
//Body
|
||||
expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
|
||||
// //Header - dont have default class names
|
||||
|
||||
//Footer
|
||||
expect(ModalContainerElements[2]).toHaveClass('flex')
|
||||
});
|
||||
// //Body
|
||||
// expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
|
||||
|
||||
test("should appears/disappers based on button click event", async () => {
|
||||
render(<Template id={'modal-container-div'} />);
|
||||
// //Footer
|
||||
// expect(ModalContainerElements[2]).toHaveClass('flex')
|
||||
// });
|
||||
|
||||
// when react-responsive-modal is visible
|
||||
const container = screen.queryByTestId('overlay');
|
||||
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
|
||||
// test("should appears/disappers based on button click event", async () => {
|
||||
// render(<Template id={'modal-container-div'} />);
|
||||
|
||||
// validate the button text for popup state
|
||||
let button = screen.queryByText('Close Modal');
|
||||
expect(button).toBeInTheDocument();
|
||||
// // when react-responsive-modal is visible
|
||||
// const container = screen.queryByTestId('overlay');
|
||||
// expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
|
||||
|
||||
// modal should not be visible after clicking close button
|
||||
const ClosePopupButton = screen.queryByTestId("close-button");
|
||||
click(ClosePopupButton);
|
||||
// // validate the button text for popup state
|
||||
// let button = screen.queryByText('Close Modal');
|
||||
// expect(button).toBeInTheDocument();
|
||||
|
||||
button = await waitFor(() => screen.queryByText('Open Modal'));
|
||||
expect(button).toBeInTheDocument();
|
||||
// // modal should not be visible after clicking close button
|
||||
// const ClosePopupButton = screen.queryByTestId("close-button");
|
||||
// click(ClosePopupButton);
|
||||
|
||||
// visibility of react-responsive-modal is seen by update in style property
|
||||
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
|
||||
});
|
||||
// button = await waitFor(() => screen.queryByText('Open Modal'));
|
||||
// expect(button).toBeInTheDocument();
|
||||
|
||||
});
|
||||
|
||||
// Todo update the import in Modal component to run the test case
|
||||
// import Container from "../grid/Container";
|
||||
// import Row from "../grid/Row";
|
||||
// // visibility of react-responsive-modal is seen by update in style property
|
||||
// expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
|
||||
// });
|
||||
|
||||
// });
|
||||
|
||||
@@ -1,101 +1,93 @@
|
||||
import { FC } from 'react';
|
||||
import cx from 'classnames';
|
||||
import { VscClose } from '@react-icons/all-files/vsc/VscClose';
|
||||
import ResponsiveModal from 'react-responsive-modal';
|
||||
import 'react-responsive-modal/styles.css';
|
||||
import './Modal.scss';
|
||||
import { Modal as MantineModal, ModalProps, ScrollArea } from '@mantine/core';
|
||||
import { createStyles } from '@mantine/core';
|
||||
|
||||
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> & {
|
||||
Header: FC<IHeader>;
|
||||
Body: FC<IBody>;
|
||||
Footer: FC<IFooter>;
|
||||
} = ({
|
||||
const Modal: FC<IModal> = ({
|
||||
id = '',
|
||||
showCloseIcon = true,
|
||||
isOpen = false,
|
||||
className = '',
|
||||
modalClass = '',
|
||||
modalConfig = {},
|
||||
opened = false,
|
||||
classNames = {},
|
||||
onClose = () => {},
|
||||
children = '',
|
||||
height,
|
||||
width,
|
||||
children = <></>,
|
||||
...props
|
||||
}) => {
|
||||
const { classes, cx, theme } = useStyles({
|
||||
title: props.title,
|
||||
opened,
|
||||
onClose: () => {},
|
||||
});
|
||||
|
||||
return (
|
||||
<ResponsiveModal
|
||||
open={isOpen}
|
||||
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 }}
|
||||
<MantineModal
|
||||
opened={opened}
|
||||
onClose={() => onClose()}
|
||||
id={id}
|
||||
>
|
||||
{/* {showCloseIcon ? (
|
||||
<VscClose
|
||||
size={20}
|
||||
className="absolute top-3 right-3 cursor-pointer z-50"
|
||||
onClick={(e) => {
|
||||
onClose();
|
||||
centered
|
||||
classNames={{
|
||||
...classNames,
|
||||
content: cx('invisible-scrollbar', classes.content, classNames.content),
|
||||
header: cx(classes.header, classNames.header),
|
||||
body: cx(classes.body, classNames.body),
|
||||
}}
|
||||
/>
|
||||
) : <></>} */}
|
||||
{children}
|
||||
</div>
|
||||
</ResponsiveModal>
|
||||
);
|
||||
};
|
||||
|
||||
// `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}
|
||||
scrollAreaComponent={ScrollArea.Autosize}
|
||||
closeButtonProps={{
|
||||
bg:
|
||||
theme.colorScheme === 'light'
|
||||
? theme.colors.gray[1]
|
||||
: theme.colors.dark[6],
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{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;
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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': [
|
||||
|
||||
@@ -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{
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -104,17 +104,18 @@ const CodeSnippets = ({ tabId = '' }) => {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isCodeSnippetOpen}
|
||||
opened={isCodeSnippetOpen}
|
||||
onClose={() => toggleOpenCodeSnippet()}
|
||||
height="80vh"
|
||||
width="768px"
|
||||
>
|
||||
<Modal.Header className="border-app-border border-b">
|
||||
size={768}
|
||||
classNames={{
|
||||
content: 'h-[80vh]'
|
||||
}}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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}
|
||||
|
||||
10239
pnpm-lock.yaml
generated
10239
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user