From efad40becdd247c3dfab0c76a631595477db6c7d Mon Sep 17 00:00:00 2001
From: Tejaaswini <tejaaswini.narendra@codemonk.in>
Date: Thu, 4 Jun 2020 18:42:19 +0530
Subject: [PATCH] fix: Update UI changes

---
 .../form/FormDialogComponent.tsx              |  4 --
 .../form/fields/SelectField.tsx               |  3 -
 app/client/src/pages/Editor/EditorHeader.tsx  | 11 +++-
 .../pages/organization/InviteUsersFromv2.tsx  | 62 +++++++++----------
 4 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx
index 9b80099662..8fd3cd035e 100644
--- a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx
+++ b/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;
     }
diff --git a/app/client/src/components/editorComponents/form/fields/SelectField.tsx b/app/client/src/components/editorComponents/form/fields/SelectField.tsx
index 168e9a0e91..b8ce5d6d69 100644
--- a/app/client/src/components/editorComponents/form/fields/SelectField.tsx
+++ b/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>
   );
 };
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index 3ecdbb026d..dfa592aebb 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/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
diff --git a/app/client/src/pages/organization/InviteUsersFromv2.tsx b/app/client/src/pages/organization/InviteUsersFromv2.tsx
index 22089c67cc..6730dd5c1c 100644
--- a/app/client/src/pages/organization/InviteUsersFromv2.tsx
+++ b/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;
-    flex-direction: row;
-    flex-wrap: none;
-    justify-content: space-between;
-    align-items: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .users {
+    width: 300px;
   }
 
-  .bp3-popover-target {
-    padding-right: 10px;
-    padding-top: 5px;
+  .wrapper {
+    display: flex;
+    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;
-    height: 32px;
+    width: 83px;
+    height: 40px;
   }
 `;
 
@@ -79,28 +79,24 @@ const InviteUsersForm = (props: any) => {
   return (
     <StyledForm>
       <StyledInviteFieldGroup>
-        <FormGroup fill>
-          <TagListField
-            name="users"
-            placeholder="Enter email address"
-            type="email"
-            label="Emails"
-            intent="success"
-          />
-        </FormGroup>
-        <FormGroup fill>
-          <SelectField
-            name="role"
-            placeholder="Select a role"
-            options={props.roles}
-            size="large"
-          />
-        </FormGroup>
+        <TagListField
+          name="users"
+          placeholder="Enter email address"
+          type="email"
+          label="Emails"
+          intent="success"
+        />
+        <SelectField
+          name="role"
+          placeholder="Select a role"
+          options={props.roles}
+          size="large"
+        />
         <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>