fix: Update UI changes

app/client/src/components/editorComponents/form/FormDialogComponent.tsx

@@ -7,10 +7,6 @@ import { isPermitted } from "pages/Applications/permissionHelpers";
 const StyledDialog = styled(Dialog)<{ setMaxWidth?: boolean }>`
   && {
     background: white;
-    & .bp3-dialog-header {
-      padding: ${props => props.theme.spaces[4]}px
-        ${props => props.theme.spaces[4]}px;
-    }
     & .bp3-dialog-footer-actions {
       display: block;
     }

app/client/src/components/editorComponents/form/fields/SelectField.tsx

@@ -16,9 +16,6 @@ const renderComponent = (
   return (
     <React.Fragment>
       <SelectComponent {...componentProps} />
-      <FormFieldError
-        error={componentProps.meta.touched && componentProps.meta.error}
-      />
     </React.Fragment>
   );
 };

app/client/src/pages/Editor/EditorHeader.tsx

@@ -28,7 +28,7 @@ const LoadingContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  flex-grow: 1;
+  flex-shrink: 1;
   margin: 0 10px;
 `;
 
@@ -49,6 +49,12 @@ const StretchedBreadCrumb = styled(Breadcrumbs)`
   }
 `;
 
+const InviteButton = styled.div`
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+`;
+
 type EditorHeaderProps = {
   isSaving?: boolean;
   pageSaveError?: boolean;
@@ -140,6 +146,9 @@ export const EditorHeader = (props: EditorHeaderProps) => {
     <StyledHeader>
       <StretchedBreadCrumb items={navigation} minVisibleItems={3} />
       <CustomizedDropdown {...pageSelectorData} />
+      <InviteButton>
+        <Button text="Share" intent="primary" filled size="small" />
+      </InviteButton>
       <LoadingContainer>{saveStatusMessage}</LoadingContainer>
       <PreviewPublishSection>
         <Button

app/client/src/pages/organization/InviteUsersFromv2.tsx

@@ -19,15 +19,13 @@ import { OrgRole } from "constants/orgConstants";
 import { INVITE_USERS_TO_ORG_FORM } from "constants/forms";
 import { Classes } from "@blueprintjs/core";
 import { noop } from "lodash";
-
 const StyledForm = styled.div`
   width: 100%;
   background: white;
   padding: ${props => props.theme.spaces[5]}px;
-
   &&& {
     .bp3-input {
-      box-shadow: none;
+      width: 250px;
     }
   }
   .manageUsers {
@@ -36,17 +34,19 @@ const StyledForm = styled.div`
   }
 `;
 const StyledInviteFieldGroup = styled.div`
-  && {
+  display: flex;
-    display: flex;
+  align-items: center;
-    flex-direction: row;
+  justify-content: space-between;
-    flex-wrap: none;
+  .users {
-    justify-content: space-between;
+    width: 300px;
-    align-items: flex-start;
   }
 
-  .bp3-popover-target {
+  .wrapper {
-    padding-right: 10px;
+    display: flex;
-    padding-top: 5px;
+    width: 100%;
+    flex-direction: row;
+    alignItem: "center",
+    justifyContent: "center",
   }
 `;
 
@@ -64,8 +64,8 @@ const UserList = styled.div`
 
 const StyledButton = styled(Button)`
   &&&.${Classes.BUTTON} {
-    width: 100px;
+    width: 83px;
-    height: 32px;
+    height: 40px;
   }
 `;
 
@@ -79,28 +79,24 @@ const InviteUsersForm = (props: any) => {
   return (
     <StyledForm>
       <StyledInviteFieldGroup>
-        <FormGroup fill>
+        <TagListField
-          <TagListField
+          name="users"
-            name="users"
+          placeholder="Enter email address"
-            placeholder="Enter email address"
+          type="email"
-            type="email"
+          label="Emails"
-            label="Emails"
+          intent="success"
-            intent="success"
+        />
-          />
+        <SelectField
-        </FormGroup>
+          name="role"
-        <FormGroup fill>
+          placeholder="Select a role"
-          <SelectField
+          options={props.roles}
-            name="role"
+          size="large"
-            placeholder="Select a role"
+        />
-            options={props.roles}
-            size="large"
-          />
-        </FormGroup>
         <StyledButton
           className="invite"
           text="Invite"
-          intent="primary"
           filled
+          intent="primary"
           onClick={handleSubmit((values: any, dispatch: any) => {
             inviteUsersToOrg({ ...values, orgId: props.orgId }, dispatch);
           })}
@@ -119,8 +115,8 @@ const InviteUsersForm = (props: any) => {
       <Button
         className="manageUsers"
         text="Manage Users"
-        intent="primary"
         filled
+        intent="primary"
         onClick={noop}
       />
     </StyledForm>