Skip to content

Commit e3907fa

Browse files
kabeatykabeaty
authored
Merge pull request #4394 from coralproject/feat/CORL-2934-design-copy-updates
[CORL-2934]: DSA - updates to design and copy
2 parents 81a9a0d + d334460 commit e3907fa

31 files changed

+744
-291
lines changed

‎client/src/core/client/admin/components/Comment/InReplyTo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const InReplyTo: FunctionComponent<Props> = ({
3535
<SvgIcon
3636
className={styles.icon}
3737
size="xs"
38-
filled
38+
filled="currentColor"
3939
Icon={EmailActionReplyIcon}
4040
/>{" "}
4141
<Localized

‎client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { useDateTimeFormatter } from "coral-framework/hooks";
66
import { withFragmentContainer } from "coral-framework/lib/relay";
77
import { GQLDSAReportStatus } from "coral-framework/schema";
88
import {
9-
NightMoonHalfIcon,
9+
DeleteIcon,
10+
SignBadgeCircleDuoIcon,
1011
SignBadgeCircleIcon,
1112
SvgIcon,
1213
} from "coral-ui/components/icons";
@@ -37,13 +38,31 @@ const ReportRowContainer: React.FunctionComponent<Props> = ({ dsaReport }) => {
3738
}
3839
switch (status) {
3940
case GQLDSAReportStatus.AWAITING_REVIEW:
40-
return <SvgIcon Icon={SignBadgeCircleIcon} />;
41+
return (
42+
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
43+
);
4144
case GQLDSAReportStatus.UNDER_REVIEW:
42-
return <SvgIcon Icon={NightMoonHalfIcon} />;
45+
return (
46+
<SvgIcon
47+
Icon={SignBadgeCircleDuoIcon}
48+
filled="tealLight"
49+
color="teal"
50+
/>
51+
);
4352
case GQLDSAReportStatus.COMPLETED:
44-
return <SvgIcon Icon={SignBadgeCircleIcon} filled />;
53+
return (
54+
<SvgIcon
55+
Icon={SignBadgeCircleIcon}
56+
filled="currentColor"
57+
color="teal"
58+
/>
59+
);
60+
case GQLDSAReportStatus.VOID:
61+
return <SvgIcon Icon={DeleteIcon} color="teal" />;
4562
default:
46-
return <SvgIcon Icon={SignBadgeCircleIcon} />;
63+
return (
64+
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
65+
);
4766
}
4867
}, []);
4968

‎client/src/core/client/admin/routes/Reports/ReportStatusMenu.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,18 @@
55
font-weight: var(--font-weight-primary-semi-bold);
66
padding-right: var(--spacing-2);
77
}
8+
9+
.toggleButton {
10+
background-color: var(--palette-background-body);
11+
width: calc(20 * var(--mini-unit));
12+
}
13+
14+
.dropdownButton {
15+
font-size: var(--font-size-1);
16+
}
17+
18+
.dropdown {
19+
max-height: 15em;
20+
width: calc(20 * var(--mini-unit));
21+
overflow: auto;
22+
}

‎client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx

Lines changed: 148 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
11
import { Localized } from "@fluent/react/compat";
22
import React, { FunctionComponent, useCallback } from "react";
33

4+
import { useCoralContext } from "coral-framework/lib/bootstrap";
5+
import { getMessage } from "coral-framework/lib/i18n";
6+
import { IntersectionProvider } from "coral-framework/lib/intersection";
47
import { useMutation } from "coral-framework/lib/relay";
5-
import { Option, SelectField } from "coral-ui/components/v2";
8+
import { GQLDSAReportStatus } from "coral-framework/schema";
9+
import {
10+
ArrowsDownIcon,
11+
ArrowsUpIcon,
12+
ButtonSvgIcon,
13+
DeleteIcon,
14+
QuestionCircleIcon,
15+
SignBadgeCircleDuoIcon,
16+
SignBadgeCircleIcon,
17+
SvgIcon,
18+
} from "coral-ui/components/icons";
19+
import {
20+
Button,
21+
ClickOutside,
22+
Dropdown,
23+
DropdownButton,
24+
Flex,
25+
Popover,
26+
} from "coral-ui/components/v2";
627

728
import { DSAReportStatus } from "coral-admin/__generated__/SingleReportRouteQuery.graphql";
829

@@ -24,9 +45,55 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
2445
onChangeReportStatusCompleted,
2546
}) => {
2647
const changeReportStatus = useMutation(ChangeReportStatusMutation);
48+
const { localeBundles } = useCoralContext();
49+
50+
const statusMappings = {
51+
AWAITING_REVIEW: {
52+
text: getMessage(
53+
localeBundles,
54+
"reports-status-awaitingReview",
55+
"Awaiting review"
56+
),
57+
icon: (
58+
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
59+
),
60+
},
61+
UNDER_REVIEW: {
62+
text: getMessage(localeBundles, "reports-status-inReview", "In review"),
63+
icon: (
64+
<SvgIcon
65+
Icon={SignBadgeCircleDuoIcon}
66+
filled="tealLight"
67+
color="teal"
68+
/>
69+
),
70+
},
71+
COMPLETED: {
72+
text: getMessage(localeBundles, "reports-status-completed", "Completed"),
73+
icon: (
74+
<SvgIcon
75+
Icon={SignBadgeCircleIcon}
76+
filled="currentColor"
77+
color="teal"
78+
/>
79+
),
80+
},
81+
VOID: {
82+
text: getMessage(localeBundles, "reports-status-void", "Void"),
83+
icon: <SvgIcon Icon={DeleteIcon} color="teal" />,
84+
},
85+
"%future added value": {
86+
text: getMessage(
87+
localeBundles,
88+
"reports-status-unknown",
89+
"Unknown status"
90+
),
91+
icon: <SvgIcon Icon={QuestionCircleIcon} color="teal" />,
92+
},
93+
};
2794

2895
const onChangeStatus = useCallback(
29-
async (status: DSAReportStatus) => {
96+
async (status: GQLDSAReportStatus) => {
3097
if (status === "COMPLETED") {
3198
onChangeReportStatusCompleted();
3299
} else {
@@ -49,27 +116,86 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
49116
>
50117
Status
51118
</label>
52-
<SelectField
53-
id="coral-reports-report-statusMenu"
54-
onChange={(e) => onChangeStatus(e.target.value as DSAReportStatus)}
55-
value={value ?? "AWAITING_REVIEW"}
56-
disabled={value === "COMPLETED" || value === "VOID"}
119+
<Popover
120+
id=""
121+
placement="bottom-end"
122+
modifiers={{ arrow: { enabled: false }, offset: { offset: "0, 4" } }}
123+
body={({ toggleVisibility }) => (
124+
<ClickOutside onClickOutside={toggleVisibility}>
125+
<IntersectionProvider>
126+
<Dropdown className={styles.dropdown}>
127+
<Localized id="reports-status-awaitingReview">
128+
<DropdownButton
129+
className={styles.dropdownButton}
130+
onClick={async () => {
131+
toggleVisibility();
132+
await onChangeStatus(GQLDSAReportStatus.AWAITING_REVIEW);
133+
}}
134+
icon={
135+
statusMappings[GQLDSAReportStatus.AWAITING_REVIEW].icon
136+
}
137+
>
138+
Awaiting Review
139+
</DropdownButton>
140+
</Localized>
141+
<Localized id="reports-status-inReview">
142+
<DropdownButton
143+
className={styles.dropdownButton}
144+
onClick={async () => {
145+
toggleVisibility();
146+
await onChangeStatus(GQLDSAReportStatus.UNDER_REVIEW);
147+
}}
148+
icon={statusMappings[GQLDSAReportStatus.UNDER_REVIEW].icon}
149+
>
150+
In review
151+
</DropdownButton>
152+
</Localized>
153+
<Localized id="reports-status-completed">
154+
<DropdownButton
155+
className={styles.dropdownButton}
156+
onClick={async () => {
157+
toggleVisibility();
158+
await onChangeStatus(GQLDSAReportStatus.COMPLETED);
159+
}}
160+
icon={statusMappings[GQLDSAReportStatus.COMPLETED].icon}
161+
>
162+
Completed
163+
</DropdownButton>
164+
</Localized>
165+
</Dropdown>
166+
</IntersectionProvider>
167+
</ClickOutside>
168+
)}
57169
>
58-
<Localized id="reports-status-awaitingReview">
59-
<Option value="AWAITING_REVIEW">Awaiting review</Option>
60-
</Localized>
61-
<Localized id="reports-status-inReview">
62-
<Option value="UNDER_REVIEW">In review</Option>
63-
</Localized>
64-
<Localized id="reports-status-completed">
65-
<Option value="COMPLETED">Completed</Option>
66-
</Localized>
67-
<Localized id="reports-status-void">
68-
<Option hidden value="VOID">
69-
Void
70-
</Option>
71-
</Localized>
72-
</SelectField>
170+
{({ toggleVisibility, ref, visible }) => (
171+
<Button
172+
className={styles.toggleButton}
173+
variant="outlined"
174+
adornmentLeft
175+
color="mono"
176+
onClick={toggleVisibility}
177+
ref={ref}
178+
uppercase={false}
179+
disabled={
180+
value === GQLDSAReportStatus.COMPLETED ||
181+
value === GQLDSAReportStatus.VOID
182+
}
183+
>
184+
{value
185+
? statusMappings[value].icon
186+
: statusMappings[GQLDSAReportStatus.AWAITING_REVIEW].icon}
187+
<Flex alignItems="center">
188+
{value
189+
? statusMappings[value].text
190+
: statusMappings[GQLDSAReportStatus.AWAITING_REVIEW].text}
191+
</Flex>
192+
<ButtonSvgIcon
193+
Icon={visible ? ArrowsUpIcon : ArrowsDownIcon}
194+
size="xs"
195+
/>
196+
</Button>
197+
)}
198+
</Popover>
73199
</>
74200
);
75201
};

0 commit comments

Comments
 (0)