Skip to content

Commit d414eae

Browse files
deepjyoti30-stdeepjyoti30-st
committed
feat: make various changes according to design updates
1 parent f5cd5be commit d414eae

File tree

19 files changed

+289
-170
lines changed

19 files changed

+289
-170
lines changed

‎packages/tenants-react/src/components/invitations/InvitedUsers.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,13 @@ export const InvitedUsers: React.FC<InvitedUsersProps> = ({ onRemove, invitation
3030
);
3131
};
3232

33-
return (
34-
<div>
35-
{invitations.length > 0 ? (
36-
<div>
37-
<TenantUsersTable
38-
columns={invitations.map((user) => ({
39-
emailComponent: <UserDetails email={user.email} />,
40-
extraComponent: getExtraComponent(user),
41-
}))}
42-
/>
43-
</div>
44-
) : (
45-
<NoUsers text={t("PL_TB_NO_INVITATIONS_FOUND_TEXT")} />
46-
)}
47-
</div>
48-
);
33+
return invitations.length > 0 ? (
34+
<TenantUsersTable
35+
emailComponentTitle={`Pending Invites (${invitations.length})`}
36+
columns={invitations.map((user) => ({
37+
emailComponent: <UserDetails email={user.email} avatarVariant="invite" />,
38+
extraComponent: getExtraComponent(user),
39+
}))}
40+
/>
41+
) : null;
4942
};

‎packages/tenants-react/src/components/requests/OnboardingRequests.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,13 @@ export const OnboardingRequests = () => {
7373
return <div>{t("PL_TB_TENANTS_LOADING_MESSAGE")}</div>;
7474
}
7575

76-
return (
77-
<div>
78-
{requests.length > 0 ? (
79-
<TenantUsersTable
80-
columns={requests.map((user) => ({
81-
emailComponent: <UserDetails email={user.emails[0]!} />,
82-
extraComponent: getExtraComponent(user),
83-
}))}
84-
/>
85-
) : (
86-
<NoUsers text="No joining requests available for tenant" />
87-
)}
88-
</div>
89-
);
76+
return requests.length > 0 ? (
77+
<TenantUsersTable
78+
emailComponentTitle={`Tenant Onboarding Requests (${requests.length})`}
79+
columns={requests.map((user) => ({
80+
emailComponent: <UserDetails email={user.emails[0]!} avatarVariant="request" />,
81+
extraComponent: getExtraComponent(user),
82+
}))}
83+
/>
84+
) : null;
9085
};

‎packages/tenants-react/src/components/requests/TenantRequests.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎packages/tenants-react/src/components/requests/requests.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33

44
.actionWrapper {
55
display: flex;
6-
align-items: center;
6+
align-items: end;
7+
justify-content: flex-end;
78
gap: 10px;
89
}
910

‎packages/tenants-react/src/components/tab/TenantTab.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Card } from "@shared/ui";
12
import classNames from "classnames/bind";
23
import React from "react";
34

@@ -13,12 +14,12 @@ type TenantTabProps = {
1314

1415
export const TenantTab: React.FC<TenantTabProps> = ({ description, descriptionComponent, children }) => {
1516
return (
16-
<div>
17-
<div className={cx("tabDescription")}>
17+
<Card className={cx("tenantTabCard")}>
18+
<div slot="header" className={cx("tabDescription")}>
1819
<div className={cx("tabDescriptionText")}>{description}</div>
1920
{descriptionComponent && <div>{descriptionComponent}</div>}
2021
</div>
2122
<div className={cx("tabChildrenWrapper")}>{children}</div>
22-
</div>
23+
</Card>
2324
);
2425
};

‎packages/tenants-react/src/components/tab/tenant-tab.module.scss‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
.tabDescription {
2-
background-color: #f9f9f8;
3-
border-bottom: 1px solid var(--neutral-color-neutral-6);
4-
padding: 14px;
5-
display: flex;
6-
align-items: center;
7-
justify-content: space-between;
2+
background-color: #ffffff;
83

94
.tabDescriptionText {
105
font-weight: 500;
116
font-style: Medium;
127
font-size: 14px;
138
line-height: 20px;
149
letter-spacing: 0px;
15-
color: #60646c;
10+
color: var(--neutral-color-neutral-11);
1611
}
1712
}
1813

1914
.tabChildrenWrapper {
20-
padding: 20px;
2115
background-color: #ffffff;
2216
border-bottom-left-radius: 16px;
2317
border-bottom-right-radius: 16px;
2418
}
19+
20+
.tenantTabCard {
21+
border: 1px solid var(--neutral-color-neutral-6);
22+
}
23+
24+
.tenantTabCard::part(body) {
25+
padding: 20px;
26+
}
27+
28+
.tenantTabCard::part(header) {
29+
padding: 20px;
30+
}

‎packages/tenants-react/src/components/table/table.module.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.tableContainer {
1+
:global(.tableContainer) {
22
border: 1px solid #b9bbc6;
33
border-radius: 8px;
44

@@ -7,7 +7,8 @@
77
display: flex;
88
align-items: center;
99
background-color: #f9f9f8;
10-
border-radius: 8px;
10+
border-top-left-radius: 8px;
11+
border-top-right-radius: 8px;
1112

1213
font-weight: 500;
1314
font-style: Medium;

‎packages/tenants-react/src/components/users/TenantUsers.tsx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -130,21 +130,13 @@ export const TenantUsers: React.FC<TenantUsersProps> = ({ onFetch, onRoleChange,
130130
return <div>{t("PL_TB_TENANTS_LOADING_MESSAGE")}</div>;
131131
}
132132

133-
return (
134-
<div>
135-
{users.length > 0 ? (
136-
<div>
137-
<TenantUsersTable
138-
extraComponentTitle="Role"
139-
columns={users.map((user) => ({
140-
emailComponent: <UserDetails email={user.emails[0]!} />,
141-
extraComponent: getExtraComponent(user),
142-
}))}
143-
/>
144-
</div>
145-
) : (
146-
<NoUsers text={t("PL_TB_NO_USERS_FOUND_TEXT")} />
147-
)}
148-
</div>
149-
);
133+
return users.length > 0 ? (
134+
<TenantUsersTable
135+
emailComponentTitle={`Users (${users.length})`}
136+
columns={users.map((user) => ({
137+
emailComponent: <UserDetails email={user.emails[0]!} />,
138+
extraComponent: getExtraComponent(user),
139+
}))}
140+
/>
141+
) : null;
150142
};

‎packages/tenants-react/src/components/users/UserDetails.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,35 @@ import style from "./details.module.scss";
44

55
const cx = classNames.bind(style);
66

7+
type AvatarVariant = "user" | "invite" | "request";
8+
79
type UserDetailsProps = {
810
email: string;
11+
avatarVariant?: AvatarVariant;
12+
};
13+
14+
const avatarColorForVariant = (variant: AvatarVariant): { bg: string; fg: string } => {
15+
return {
16+
user: {
17+
bg: "var(--accent-color-accent-9)",
18+
fg: "#FFFFFF",
19+
},
20+
invite: {
21+
bg: "var(--neutral-color-neutral-alpha-3)",
22+
fg: "var(--neutral-color-neutral-alpha-11)",
23+
},
24+
request: {
25+
bg: "var(--semantic-colors-warning-alpha-3)",
26+
fg: "var(--semantic-colors-warning-alpha-11)",
27+
},
28+
}[variant];
929
};
1030

11-
export const UserDetails: React.FC<UserDetailsProps> = ({ email }) => {
31+
export const UserDetails: React.FC<UserDetailsProps> = ({ email, avatarVariant = "user" }) => {
32+
const { bg: avatarBg, fg: avatarFg } = avatarColorForVariant(avatarVariant);
33+
const styleVars = { "--user-avatar-bg": avatarBg, "--user-avatar-fg": avatarFg } as React.CSSProperties;
1234
return (
13-
<div className={cx("userRow")}>
35+
<div className={cx("userRow")} style={styleVars}>
1436
<div className={cx("userAvatar")}>{email.charAt(0).toUpperCase() || "U"}</div>
1537
<div className={cx("userEmail")}>{email}</div>
1638
</div>

‎packages/tenants-react/src/components/users/details.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
gap: 18px;
55

66
.userAvatar {
7-
background-color: #3e63dd;
8-
color: #fff;
7+
background-color: var(--user-avatar-bg);
8+
color: var(--user-avatar-fg);
99
text-transform: uppercase;
1010
border-radius: 4px;
1111
width: 24px;

0 commit comments

Comments
 (0)