fix: Alignment issues on the invite modal and the members page (#22122)

## Description

> Alignment issues on the invite modal and the members page

Fixes [#22020](https://github.com/appsmithorg/appsmith/issues/22020)

## Type of change

- Bug fix (non-breaking change which fixes an issue)
- Chore (housekeeping or task changes that don't impact user perception)


## How Has This Been Tested?
- Manual

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/src/ce/constants/workspaceConstants.ts

@@ -18,12 +18,12 @@ export type Workspace = {
 };
 
 export type WorkspaceUserRoles = {
-  id: string;
-  name: string;
-  description: string;
+  id?: string;
+  name?: string;
+  description?: string;
   entityType: ENTITY_TYPE;
-  entityName: string;
-  entityId: string;
+  entityName?: string;
+  entityId?: string;
   autoCreated: boolean;
 };
 

app/client/src/ce/pages/workspace/Members.tsx

@@ -244,12 +244,13 @@ export const NoResultsText = styled.div`
 export const RowWrapper = styled.div<{ isSubRow?: boolean }>`
   display: flex;
 
-  ${({ isSubRow }) =>
-    isSubRow
-      ? `padding-left: 12px;`
-      : `> div {
-          margin-left: 8px;
-        }`}
+  ${({ isSubRow }) => (isSubRow ? `padding-left: 12px;` : ``)}
+
+  .cs-icon {
+    margin: 0 4px 0 0;
+    position: relative;
+    left: -4px;
+  }
 `;
 
 export default function MemberSettings(props: PageProps) {

app/client/src/ce/pages/workspace/WorkspaceInviteUsersForm.tsx

@@ -138,13 +138,19 @@ export const UserList = styled.div`
   }
 `;
 
-export const User = styled.div`
+export const User = styled.div<{ isApplicationInvite?: boolean }>`
   display: flex;
   align-items: center;
   min-height: 54px;
   padding: 5px 0 5px 15px;
   justify-content: space-between;
   color: ${(props) => props.theme.colors.modal.user.textColor};
+  border-bottom: 1px solid ${(props) => props.theme.colors.menuBorder};
+
+  &:last-child {
+    ${({ isApplicationInvite }) =>
+      isApplicationInvite && `border-bottom: none;`}
+  }
 `;
 
 export const UserInfo = styled.div`
@@ -187,10 +193,6 @@ export const UserName = styled.div`
   }
 `;
 
-export const RoleDivider = styled.div`
-  border-top: 1px solid ${(props) => props.theme.colors.menuBorder};
-`;
-
 export const Loading = styled(Spinner)`
   padding-top: 10px;
   margin: auto;
@@ -337,6 +339,7 @@ function WorkspaceInviteUsersForm(props: any) {
     fetchCurrentWorkspace,
     fetchUser,
     handleSubmit,
+    isApplicationInvite = false,
     isLoading,
     isMultiSelectDropdown = false,
     placeholder = "",
@@ -536,7 +539,7 @@ function WorkspaceInviteUsersForm(props: any) {
                   }) => {
                     return (
                       <Fragment key={user.username}>
-                        <User>
+                        <User isApplicationInvite={isApplicationInvite}>
                           <UserInfo>
                             <ProfileImage
                               source={
@@ -557,8 +560,6 @@ function WorkspaceInviteUsersForm(props: any) {
                             </Text>
                           </UserRole>
                         </User>
-
-                        <RoleDivider />
                       </Fragment>
                     );
                   },
@@ -584,7 +585,10 @@ function WorkspaceInviteUsersForm(props: any) {
           )}
         </ErrorBox>
         {canManage && !disableManageUsers && (
-          <ManageUsers workspaceId={props.workspaceId} />
+          <ManageUsers
+            isApplicationInvite={isApplicationInvite}
+            workspaceId={props.workspaceId}
+          />
         )}
       </StyledForm>
     </WorkspaceInviteWrapper>

app/client/src/pages/workspace/AppInviteUsersForm.tsx

@@ -39,7 +39,6 @@ const ShareToggle = styled.div`
 const BottomContainer = styled.div<{ canInviteToApplication?: boolean }>`
   ${({ canInviteToApplication }) =>
     canInviteToApplication ? `border-top: 1px solid ${Colors.GREY_200}` : ``};
-  margin-top: 12px;
 `;
 
 function AppInviteUsersForm(props: any) {

app/client/src/pages/workspace/ManageUsers.tsx

@@ -4,9 +4,15 @@ import history from "utils/history";
 import { Classes, Icon, IconSize, Text, TextType } from "design-system-old";
 import { useLocation } from "react-router-dom";
 
-const StyledManageUsers = styled("a")`
-  margin-top: 12px;
-  display: inline-flex;
+const StyledManageUsers = styled("a")<{ isApplicationInvite?: boolean }>`
+  display: flex;
+
+  ${(props) =>
+    props.isApplicationInvite
+      ? `padding: 12px 0; border-top: 1px solid
+          ${props.theme.colors.menuBorder};`
+      : `padding: 12px 0 0;`}
+
   &&&& {
     text-decoration: none;
   }
@@ -36,13 +42,20 @@ const StyledManageUsers = styled("a")`
   }
 `;
 
-function ManageUsers({ workspaceId }: { workspaceId: string }) {
+function ManageUsers({
+  isApplicationInvite,
+  workspaceId,
+}: {
+  isApplicationInvite?: boolean;
+  workspaceId: string;
+}) {
   const currentPath = useLocation().pathname;
   const pathRegex = /(?:\/workspace\/)\w+(?:\/settings)/;
 
   return !pathRegex.test(currentPath) ? (
     <StyledManageUsers
       className="manageUsers"
+      isApplicationInvite={isApplicationInvite}
       onClick={() => {
         history.push(`/workspace/${workspaceId}/settings/members`);
       }}