Skip to content

Commit

Permalink
update svgicon fill/color and address some todo
Browse files Browse the repository at this point in the history
  • Loading branch information
@kabeaty
kabeaty committed Nov 14, 2023
1 parent 2a63a26 commit beb9bf2
Show file tree
Hide file tree
Showing 15 changed files with 174 additions and 152 deletions.
2 changes: 1 addition & 1 deletion client/src/core/client/admin/components/Comment/InReplyTo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const InReplyTo: FunctionComponent<Props> = ({
<SvgIcon
className={styles.icon}
size="xs"
filled
filled="currentColor"
Icon={EmailActionReplyIcon}
/>{" "}
<Localized
Expand Down
20 changes: 9 additions & 11 deletions client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,28 @@ const ReportRowContainer: React.FunctionComponent<Props> = ({ dsaReport }) => {
switch (status) {
case GQLDSAReportStatus.AWAITING_REVIEW:
return (
<SvgIcon
Icon={SignBadgeCircleIcon}
color="primary"
filled="primaryLight"
/>
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
);
case GQLDSAReportStatus.UNDER_REVIEW:
return (
<SvgIcon
Icon={SignBadgeCircleDuoIcon}
filled="primaryLight"
color="primary"
filled="tealLight"
color="teal"
/>
);
case GQLDSAReportStatus.COMPLETED:
return <SvgIcon Icon={SignBadgeCircleIcon} filled color="primary" />;
default:
return (
<SvgIcon
Icon={SignBadgeCircleIcon}
color="primary"
filled="primaryLight"
filled="currentColor"
color="teal"
/>
);
default:
return (
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
);
}
}, []);

Expand Down
36 changes: 20 additions & 16 deletions client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,30 +53,38 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
"Awaiting review"
),
icon: (
<SvgIcon
Icon={SignBadgeCircleIcon}
color="primary"
filled="primaryLight"
/>
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
),
},
UNDER_REVIEW: {
text: getMessage(localeBundles, "reports-status-inReview", "In review"),
icon: (
<SvgIcon
Icon={SignBadgeCircleDuoIcon}
filled="primaryLight"
color="primary"
filled="tealLight"
color="teal"
/>
),
},
COMPLETED: {
text: getMessage(localeBundles, "reports-status-completed", "Completed"),
icon: <SvgIcon Icon={SignBadgeCircleIcon} filled color="primary" />,
icon: (
<SvgIcon
Icon={SignBadgeCircleIcon}
filled="currentColor"
color="teal"
/>
),
},
VOID: {
text: getMessage(localeBundles, "reports-status-void", "Void"),
icon: <SvgIcon Icon={SignBadgeCircleIcon} filled color="primary" />,
icon: (
<SvgIcon
Icon={SignBadgeCircleIcon}
filled="currentColor"
color="teal"
/>
),
},
"%future added value": {
text: getMessage(
Expand All @@ -85,11 +93,7 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
"Unknown status"
),
icon: (
<SvgIcon
Icon={SignBadgeCircleIcon}
color="primary"
filled="primaryLight"
/>
<SvgIcon Icon={SignBadgeCircleIcon} color="teal" filled="tealLight" />
),
},
};
Expand Down Expand Up @@ -179,8 +183,8 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
ref={ref}
uppercase={false}
disabled={
value ===
(GQLDSAReportStatus.COMPLETED || GQLDSAReportStatus.VOID)
value === GQLDSAReportStatus.COMPLETED ||
value === GQLDSAReportStatus.VOID
}
>
{value
Expand Down
202 changes: 107 additions & 95 deletions client/src/core/client/admin/routes/Reports/ReportedComment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,119 +39,131 @@ const ReportedComment: FunctionComponent<Props> = ({
const { comment } = dsaReport;
const inReplyTo = comment && comment.parent && comment.parent.author;

// TODO: Maybe show something like Comment not available in this case
if (!comment) {
return null;
}

return (
<Flex direction="column">
<Flex direction="column" className={styles.commentMain}>
<Localized id="reports-singleReport-comment">
<div className={styles.label}>Comment</div>
</Localized>
<>
{comment.deleted ? (
<Localized id="reports-singleReport-comment-deleted">
<div className={styles.data}>
This comment is no longer available. The commenter has deleted
their account.
</div>
{!comment ? (
<Localized id="reports-singleReport-comment-notAvailable">
<div className={styles.data}>This comment is not available.</div>
</Localized>
) : (
<>
<Flex className={styles.commentBox}>
<div>
<div>
<Flex alignItems="center">
{comment.author?.username && (
<>
<UsernameButton
className={styles.commentUsernameButton}
username={comment.author.username}
onClick={() => onShowUserDrawer(comment.author?.id)}
/>
<CommentAuthorContainer comment={comment} />
</>
)}
<Timestamp>{comment.createdAt}</Timestamp>
{comment.editing.edited && (
<Localized id="reports-singleReport-comment-edited">
<span className={styles.edited}>(edited)</span>
</Localized>
)}
</Flex>
{inReplyTo && inReplyTo.username && (
<InReplyTo
className={styles.reportUsername}
onUsernameClick={() => onShowUserDrawer(inReplyTo.id)}
>
{inReplyTo.username}
</InReplyTo>
)}
{comment.deleted ? (
<Localized id="reports-singleReport-comment-deleted">
<div className={styles.data}>
This comment is no longer available. The commenter has
deleted their account.
</div>
{comment.rating && (
</Localized>
) : (
<>
<Flex className={styles.commentBox}>
<div>
<StarRating rating={comment.rating} />
</div>
)}
<div>
<div>
<CommentContent className={styles.commentContent}>
{comment.body || ""}
</CommentContent>
<MediaContainer comment={comment} />
</div>
</div>
<div>
<HorizontalGutter spacing={3}>
<div>
<Flex alignItems="center">
{comment.author?.username && (
<>
<UsernameButton
className={styles.commentUsernameButton}
username={comment.author.username}
onClick={() =>
onShowUserDrawer(comment.author?.id)
}
/>
<CommentAuthorContainer comment={comment} />
</>
)}
<Timestamp>{comment.createdAt}</Timestamp>
{comment.editing.edited && (
<Localized id="reports-singleReport-comment-edited">
<span className={styles.edited}>(edited)</span>
</Localized>
)}
</Flex>
{inReplyTo && inReplyTo.username && (
<InReplyTo
className={styles.reportUsername}
onUsernameClick={() =>
onShowUserDrawer(inReplyTo.id)
}
>
{inReplyTo.username}
</InReplyTo>
)}
</div>
{comment.rating && (
<div>
<Localized id="reports-singleReport-commentOn">
<span className={styles.label}>Comment on</span>
</Localized>
<span>:</span>
<StarRating rating={comment.rating} />
</div>
)}
<div>
<div>
<span className={styles.storyTitle}>
{comment.story?.metadata?.title ?? <NotAvailable />}
</span>
<CommentContent className={styles.commentContent}>
{comment.body || ""}
</CommentContent>
<MediaContainer comment={comment} />
</div>
</div>
</HorizontalGutter>
</div>
</div>
</Flex>
<Flex>
<Flex marginTop={2} marginRight={3}>
<Localized id="reports-singleReport-comment-viewCommentStream">
<Button
variant="text"
uppercase={false}
color="mono"
to={getURLWithCommentID(comment.story.url, comment.id)}
target="_blank"
>
View comment in stream
</Button>
</Localized>
</Flex>
<Flex marginTop={2}>
<Localized id="reports-singleReport-comment-viewCommentModeration">
<Button
variant="text"
uppercase={false}
color="mono"
target="_blank"
to={getModerationLink({
commentID: comment.id,
})}
>
View comment in moderation
</Button>
</Localized>
</Flex>
</Flex>
<div>
<HorizontalGutter spacing={3}>
<div>
<div>
<Localized id="reports-singleReport-commentOn">
<span className={styles.label}>Comment on</span>
</Localized>
<span>:</span>
</div>
<div>
<span className={styles.storyTitle}>
{comment.story?.metadata?.title ?? (
<NotAvailable />
)}
</span>
</div>
</div>
</HorizontalGutter>
</div>
</div>
</Flex>
<Flex>
<Flex marginTop={2} marginRight={3}>
<Localized id="reports-singleReport-comment-viewCommentStream">
<Button
variant="text"
uppercase={false}
color="mono"
to={getURLWithCommentID(
comment.story.url,
comment.id
)}
target="_blank"
>
View comment in stream
</Button>
</Localized>
</Flex>
<Flex marginTop={2}>
<Localized id="reports-singleReport-comment-viewCommentModeration">
<Button
variant="text"
uppercase={false}
color="mono"
target="_blank"
to={getModerationLink({
commentID: comment.id,
})}
>
View comment in moderation
</Button>
</Localized>
</Flex>
</Flex>
</>
)}
</>
)}
</>
Expand Down
13 changes: 10 additions & 3 deletions client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,9 @@ const SingleReportRoute: FunctionComponent<Props> & {
/>
<Localized
id="reports-singleReport-makeDecisionButton"
elems={{ icon: <SvgIcon filled Icon={LegalHammerIcon} /> }}
elems={{
icon: <SvgIcon filled="currentColor" Icon={LegalHammerIcon} />,
}}
>
<Button
className={styles.decisionButton}
Expand All @@ -156,7 +158,7 @@ const SingleReportRoute: FunctionComponent<Props> & {
dsaReport.status === "COMPLETED" || dsaReport.status === "VOID"
}
>
<SvgIcon filled Icon={LegalHammerIcon} />
<SvgIcon filled="currentColor" Icon={LegalHammerIcon} />
Decision
</Button>
</Localized>
Expand Down Expand Up @@ -245,7 +247,12 @@ const SingleReportRoute: FunctionComponent<Props> & {
<Localized
id="reports-singleReport-decisionLabel"
elems={{
icon: <SvgIcon Icon={LegalHammerIcon} filled />,
icon: (
<SvgIcon
Icon={LegalHammerIcon}
filled="currentColor"
/>
),
}}
>
<div className={styles.label}>
Expand Down
2 changes: 1 addition & 1 deletion client/src/core/client/admin/routes/Stories/StoryRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const UserRow: FunctionComponent<Props> = (props) => (
{
<ButtonSvgIcon
size="xs"
filled
filled="currentColor"
Icon={NavigationMenuHorizontalIcon}
/>
}
Expand Down
2 changes: 1 addition & 1 deletion client/src/core/client/stream/tabs/Comments/Comment/FeaturedTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface Props {

const FeaturedTag: FunctionComponent<Props> = ({ collapsed }) => {
return collapsed ? (
<SvgIcon color="stream" filled Icon={RatingStarIcon} />
<SvgIcon color="stream" filled="currentColor" Icon={RatingStarIcon} />
) : (
<div>
<Tag
Expand Down
Loading

0 comments on commit beb9bf2

Please sign in to comment.