mirror of
https://github.com/LukeHagar/firecamp.git
synced 2025-12-10 20:37:47 +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}
|
||||
/>
|
||||
</>
|
||||
</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,63 +51,61 @@ 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'} />
|
||||
<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
|
||||
placeholder="Enter E-mail"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email ? errors?.email?.message || 'Invalid email' : ''
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
text={isRequesting ? `Sending...` : `Send`}
|
||||
onClick={handleSubmit(_onSubmit)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<div className="text-sm mt-6">
|
||||
<a
|
||||
className="text-base text-center block"
|
||||
href="#"
|
||||
id="forgotPasswordToken"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openResetPassword();
|
||||
<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>
|
||||
<div className="">
|
||||
<form onSubmit={handleSubmit(_onSubmit)}>
|
||||
<Input
|
||||
placeholder="Enter E-mail"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
Already have a token?
|
||||
</a>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</>
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email ? errors?.email?.message || 'Invalid email' : ''
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
text={isRequesting ? `Sending...` : `Send`}
|
||||
onClick={handleSubmit(_onSubmit)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="text-sm p-4">
|
||||
<a
|
||||
className="text-base text-center block"
|
||||
href="#"
|
||||
id="forgotPasswordToken"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openResetPassword();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
Already have a token?
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
<Header />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Body onClose={onClose} />
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Footer />
|
||||
</Modal.Footer>
|
||||
</>
|
||||
<Modal opened={opened} onClose={onClose} closeOnEscape={false}>
|
||||
<Header />
|
||||
<Body onClose={onClose} />
|
||||
<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,126 +54,124 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
|
||||
const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Header>
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
<>
|
||||
<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
|
||||
placeholder="Enter E-mail"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email ? errors?.email?.message || 'Invalid email' : ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter Token"
|
||||
key={'token'}
|
||||
name={'token'}
|
||||
label="Token"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 4,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.token ? errors?.token?.message || 'Invalid token' : ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Invalid password'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type='submit'
|
||||
text={isRequesting ? `Resetting password...` : 'Reset Password'}
|
||||
onClick={handleSubmit(_onSubmit)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</>
|
||||
<div className="">
|
||||
<form onSubmit={handleSubmit(_onSubmit)}>
|
||||
<Input
|
||||
placeholder="Enter E-mail"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email ? errors?.email?.message || 'Invalid email' : ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter Token"
|
||||
key={'token'}
|
||||
name={'token'}
|
||||
label="Token"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 4,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.token ? errors?.token?.message || 'Invalid token' : ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Invalid password'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
text={isRequesting ? `Resetting password...` : 'Reset Password'}
|
||||
onClick={handleSubmit(_onSubmit)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="flex-col">
|
||||
<div className="text-sm mt-6 text-center text-app-foreground-inactive">
|
||||
Not have an account?
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
}}
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
>
|
||||
{' '}
|
||||
Sign Up
|
||||
</a>
|
||||
</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?
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
}}
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
>
|
||||
{' '}
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm mt-2 text-center text-app-foreground-inactive">
|
||||
Already have an account?
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignIn();
|
||||
}}
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
>
|
||||
{' '}
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm text-center text-app-foreground-inactive">
|
||||
Already have an account?
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignIn();
|
||||
}}
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
>
|
||||
{' '}
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
{/* <div className="text-sm mt-6">
|
||||
</div>
|
||||
{/* <div className="text-sm mt-6">
|
||||
|
||||
<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,73 +9,71 @@ import platformContext from '../../../services/platform-context';
|
||||
/**
|
||||
* User Sign in
|
||||
*/
|
||||
const SignIn: FC<IModal> = () => {
|
||||
const SignIn: FC<IModal> = ({ opened, onClose }) => {
|
||||
return (
|
||||
<>
|
||||
<Modal.Body>
|
||||
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
|
||||
<div className="mb-4">
|
||||
<FcLogo className="mx-auto w-14" size={80} />
|
||||
</div>
|
||||
<div className="text-xl mb-6 w-full text-center font-semibold">
|
||||
Sign in to Firecamp
|
||||
</div>
|
||||
<div className="">
|
||||
<GithubGoogleAuth />
|
||||
<Button
|
||||
text="Continue with Email"
|
||||
leftIcon={<VscAccount size={18} />}
|
||||
classNames={{root: "mb-5"}}
|
||||
onClick={() => platformContext.app.modals.openSignInWithEmail()}
|
||||
outline
|
||||
fullWidth
|
||||
sm
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="mb-8 mt-8 flex justify-center items-center">
|
||||
<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} />
|
||||
</div>
|
||||
<div className="text-xl mb-6 w-full text-center font-semibold">
|
||||
Sign in to Firecamp
|
||||
</div>
|
||||
<div className="">
|
||||
<GithubGoogleAuth />
|
||||
<Button
|
||||
text="Continue with Email"
|
||||
leftIcon={<VscAccount size={18} />}
|
||||
classNames={{ root: 'mb-5' }}
|
||||
onClick={() => platformContext.app.modals.openSignInWithEmail()}
|
||||
outline
|
||||
fullWidth
|
||||
sm
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="mb-8 mt-8 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="flex-col">
|
||||
<div className="text-sm mt-6 text-center">
|
||||
Not have an account?
|
||||
<a
|
||||
href="#"
|
||||
id="sign-up"
|
||||
className="font-bold underline"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm mt-6 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"
|
||||
target={'_blank'}
|
||||
>
|
||||
Term of Service
|
||||
</a>
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
target={'_blank'}
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
<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 px-1"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</>
|
||||
<div className="text-sm mt-6 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 px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
Term of Service
|
||||
</a>
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</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,151 +62,148 @@ const SignInWithEmail: FC<IModal> = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Body>
|
||||
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
|
||||
<div className="mb-4">
|
||||
<FcLogo className="mx-auto w-14" size={80} />
|
||||
</div>
|
||||
<div className="text-xl mb-6 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">
|
||||
<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">
|
||||
<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-3 w-full text-center font-semibold">
|
||||
Sign in to Firecamp
|
||||
</div>
|
||||
<div className="">
|
||||
<GithubGoogleAuth />
|
||||
</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="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 className="">
|
||||
<form onSubmit={handleSubmit(_onSignIn)}>
|
||||
<Input
|
||||
placeholder="Enter Username"
|
||||
key={'username'}
|
||||
name={'username'}
|
||||
id={'username'}
|
||||
label="Email or Username"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern:
|
||||
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+|^[0-9a-zA-Z ]+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.username
|
||||
? errors?.username?.message || 'Please enter valid username or email'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
id={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Please enter valid password'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<a
|
||||
href="#"
|
||||
id="forgotPassword"
|
||||
className="!text-primaryColor text-sm mb-4 -mt-1"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openForgotPassword();
|
||||
</div> */}
|
||||
<div className="">
|
||||
<form onSubmit={handleSubmit(_onSignIn)}>
|
||||
<Input
|
||||
placeholder="Enter Username"
|
||||
key={'username'}
|
||||
name={'username'}
|
||||
id={'username'}
|
||||
label="Email or Username"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern:
|
||||
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+|^[0-9a-zA-Z ]+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.username
|
||||
? errors?.username?.message ||
|
||||
'Please enter valid username or email'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
id={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
text={isRequesting ? `Signing in...` : `Sign in`}
|
||||
onClick={handleSubmit(_onSignIn)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex-col">
|
||||
<div className="text-sm mt-6 text-center">
|
||||
Not have an account?
|
||||
/>
|
||||
}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Please enter valid password'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<a
|
||||
href="#"
|
||||
id="signup"
|
||||
className="font-bold underline"
|
||||
id="forgotPassword"
|
||||
className="!text-primaryColor text-sm mb-2 -mt-1"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
platformContext.app.modals.openForgotPassword();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
{' '}
|
||||
Sign Up
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm mt-6 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"
|
||||
target={'_blank'}
|
||||
>
|
||||
{' '}
|
||||
Term of Service
|
||||
</a>{' '}
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
target={'_blank'}
|
||||
>
|
||||
{' '}
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
text={isRequesting ? `Signing in...` : `Sign in`}
|
||||
onClick={handleSubmit(_onSignIn)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex-col">
|
||||
<div className="text-sm mt-3 text-center">
|
||||
Not have an account?
|
||||
<a
|
||||
href="#"
|
||||
id="signup"
|
||||
className="font-bold underline px-1"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignUp();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
{' '}
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer></Modal.Footer>
|
||||
</>
|
||||
<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 px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
{' '}
|
||||
Term of Service
|
||||
</a>{' '}
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
{' '}
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</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,154 +68,155 @@ const SignUp: FC<IModal> = () => {
|
||||
const _onKeyDown = (e) => e.key === 'Enter' && handleSubmit(_onSignUp);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Body>
|
||||
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
|
||||
<div className="mb-3">
|
||||
<FcLogo className="mx-auto w-14" size={80} />
|
||||
</div>
|
||||
<div className="text-xl mb-4 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">
|
||||
<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">
|
||||
Give us some of your information to get free access to Firecamp
|
||||
</div>
|
||||
<div className="">
|
||||
<form onSubmit={handleSubmit(_onSignUp)}>
|
||||
<Input
|
||||
placeholder="Enter Username"
|
||||
key={'username'}
|
||||
name={'username'}
|
||||
id={'username'}
|
||||
label="Username"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^[0-9a-zA-Z ]+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.username
|
||||
? errors?.username?.message || 'Please enter username'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
id={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email ? errors?.email?.message || 'Please enter valid username or password' : ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
id={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Please enter valid password'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<Modal opened={opened} onClose={onClose} size={440}>
|
||||
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
|
||||
<div className="-mt-4">
|
||||
<FcLogo className="mx-auto w-14" size={80} />
|
||||
</div>
|
||||
<div className="text-xl mb-2 w-full text-center font-semibold">
|
||||
Create a firecamp account
|
||||
</div>
|
||||
<div className="">
|
||||
<GithubGoogleAuth />
|
||||
</div>
|
||||
<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-sm mx-auto mb-3 text-center">
|
||||
Give us some of your information to get free access to Firecamp
|
||||
</div>
|
||||
<div className="">
|
||||
<form onSubmit={handleSubmit(_onSignUp)}>
|
||||
<Input
|
||||
placeholder="Enter Username"
|
||||
key={'username'}
|
||||
name={'username'}
|
||||
id={'username'}
|
||||
label="Username"
|
||||
type="text"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^[0-9a-zA-Z ]+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.username
|
||||
? errors?.username?.message || 'Please enter username'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
key={'email'}
|
||||
name={'email'}
|
||||
id={'email'}
|
||||
label="Email"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 1,
|
||||
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
|
||||
}}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.email
|
||||
? errors?.email?.message ||
|
||||
'Please enter valid username or password'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-2"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
key={'password'}
|
||||
name={'password'}
|
||||
id={'password'}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Password"
|
||||
registerMeta={{
|
||||
required: true,
|
||||
maxLength: 50,
|
||||
minLength: 8,
|
||||
}}
|
||||
iconPosition="right"
|
||||
icon={
|
||||
<VscEye
|
||||
title="password"
|
||||
size={16}
|
||||
onClick={() => {
|
||||
toggleShowPassword(!showPassword);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
useformRef={form}
|
||||
onKeyDown={_onKeyDown}
|
||||
error={
|
||||
errors?.password
|
||||
? errors?.password?.message || 'Please enter valid password'
|
||||
: ''
|
||||
}
|
||||
wrapperClassName="!mb-3"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
text={isRequesting ? 'Signing up...' : 'Sign up'}
|
||||
onClick={handleSubmit(_onSignUp)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
<Button
|
||||
type="submit"
|
||||
text={isRequesting ? 'Signing up...' : 'Sign up'}
|
||||
onClick={handleSubmit(_onSignUp)}
|
||||
fullWidth
|
||||
primary
|
||||
sm
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="flex-col">
|
||||
<div className="text-sm mt-3 text-center">
|
||||
Already have an account
|
||||
<a
|
||||
href="#"
|
||||
id="signup"
|
||||
className="font-bold underline px-1"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignIn();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
{' '}
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<div className="flex-col">
|
||||
<div className="text-sm mt-6 text-center">
|
||||
Already have an account
|
||||
<a
|
||||
href="#"
|
||||
id="signup"
|
||||
className="font-bold underline"
|
||||
onClick={(e) => {
|
||||
if (e) e.preventDefault();
|
||||
platformContext.app.modals.openSignIn();
|
||||
}}
|
||||
tabIndex={1}
|
||||
>
|
||||
{' '}
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm mt-6 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"
|
||||
target={'_blank'}
|
||||
>
|
||||
Term of Service
|
||||
</a>
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline"
|
||||
target={'_blank'}
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
<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 px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
Term of Service
|
||||
</a>
|
||||
and
|
||||
<a
|
||||
href="https://firecamp.io/legals/privacy-policy/"
|
||||
tabIndex={1}
|
||||
className="font-bold underline px-1"
|
||||
target={'_blank'}
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</>
|
||||
</div>
|
||||
</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,70 +113,80 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
|
||||
});
|
||||
};
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<Modal.Body>
|
||||
<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="">
|
||||
<div className="items-center mb-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm block mb-1"
|
||||
htmlFor="envBane"
|
||||
>
|
||||
Collection Name
|
||||
</label>
|
||||
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
|
||||
{collection?.name}
|
||||
</label>
|
||||
<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>
|
||||
|
||||
<div className="items-center mb-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm block mb-1"
|
||||
htmlFor="envBane"
|
||||
>
|
||||
Environment Name
|
||||
</label>
|
||||
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
|
||||
{env.name}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
autoFocus={true}
|
||||
label="Enter New Name For Cloned Environment"
|
||||
placeholder="new name for cloned environment"
|
||||
name={'name'}
|
||||
value={name}
|
||||
onChange={onChangeName}
|
||||
onKeyDown={() => {}}
|
||||
onBlur={() => {}}
|
||||
error={error.name}
|
||||
// iconPosition="right"
|
||||
// icon={<VscEdit />}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
>
|
||||
{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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ProgressBar active={isRequesting} />
|
||||
<div className="p-4">
|
||||
<div className="">
|
||||
<div className="items-center mb-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm block mb-1"
|
||||
htmlFor="envBane"
|
||||
>
|
||||
Collection Name
|
||||
</label>
|
||||
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
|
||||
{collection?.name}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* <div className="">
|
||||
<div className="items-center mb-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm block mb-1"
|
||||
htmlFor="envBane"
|
||||
>
|
||||
Environment Name
|
||||
</label>
|
||||
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
|
||||
{env.name}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
autoFocus={true}
|
||||
label="Enter New Name For Cloned Environment"
|
||||
placeholder="new name for cloned environment"
|
||||
name={'name'}
|
||||
value={name}
|
||||
onChange={onChangeName}
|
||||
onKeyDown={() => {}}
|
||||
onBlur={() => {}}
|
||||
error={error.name}
|
||||
// iconPosition="right"
|
||||
// icon={<VscEdit />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="">
|
||||
<label
|
||||
className="text-app-foreground text-sm mb-1 block"
|
||||
htmlFor="variables"
|
||||
@@ -194,59 +204,55 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
|
||||
</span>
|
||||
</div> */}
|
||||
|
||||
<div className="mt-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm mb-1 block"
|
||||
htmlFor="variables"
|
||||
>
|
||||
Variables
|
||||
</label>
|
||||
<span className="text-sm font-normal text-app-foreground-inactive block mt-1">
|
||||
Variables will be valid JSON in key-value pair. ex.{' '}
|
||||
{`{ "host": "https://myapi.com" }`}
|
||||
</span>
|
||||
<Editor
|
||||
language={EEditorLanguage.Json}
|
||||
value={env.variables}
|
||||
onChange={() => {}}
|
||||
readOnly={true}
|
||||
disabled={true}
|
||||
height={'280px'}
|
||||
monacoOptions={{
|
||||
extraEditorClassName: `border border-input-border rounded-sm p-2 leading-5
|
||||
<div className="mt-4">
|
||||
<label
|
||||
className="text-app-foreground text-sm mb-1 block"
|
||||
htmlFor="variables"
|
||||
>
|
||||
Variables
|
||||
</label>
|
||||
<span className="text-sm font-normal text-app-foreground-inactive block mt-1">
|
||||
Variables will be valid JSON in key-value pair. ex.{' '}
|
||||
{`{ "host": "https://myapi.com" }`}
|
||||
</span>
|
||||
<Editor
|
||||
language={EEditorLanguage.Json}
|
||||
value={env.variables}
|
||||
onChange={() => {}}
|
||||
readOnly={true}
|
||||
disabled={true}
|
||||
height={'280px'}
|
||||
monacoOptions={{
|
||||
extraEditorClassName: `border border-input-border rounded-sm p-2 leading-5
|
||||
outline-none placeholder-input-placeholder
|
||||
text-base focus:bg-input-background-focus w-full
|
||||
bg-input-background`,
|
||||
fontSize: '14px',
|
||||
height: '250px',
|
||||
wordWrap: 'off',
|
||||
readOnly: true,
|
||||
}}
|
||||
className="!h-80"
|
||||
/>
|
||||
fontSize: '14px',
|
||||
height: '250px',
|
||||
wordWrap: 'off',
|
||||
readOnly: true,
|
||||
}}
|
||||
className="!h-80"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<TabHeader className="!p-0">
|
||||
<TabHeader.Right>
|
||||
<Button
|
||||
text="Cancel"
|
||||
onClick={(e) => onClose()}
|
||||
ghost
|
||||
xs
|
||||
/>
|
||||
<Button
|
||||
text={isRequesting ? 'Cloning...' : 'Clone Environment'}
|
||||
onClick={onCreate}
|
||||
disabled={isRequesting}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</>
|
||||
<div className="p-4">
|
||||
<TabHeader className="!p-0">
|
||||
<TabHeader.Right>
|
||||
<Button text="Cancel" onClick={(e) => onClose()} ghost xs />
|
||||
<Button
|
||||
text={isRequesting ? 'Cloning...' : 'Clone Environment'}
|
||||
onClick={onCreate}
|
||||
disabled={isRequesting}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ProgressBar active={isFetchingOrgs} />
|
||||
{renderBody(isFetchingOrgs)}
|
||||
</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,35 +38,39 @@ const ConfirmationModal: FC<IConfirm> = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={state.isOpen}
|
||||
opened={state.isOpen}
|
||||
onClose={_close}
|
||||
width={'400px'}
|
||||
className="min-h-0"
|
||||
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>
|
||||
}
|
||||
>
|
||||
<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">
|
||||
{`CONFIRMATION Required.`}
|
||||
</label>
|
||||
<div className="my-4">{title}</div>
|
||||
<TabHeader className="!px-0">
|
||||
<TabHeader.Right>
|
||||
<Button
|
||||
text={texts?.btnCancel || `Cancel`}
|
||||
onClick={_close}
|
||||
secondary
|
||||
xs
|
||||
/>
|
||||
<Button
|
||||
text={texts?.btnConfirm || 'Confirm'}
|
||||
onClick={_onConfirm}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<div>
|
||||
<div className="mb-4">{title}</div>
|
||||
<TabHeader className="!px-0">
|
||||
<TabHeader.Right>
|
||||
<Button
|
||||
text={texts?.btnCancel || `Cancel`}
|
||||
onClick={_close}
|
||||
secondary
|
||||
xs
|
||||
/>
|
||||
<Button
|
||||
text={texts?.btnConfirm || 'Confirm'}
|
||||
onClick={_onConfirm}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -81,51 +81,55 @@ export const PromptInput: FC<IPromptInput> = ({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={state.isOpen}
|
||||
opened={state.isOpen}
|
||||
onClose={_close}
|
||||
className="min-h-0"
|
||||
width={'400px'}
|
||||
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>
|
||||
}
|
||||
>
|
||||
<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">
|
||||
{header || `THIS IS A HEADER PLACE`}
|
||||
</label>
|
||||
<div className="mt-4">
|
||||
<Input
|
||||
autoFocus={true}
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
name={'promptInput'}
|
||||
value={state.value}
|
||||
onChange={_onChangeValue}
|
||||
onKeyDown={_onKeyDown}
|
||||
onBlur={() => {}}
|
||||
error={state.error}
|
||||
/>
|
||||
</div>
|
||||
<TabHeader className="!px-0">
|
||||
<TabHeader.Right>
|
||||
<Button
|
||||
text={texts?.btnCancel || `Cancel`}
|
||||
onClick={_close}
|
||||
ghost
|
||||
xs
|
||||
/>
|
||||
<Button
|
||||
text={
|
||||
state.isExecuting ? texts?.btnOking : texts?.btnOk || 'Create'
|
||||
}
|
||||
onClick={_onClickOk}
|
||||
disabled={state.isExecuting}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
<ProgressBar active={state.isExecuting} />
|
||||
<div className="pt-4">
|
||||
<div className="">
|
||||
<Input
|
||||
autoFocus={true}
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
name={'promptInput'}
|
||||
value={state.value}
|
||||
onChange={_onChangeValue}
|
||||
onKeyDown={_onKeyDown}
|
||||
onBlur={() => {}}
|
||||
error={state.error}
|
||||
/>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<TabHeader className="!px-0">
|
||||
<TabHeader.Right>
|
||||
<Button
|
||||
text={texts?.btnCancel || `Cancel`}
|
||||
onClick={_close}
|
||||
ghost
|
||||
xs
|
||||
/>
|
||||
<Button
|
||||
text={
|
||||
state.isExecuting ? texts?.btnOking : texts?.btnOk || 'Create'
|
||||
}
|
||||
onClick={_onClickOk}
|
||||
disabled={state.isExecuting}
|
||||
primary
|
||||
xs
|
||||
/>
|
||||
</TabHeader.Right>
|
||||
</TabHeader>
|
||||
</div>
|
||||
</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",
|
||||
component: Modal,
|
||||
argTypes: {
|
||||
className: ""
|
||||
}
|
||||
title: 'UI-Kit/Modal',
|
||||
component: Modal,
|
||||
argTypes: {
|
||||
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 = () => {
|
||||
return (
|
||||
<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" >
|
||||
<Input
|
||||
placeholder='Username or E-mail'
|
||||
iconPosition='left'
|
||||
icon={<VscAccount title="Account" size={16} />} />
|
||||
</FormField>
|
||||
<FormField label="password">
|
||||
<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>
|
||||
</div>
|
||||
function FormPreview({ overflowContent = false }) {
|
||||
return (
|
||||
<div className="pt-6">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SignUpFooter = () => {
|
||||
return (
|
||||
<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="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>
|
||||
)
|
||||
}
|
||||
|
||||
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 className="">
|
||||
<div className="text-center w-full text-sm mb-5">
|
||||
Sign in again to continue
|
||||
</div>
|
||||
<FormField label="Username or E-mail">
|
||||
<Input
|
||||
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} />}
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
const ModalFooter = () => {
|
||||
return (
|
||||
<div className="text-sm mt-6">
|
||||
Modal Footer
|
||||
</div>
|
||||
)
|
||||
{overflowContent ? (
|
||||
<>
|
||||
<hr className="border-modal-border -ml-8 -mr-8 mb-6 mt-6" />
|
||||
<div className="text-sm mt-6">
|
||||
<div className="text-center">SignOut Forcefully</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</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
|
||||
}) => {
|
||||
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 }}
|
||||
id={id}
|
||||
>
|
||||
{/* {showCloseIcon ? (
|
||||
<VscClose
|
||||
size={20}
|
||||
className="absolute top-3 right-3 cursor-pointer z-50"
|
||||
onClick={(e) => {
|
||||
onClose();
|
||||
}}
|
||||
/>
|
||||
) : <></>} */}
|
||||
{children}
|
||||
</div>
|
||||
</ResponsiveModal>
|
||||
);
|
||||
};
|
||||
const { classes, cx, theme } = useStyles({
|
||||
title: props.title,
|
||||
opened,
|
||||
onClose: () => {},
|
||||
});
|
||||
|
||||
// `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,
|
||||
})}
|
||||
<MantineModal
|
||||
opened={opened}
|
||||
onClose={() => onClose()}
|
||||
id={id}
|
||||
centered
|
||||
classNames={{
|
||||
...classNames,
|
||||
content: cx('invisible-scrollbar', classes.content, classNames.content),
|
||||
header: cx(classes.header, classNames.header),
|
||||
body: cx(classes.body, classNames.body),
|
||||
}}
|
||||
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