From 1a1be60bc30bbae3b810398d790fdbd26c580778 Mon Sep 17 00:00:00 2001 From: Nishchit14 Date: Wed, 19 Jul 2023 17:59:00 +0530 Subject: [PATCH 1/9] chore: removed font-sans styles & added modal with scrollbar component --- .../environment/selector/EnvironmentDD.tsx | 2 +- .../components/modals/auth/ForgotPassword.tsx | 6 +- .../src/components/modals/auth/SignIn.tsx | 10 +- .../modals/auth/SignInWithEmail.tsx | 11 +- .../src/components/modals/auth/SignUp.tsx | 8 +- .../src/components/tabs/header/Menu.tsx | 2 +- platform/firecamp-platform/src/types.ts | 10 +- .../src/components/buttons/Button.tsx | 1 - .../dropdown/DropdownMenu.stories.tsx | 6 +- .../src/components/modal/Modalv2.tsx | 118 ++++++++++++++++++ platform/firecamp-ui/src/scss/tailwind.scss | 4 + platform/firecamp-ui/src/ui-kit.ts | 2 +- .../src/components/request/tabs/BodyTab.tsx | 2 +- 13 files changed, 152 insertions(+), 30 deletions(-) create mode 100644 platform/firecamp-ui/src/components/modal/Modalv2.tsx diff --git a/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx b/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx index ede9793d..858afd57 100644 --- a/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx +++ b/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx @@ -83,7 +83,7 @@ const EnvironmentDD: FC = ({ onChange = () => {} }) => { onSelect={_onSelectEnv} classNames={{ dropdown: '!pt-0', - label: 'uppercase font-sans', + label: 'uppercase', item: '!px-5', }} sm diff --git a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx index a9120396..0ee47690 100644 --- a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx @@ -51,7 +51,7 @@ const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => { return ( <> - +
Enter your Email Address @@ -59,8 +59,6 @@ const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => {
You’ll get the password recovery token in your inbox.
- -
= ({ isOpen = false, onClose = () => {} }) => {
-
+ */} -
+
Not have an account? { if (e) e.preventDefault(); platformContext.app.modals.openSignUp(); @@ -57,7 +57,7 @@ const SignIn: FC = () => { Term of Service @@ -66,7 +66,7 @@ const SignIn: FC = () => { Privacy Policy diff --git a/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx b/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx index 26e2bc3c..acd48ee3 100644 --- a/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx @@ -74,7 +74,7 @@ const SignInWithEmail: FC = () => {
-
+
OR @@ -103,7 +103,8 @@ const SignInWithEmail: FC = () => { onKeyDown={_onKeyDown} error={ errors?.username - ? errors?.username?.message || 'Please enter valid username or email' + ? errors?.username?.message || + 'Please enter valid username or email' : '' } wrapperClassName="!mb-2" @@ -169,7 +170,7 @@ const SignInWithEmail: FC = () => { { if (e) e.preventDefault(); platformContext.app.modals.openSignUp(); @@ -185,7 +186,7 @@ const SignInWithEmail: FC = () => { {' '} @@ -195,7 +196,7 @@ const SignInWithEmail: FC = () => { {' '} diff --git a/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx b/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx index b25ed8e2..f1692ad1 100644 --- a/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx @@ -80,7 +80,7 @@ const SignUp: FC = () => {
-
+
OR @@ -181,7 +181,7 @@ const SignUp: FC = () => { { if (e) e.preventDefault(); platformContext.app.modals.openSignIn(); @@ -197,7 +197,7 @@ const SignUp: FC = () => { Term of Service @@ -206,7 +206,7 @@ const SignUp: FC = () => { Privacy Policy diff --git a/platform/firecamp-platform/src/components/tabs/header/Menu.tsx b/platform/firecamp-platform/src/components/tabs/header/Menu.tsx index e4413455..56b62b17 100644 --- a/platform/firecamp-platform/src/components/tabs/header/Menu.tsx +++ b/platform/firecamp-platform/src/components/tabs/header/Menu.tsx @@ -81,7 +81,7 @@ const Menu: FC = () => { onSelect={(v) => v.onClick()} classNames={{ dropdown: '!pt-0 -ml-2 border-focusBorder', - label: 'uppercase font-sans', + label: 'uppercase', item: '!px-5' }} menuProps={{ diff --git a/platform/firecamp-platform/src/types.ts b/platform/firecamp-platform/src/types.ts index ff2f70ca..156bb639 100644 --- a/platform/firecamp-platform/src/types.ts +++ b/platform/firecamp-platform/src/types.ts @@ -80,11 +80,13 @@ export const EPlatformModalDefaultProps = { [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.SignIn]: { + size: 440, + }, + [EPlatformModalTypes.SignInWithEmail]: { size: 440 }, + [EPlatformModalTypes.SignUp]: { size: 440 }, [EPlatformModalTypes.RefreshToken]: { modalConfig: { closeOnEsc: false } }, - [EPlatformModalTypes.ForgotPassword]: { width: '440px', className: 'p-4' }, + [EPlatformModalTypes.ForgotPassword]: { size: 440 }, [EPlatformModalTypes.ResetPassword]: { width: '440px', className: 'p-4' }, // user diff --git a/platform/firecamp-ui/src/components/buttons/Button.tsx b/platform/firecamp-ui/src/components/buttons/Button.tsx index f1c0d02e..0b124602 100644 --- a/platform/firecamp-ui/src/components/buttons/Button.tsx +++ b/platform/firecamp-ui/src/components/buttons/Button.tsx @@ -7,7 +7,6 @@ const useStyles = createStyles( (theme, { variant, color, primary, secondary, transparent, animate }: IButton) => ({ root: { display: 'flex', - fontFamily: 'sans-serif', fontWeight: 'normal', ...(!animate ? { ':active': { transform: 'none' } }: {}), diff --git a/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx b/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx index 2ad05cd9..a8259846 100644 --- a/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx +++ b/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx @@ -318,7 +318,7 @@ export const BodyTab = () => { onSelect={(value: any) => setSelected(value.name)} classNames={{ dropdown: 'pt-0 pb-2 -mt-2', - label: 'uppercase pl-2 font-sans', + label: 'uppercase pl-2', item: '!px-4', }} width={144} @@ -703,7 +703,7 @@ export const EnvCollectionOption = () => { onSelect={(v) => setSelected(v.name)} classNames={{ dropdown: '!pt-0 !pb-2 ', - label: 'uppercase font-sans', + label: 'uppercase ', item: '!px-5', }} sm @@ -728,7 +728,7 @@ export const MemberRoleSelection = () => { )} classNames={{ dropdown: '!py-0', - label: 'uppercase font-sans !text-start', + label: 'uppercase !text-start', }} sm options={[ diff --git a/platform/firecamp-ui/src/components/modal/Modalv2.tsx b/platform/firecamp-ui/src/components/modal/Modalv2.tsx new file mode 100644 index 00000000..b0b19c65 --- /dev/null +++ b/platform/firecamp-ui/src/components/modal/Modalv2.tsx @@ -0,0 +1,118 @@ +import { FC, useEffect } from 'react'; +import { ScrollBar } from '@firecamp/ui'; +import { Modal as MantineModal } from '@mantine/core'; +import { ModalProps } from '@mantine/core'; +import { createStyles } from '@mantine/core'; +interface IModal extends ModalProps { + /** + * Is modal open or not + */ + isOpen?: boolean; +} +interface IBody { + id?: string; + children?: any; + className?: string; + scrollbar?: boolean; +} + +interface IFooter { + id?: string; + children?: any; + className?: string; +} + +// custom styles for variants +const useStyles = createStyles((theme) => ({ + // root: { + + // }, + content: { + 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', + // padding: '1rem', + + // width: '100%', + // maxHeight: '90vh', + // minHeight: '400px' + }, + header: { + backgroundColor: 'transparent', + color: + theme.colorScheme === 'light' + ? theme.colors.dark[5] + : theme.colors.gray[4], + paddingRight: '1rem', + paddingTop: '1rem', + paddingBottom: '0px', + }, + body: { + padding: '1rem', + }, +})); + +const Modal: FC & { + Body: FC; + Footer: FC; +} = ({ + id = '', + isOpen = false, + opened = false, + classNames = {}, + onClose = () => {}, + children = <>, + ...props +}) => { + console.log(`modal-size...`, props); + const { classes, cx, theme } = useStyles(); + return ( + onClose()} + id={id} + centered + classNames={{ + ...classNames, + content: cx('invisible-scrollbar', classNames.content, classes.content), + header: cx(classNames.header, classes.header), + }} + // scrollAreaComponent={ScrollArea.Autosize} + closeButtonProps={{ + bg: + theme.colorScheme === 'light' + ? theme.colors.gray[1] + : theme.colors.dark[6], + }} + {...props} + > + {children} + + ); +}; +let Body: FC = ({ children = '' }) => { + return ( + + {/* provide static height to display the scrollbar */} + <>{children} + + ); +}; + +const Footer: FC = ({ id = '', children = '', className = '' }) => { + return ( +
+ {children} +
+ ); +}; + +Modal.Body = Body; +Modal.Footer = Footer; +export default Modal; diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss index a92892a7..14b4ad2d 100644 --- a/platform/firecamp-ui/src/scss/tailwind.scss +++ b/platform/firecamp-ui/src/scss/tailwind.scss @@ -2046,6 +2046,10 @@ .pt-5{ padding-top: 1.25rem; +} +.pt-px{ + padding-top: 1px; + } .text-left{ text-align: left; diff --git a/platform/firecamp-ui/src/ui-kit.ts b/platform/firecamp-ui/src/ui-kit.ts index 1a9dec2e..66a531fb 100644 --- a/platform/firecamp-ui/src/ui-kit.ts +++ b/platform/firecamp-ui/src/ui-kit.ts @@ -29,7 +29,7 @@ export { default as Input } from './components/input/Input'; export { default as FileInput } from './components/input/FileInput'; // Modal -export { default as Modal } from './components/modal/Modal'; +export { default as Modal } from './components/modal/Modalv2'; export type { IModal } from './components/modal/interfaces/Modal.interface'; export { default as SplitView } from './components/split-view/SplitView'; diff --git a/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx b/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx index 122fdc9d..a67bb336 100644 --- a/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx +++ b/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx @@ -200,7 +200,7 @@ const BodyTypeDropDown: FC = ({ 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} From 420058db2e369a2b1196be431f7d4f92f7cc402a Mon Sep 17 00:00:00 2001 From: Nishchit14 Date: Thu, 20 Jul 2023 14:11:17 +0530 Subject: [PATCH 2/9] chore(Modalv2): updated modal config props for MantineModal --- .../common/error-boundary/ErrorPopup.tsx | 6 +-- .../src/components/modals/ModalContainer.tsx | 12 ++++- .../components/modals/auth/ForgotPassword.tsx | 5 +- .../components/modals/auth/RefreshToken.tsx | 4 +- .../components/modals/auth/ResetPassword.tsx | 14 +++--- .../modals/auth/SignInWithEmail.tsx | 2 +- .../src/components/modals/auth/SignUp.tsx | 2 +- .../modals/environment/CloneEnvironment.tsx | 11 ++--- .../modals/organization/OrgManagement.tsx | 4 +- .../modals/organization/SwitchOrg.tsx | 4 +- .../request/edit-request/EditRequest.tsx | 5 +- .../modals/workspace/SwitchWorkspace.tsx | 4 +- .../modals/workspace/WorkspaceManagement.tsx | 4 +- .../invite-members/InviteMembers.tsx | 4 +- .../src/components/prompt/PromptSaveItem.tsx | 7 ++- platform/firecamp-platform/src/types.ts | 41 +++++++++++----- .../src/components/modal/Modalv2.tsx | 47 +++++++++++++++---- platform/firecamp-ui/src/scss/tailwind.scss | 8 ++++ .../common/code-snippets/CodeSnippets.tsx | 12 +++-- 19 files changed, 126 insertions(+), 70 deletions(-) diff --git a/platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx b/platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx index 3718cb4d..78a216d7 100644 --- a/platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx +++ b/platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx @@ -23,10 +23,8 @@ const ErrorPopup: FC = ({ error }) => { return ( diff --git a/platform/firecamp-platform/src/components/modals/ModalContainer.tsx b/platform/firecamp-platform/src/components/modals/ModalContainer.tsx index 95c510b7..9aef8f84 100644 --- a/platform/firecamp-platform/src/components/modals/ModalContainer.tsx +++ b/platform/firecamp-platform/src/components/modals/ModalContainer.tsx @@ -82,8 +82,18 @@ export const ModalContainer = () => { const modalProps = EPlatformModalDefaultProps[currentOpenModal]; // console.log(modalProps, '.....'); + const MODAL_TITLE = { + [EPlatformModalTypes.OrgManagement]: 'Organization Management', + [EPlatformModalTypes.WorkspaceManagement]: 'Workspace Management', + [EPlatformModalTypes.SwitchOrg]: 'Switch Organization', + [EPlatformModalTypes.CloneEnvironment]: 'Clone Environment', + [EPlatformModalTypes.EditRequest]: 'Update Request Info', + [EPlatformModalTypes.SwitchWorkspace]: 'Switch Workspace', + [EPlatformModalTypes.InviteMembers]: 'Invite Members To Join The Workspace', + } + return ( - + {renderModal(currentOpenModal)} ); diff --git a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx index 0ee47690..88109572 100644 --- a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx @@ -1,6 +1,7 @@ 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'; /** @@ -52,7 +53,7 @@ const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => { return ( <> - +
Enter your Email Address
@@ -89,7 +90,7 @@ const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => {
-
+
= ({ onClose = () => {} }) => { return ( <> - -
- +
diff --git a/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx b/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx index 1db59194..2688ff49 100644 --- a/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx @@ -55,13 +55,13 @@ const ResetPassword: FC = ({ isOpen = false, onClose = () => {} }) => { return ( <> - - -
- Reset Password -
- + <> + +
+ Reset Password +
+
= ({ isOpen = false, onClose = () => {} }) => { } />
-
+
Welcome back! enter your email and password below to sign in.
diff --git a/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx b/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx index f1692ad1..a301c71d 100644 --- a/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx @@ -86,7 +86,7 @@ const SignUp: FC = () => { OR
-
+
Give us some of your information to get free access to Firecamp
diff --git a/platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx b/platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx index d3996bd8..3371380e 100644 --- a/platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx +++ b/platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx @@ -128,11 +128,11 @@ const CloneEnvironment: FC = ({ onClose = () => {} }) => { return ( <> - + {/*
Clone Environment
- + */}
@@ -229,12 +229,7 @@ const CloneEnvironment: FC = ({ onClose = () => {} }) => {
-
- {/*
+ + {/* */} +
+ +
+
+ Sign in to Firecamp +
+
+ +
+ {/*
OR
*/} -
- - +
+ - - +
+ By moving forward, you acknowledge that you have read and accept the + + Term of Service + + and + + Privacy Policy + + . +
+
+ ); }; diff --git a/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx b/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx index 4abc6cd3..a8ba0aab 100644 --- a/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx @@ -8,7 +8,7 @@ import { EProvider } from '../../../services/auth/types'; import platformContext from '../../../services/platform-context'; /** User Sign in */ -const SignInWithEmail: FC = () => { +const SignInWithEmail: FC = ({ opened, onClose }) => { const form = useForm(); const [isRequesting, setFlagIsRequesting] = useState(false); const [showPassword, toggleShowPassword] = useState(false); @@ -62,152 +62,148 @@ const SignInWithEmail: FC = () => { }; return ( - <> - - {/* */} -
- -
-
- Sign in to Firecamp -
-
- -
-
-
- - OR - -
-
+ +
+ +
+
+ Sign in to Firecamp +
+
+ +
+
+
+ + OR + +
+ {/*
Welcome back! enter your email and password below to sign in. -
-
- - - { - toggleShowPassword(!showPassword); - }} - /> - } - useformRef={form} - onKeyDown={_onKeyDown} - error={ - errors?.password - ? errors?.password?.message || 'Please enter valid password' - : '' - } - wrapperClassName="!mb-2" - /> - */} + -
-
-
- Not have an account? + /> + } + useformRef={form} + onKeyDown={_onKeyDown} + error={ + errors?.password + ? errors?.password?.message || 'Please enter valid password' + : '' + } + wrapperClassName="!mb-2" + /> + -
- By moving forward, you acknowledge that you have read and accept the - - {' '} - Term of Service - {' '} - and - - {' '} - Privacy Policy - - . -
+
+
+ - - - +
+ By moving forward, you acknowledge that you have read and accept the + + {' '} + Term of Service + {' '} + and + + {' '} + Privacy Policy + + . +
+
+ ); }; diff --git a/platform/firecamp-platform/src/types.ts b/platform/firecamp-platform/src/types.ts index 4434d3c0..0f1edcfb 100644 --- a/platform/firecamp-platform/src/types.ts +++ b/platform/firecamp-platform/src/types.ts @@ -92,10 +92,7 @@ export const EPlatformModalDefaultProps = { // { height: '750px', width: '500px' }, // auth - [EPlatformModalTypes.SignIn]: { - size: 440, - }, - [EPlatformModalTypes.SignInWithEmail]: { size: 440 }, + [EPlatformModalTypes.SignUp]: { size: 440 }, [EPlatformModalTypes.RefreshToken]: { closeOnEscape: false }, [EPlatformModalTypes.ForgotPassword]: { size: 440 }, diff --git a/platform/firecamp-ui/src/components/modal/Modal.interface.ts b/platform/firecamp-ui/src/components/modal/Modal.interface.ts new file mode 100644 index 00000000..0efbbfbd --- /dev/null +++ b/platform/firecamp-ui/src/components/modal/Modal.interface.ts @@ -0,0 +1,7 @@ +import { ModalProps } from '@mantine/core'; +export interface IModal extends ModalProps { + /** + * Is modal open or not + */ + // isOpen?: boolean; +} diff --git a/platform/firecamp-ui/src/components/modal/Modalv2.tsx b/platform/firecamp-ui/src/components/modal/Modalv2.tsx index e3a7995d..27eab2b9 100644 --- a/platform/firecamp-ui/src/components/modal/Modalv2.tsx +++ b/platform/firecamp-ui/src/components/modal/Modalv2.tsx @@ -1,32 +1,10 @@ import { FC } from 'react'; -import { ScrollBar } from '@firecamp/ui'; import { Modal as MantineModal, ScrollArea } from '@mantine/core'; -import { ModalProps } from '@mantine/core'; import { createStyles } from '@mantine/core'; -interface IModal extends ModalProps { - /** - * Is modal open or not - */ - isOpen?: boolean; -} -interface IBody { - id?: string; - children?: any; - className?: string; - scrollbar?: boolean; -} - -interface IFooter { - id?: string; - children?: any; - className?: string; -} +import { IModal } from './Modal.interface'; // custom styles for variants const useStyles = createStyles((theme, { title }: IModal) => ({ - // root: { - - // }, content: { backgroundColor: theme.colorScheme === 'light' @@ -37,11 +15,6 @@ const useStyles = createStyles((theme, { title }: IModal) => ({ ? theme.colors.dark[5] : theme.colors.gray[4], maxWidth: '48rem', - // padding: '1rem', - - // width: '100%', - // maxHeight: '90vh', - // minHeight: '400px' }, header: { backgroundColor: 'transparent', @@ -63,48 +36,42 @@ const useStyles = createStyles((theme, { title }: IModal) => ({ : {}), }, body: { - padding: '1rem', + paddingLeft: '2rem', + paddingRight: '2rem', + paddingBottom: '2rem', }, })); -const Modal: FC & { - Body: FC; - Footer: FC; -} = ({ +const Modal: FC = ({ id = '', - isOpen = false, opened = false, classNames = {}, onClose = () => {}, children = <>, ...props }) => { - // console.log(`modal-props...`, props); const { classes, cx, theme } = useStyles({ title: props.title, - opened: isOpen || opened, + opened, onClose: () => {}, }); + console.log(`modal-props...`, classNames, props, { + ...classNames, + content: cx('invisible-scrollbar', classNames.content, classes.content), + header: cx(classNames.header, classes.header), + }); return ( onClose()} id={id} centered classNames={{ ...classNames, - content: cx('invisible-scrollbar', classNames.content, classes.content), - header: cx(classNames.header, classes.header), - // body: 'invisible-scrollbar ' + content: cx('invisible-scrollbar', classes.content, classNames.content), + header: cx(classes.header, classNames.header), + body: cx(classes.body, classNames.body), }} - // styles={{ - // body: { - // display: 'flex', - // flexDirection: 'column', - // minHeight: '400px', - // maxHeight: '90vh', - // } - // }} scrollAreaComponent={ScrollArea.Autosize} closeButtonProps={{ bg: @@ -118,28 +85,5 @@ const Modal: FC & { ); }; -let Body: FC = ({ children = '' }) => { - return
{children}
; - return ( - - {/* provide static height to display the scrollbar */} - <>{children} - - ); -}; -const Footer: FC = ({ id = '', children = '', className = '' }) => { - return ( -
- {children} -
- ); -}; - -Modal.Body = Body; -Modal.Footer = Footer; export default Modal; diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss index e0ba9673..383bbb54 100644 --- a/platform/firecamp-ui/src/scss/tailwind.scss +++ b/platform/firecamp-ui/src/scss/tailwind.scss @@ -726,6 +726,10 @@ .mt-2{ margin-top: 0.5rem; +} +.mt-3{ + margin-top: 0.75rem; + } .mt-4{ margin-top: 1rem; @@ -1287,10 +1291,6 @@ .\!overflow-y-auto{ overflow-y: auto !important; -} -.overflow-y-auto{ - overflow-y: auto; - } .overflow-y-scroll{ overflow-y: scroll; diff --git a/platform/firecamp-ui/src/ui-kit.ts b/platform/firecamp-ui/src/ui-kit.ts index 66a531fb..9403a7ac 100644 --- a/platform/firecamp-ui/src/ui-kit.ts +++ b/platform/firecamp-ui/src/ui-kit.ts @@ -30,7 +30,7 @@ export { default as FileInput } from './components/input/FileInput'; // Modal export { default as Modal } from './components/modal/Modalv2'; -export type { IModal } from './components/modal/interfaces/Modal.interface'; +export type { IModal } from './components/modal/Modal.interface'; export { default as SplitView } from './components/split-view/SplitView'; From 397b467cc577109826c883c663a626403555859e Mon Sep 17 00:00:00 2001 From: Nishchit14 Date: Thu, 20 Jul 2023 17:07:27 +0530 Subject: [PATCH 4/9] ui(Modal2): updated usage in auth popups --- .../src/components/modals/ModalContainer.tsx | 24 +- .../components/modals/auth/ForgotPassword.tsx | 110 +++---- .../components/modals/auth/RefreshToken.tsx | 16 +- .../components/modals/auth/ResetPassword.tsx | 239 +++++++------- .../src/components/modals/auth/SignUp.tsx | 293 +++++++++--------- platform/firecamp-platform/src/types.ts | 6 - platform/firecamp-ui/src/scss/tailwind.scss | 4 + 7 files changed, 336 insertions(+), 356 deletions(-) diff --git a/platform/firecamp-platform/src/components/modals/ModalContainer.tsx b/platform/firecamp-platform/src/components/modals/ModalContainer.tsx index 4f964540..ad0742a9 100644 --- a/platform/firecamp-platform/src/components/modals/ModalContainer.tsx +++ b/platform/firecamp-platform/src/components/modals/ModalContainer.tsx @@ -67,13 +67,13 @@ export const ModalContainer = () => { case EPlatformModalTypes.SignInWithEmail: return ; case EPlatformModalTypes.SignUp: - return ; + return ; case EPlatformModalTypes.ForgotPassword: - return ; + return ; case EPlatformModalTypes.ResetPassword: - return ; + return ; case EPlatformModalTypes.RefreshToken: - return ; + return ; default: return <>; } @@ -82,23 +82,11 @@ export const ModalContainer = () => { const modalProps = EPlatformModalDefaultProps[currentOpenModal]; // console.log(modalProps, '.....'); - const MODAL_TITLE = { - [EPlatformModalTypes.OrgManagement]: 'Organization Management', - [EPlatformModalTypes.WorkspaceManagement]: 'Workspace Management', - [EPlatformModalTypes.SwitchOrg]: 'Switch Organization', - [EPlatformModalTypes.CloneEnvironment]: 'Clone Environment', - [EPlatformModalTypes.EditRequest]: 'Update Request Info', - [EPlatformModalTypes.SwitchWorkspace]: 'Switch Workspace', - [EPlatformModalTypes.InviteMembers]: 'Invite Members To Join The Workspace', - } - if([EPlatformModalTypes.SignInWithEmail].includes(currentOpenModal)){ - return renderModal(currentOpenModal) - } return ( - + <> {renderModal(currentOpenModal)} - + ); const modalType = currentOpenModal; diff --git a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx index 88109572..29555410 100644 --- a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx @@ -7,7 +7,7 @@ import platformContext from '../../../services/platform-context'; /** * ForgotPassword component */ -const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => { +const ForgotPassword: FC = ({ opened = false, onClose = () => {} }) => { const [isRequesting, setFlagIsRequesting] = useState(false); const form = useForm(); let { handleSubmit, errors } = form; @@ -51,61 +51,61 @@ const ForgotPassword: FC = ({ isOpen = false, onClose = () => {} }) => { const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit); return ( - <> - - -
- Enter your Email Address -
-
- You’ll get the password recovery token in your inbox. -
-
-
- -
- - - + + + ); }; diff --git a/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx b/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx index 39db7c8d..d69ae0d1 100644 --- a/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx +++ b/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx @@ -13,17 +13,13 @@ import { useUserStore } from '../../../store/user'; /** * RefreshToken component for user to autenticate. */ -const RefreshToken: FC = ({ onClose = () => {} }) => { +const RefreshToken: FC = ({ opened, onClose = () => {} }) => { return ( - <> - -
- - - -