diff --git a/client/src/onboarding/layouts/OnboardingAdminLayout.module.css b/client/src/onboarding/layouts/OnboardingAdminLayout.module.css
index 22810d6c70..e8944ba27a 100644
--- a/client/src/onboarding/layouts/OnboardingAdminLayout.module.css
+++ b/client/src/onboarding/layouts/OnboardingAdminLayout.module.css
@@ -195,8 +195,8 @@
margin-right: 0.25em;
}
-.staffwait {
- background-color: var(--global-color-accent--weak);
+.highlightCell:has(> *.staffwait) {
+ background-color: #e6f4ff;
}
.users {
diff --git a/client/src/onboarding/layouts/OnboardingAdminLayout.tsx b/client/src/onboarding/layouts/OnboardingAdminLayout.tsx
index f84f3f24f6..75344941e9 100644
--- a/client/src/onboarding/layouts/OnboardingAdminLayout.tsx
+++ b/client/src/onboarding/layouts/OnboardingAdminLayout.tsx
@@ -32,7 +32,11 @@ const OnboardingApproveActions: React.FC<{
step: TOnboardingStep;
username: string;
}> = ({ step, username }) => {
- const { mutate: sendOnboardingAction, isPending } = useSendOnboardingAction();
+ const {
+ mutate: sendOnboardingAction,
+ isPending,
+ variables,
+ } = useSendOnboardingAction();
return (
@@ -45,7 +49,8 @@ const OnboardingApproveActions: React.FC<{
username,
})
}
- loading={isPending}
+ loading={isPending && variables?.body.action === 'staff_approve'}
+ disabled={isPending && variables?.body.action === 'staff_deny'}
icon={}
>
Approve
@@ -59,7 +64,8 @@ const OnboardingApproveActions: React.FC<{
username,
})
}
- loading={isPending}
+ loading={isPending && variables?.body.action === 'staff_deny'}
+ disabled={isPending && variables?.body.action === 'staff_approve'}
icon={}
>
Deny
@@ -128,12 +134,15 @@ const OnboardingAdminList: React.FC<{
{
title: 'User',
dataIndex: 'user',
- render: (user: TOnboardingUser) => (
- <>
+ className: styles.highlightCell,
+ render: (user: TOnboardingUser, record) => (
+
{`${user.firstName} ${user.lastName}`}
{user.username}
- >
+
),
onCell: (record) => ({
rowSpan: record.index === 0 ? record.user.steps.length : 0,
@@ -142,6 +151,7 @@ const OnboardingAdminList: React.FC<{
{
title: 'Step',
dataIndex: 'step',
+ className: styles.highlightCell,
render: (step: TOnboardingStep) => (
{step.displayName}
@@ -152,6 +162,7 @@ const OnboardingAdminList: React.FC<{
title: 'Status',
dataIndex: 'step',
key: 'status',
+ className: styles.highlightCell,
render: (step: TOnboardingStep) => (
@@ -162,23 +173,28 @@ const OnboardingAdminList: React.FC<{
title: 'Administrative Actions',
dataIndex: 'step',
key: 'actions',
+ className: styles.highlightCell,
render: (step: TOnboardingStep, record) => (
-
+
+
{step.state === 'staffwait' && (
)}
-
-
-
+
),
},
{
title: 'Log',
dataIndex: 'step',
key: 'log',
+ className: styles.highlightCell,
render: (step: TOnboardingStep, record) => (