diff --git a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx index 8fd3cd035e..db9c3d95b6 100644 --- a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx +++ b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx @@ -7,6 +7,9 @@ import { isPermitted } from "pages/Applications/permissionHelpers"; const StyledDialog = styled(Dialog)<{ setMaxWidth?: boolean }>` && { background: white; + & .bp3-dialog-header { + padding: 36px; + } & .bp3-dialog-footer-actions { display: block; } @@ -68,4 +71,4 @@ export const FormDialogComponent = (props: FormDialogComponentProps) => { ); }; -export default connect()(FormDialogComponent); +export default connect()(FormDialogComponent); \ No newline at end of file diff --git a/app/client/src/pages/organization/InviteUsersFromv2.tsx b/app/client/src/pages/organization/InviteUsersFromv2.tsx index 6cb635a1c7..def5938daa 100644 --- a/app/client/src/pages/organization/InviteUsersFromv2.tsx +++ b/app/client/src/pages/organization/InviteUsersFromv2.tsx @@ -11,22 +11,28 @@ import { getRoles, getDefaultRole, getRolesForField, + getAllUsers, } from "selectors/organizationSelectors"; import { ReduxActionTypes } from "constants/ReduxActionConstants"; import { InviteUsersToOrgFormValues, inviteUsersToOrg } from "./helpers"; import { OrgRole } from "constants/orgConstants"; import { INVITE_USERS_TO_ORG_FORM } from "constants/forms"; +import { Classes } from "@blueprintjs/core"; const StyledForm = styled.div` width: 100%; background: white; - padding: ${props => props.theme.spaces[11]}px; + padding: ${props => props.theme.spaces[5]}px; &&& { .bp3-input { box-shadow: none; } } + .manageUsers { + float: right; + margin-top: 12px; + } `; const StyledInviteFieldGroup = styled.div` && { @@ -35,22 +41,37 @@ const StyledInviteFieldGroup = styled.div` flex-wrap: none; justify-content: space-between; align-items: flex-start; + } - & > div { - min-width: 150px; - margin: 0em 1em 1em 0em; - } - & > div:last-of-type { - min-width: 0; - display: flex; - align-self: center; - } + .bp3-popover-target { + padding-right: 10px; + padding-top: 5px; + } +`; + +const UserList = styled.div` + max-height: 100px; + overflow-y: scroll; + .user { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 8px; + margin-bottom: 8px; + } +`; + +const StyledButton = styled(Button)` + &&&.${Classes.BUTTON} { + width: 100px; + height: 32px; } `; const InviteUsersForm = (props: any) => { - const { handleSubmit } = props; + const { handleSubmit, allUsers } = props; useEffect(() => { + props.fetchUser(props.orgId); props.fetchAllRoles(props.orgId); }, [props.orgId]); @@ -66,21 +87,41 @@ const InviteUsersForm = (props: any) => { intent="success" /> - -