From 707161380ff87a18ce6ba732e303a25104a067c9 Mon Sep 17 00:00:00 2001 From: Keane Chan Date: Thu, 20 Oct 2022 20:47:46 +0800 Subject: [PATCH] [resumes][feat] fix resume badge UI (#400) * [resumes][feat] update badge icon * [resumes][refactor] update resume badge names * [resumes][refactor] update to title * [resumes][fix] disable horizontal scroll in comments --- ...eIcon.tsx => ResumeBadgeDetectiveIcon.tsx} | 2 +- ...BadgeIcon.tsx => ResumeBadgeEagleIcon.tsx} | 2 +- ...eIcon.tsx => ResumeBadgeSuperheroIcon.tsx} | 2 +- .../resumes/badges/ResumeUserBadge.tsx | 25 +++++----- .../resumes/badges/ResumeUserBadges.tsx | 6 +-- .../resumes/badges/resumeBadgeConstants.ts | 48 +++++++++---------- .../resumes/comments/ResumeCommentsList.tsx | 2 +- 7 files changed, 43 insertions(+), 44 deletions(-) rename apps/portal/src/components/resumes/badgeIcons/reviewer/{SilverReviewerBadgeIcon.tsx => ResumeBadgeDetectiveIcon.tsx} (98%) rename apps/portal/src/components/resumes/badgeIcons/reviewer/{BronzeReviewerBadgeIcon.tsx => ResumeBadgeEagleIcon.tsx} (94%) rename apps/portal/src/components/resumes/badgeIcons/reviewer/{GoldReviewerBadgeIcon.tsx => ResumeBadgeSuperheroIcon.tsx} (97%) diff --git a/apps/portal/src/components/resumes/badgeIcons/reviewer/SilverReviewerBadgeIcon.tsx b/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx similarity index 98% rename from apps/portal/src/components/resumes/badgeIcons/reviewer/SilverReviewerBadgeIcon.tsx rename to apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx index 09fa53bf..bf9319f1 100644 --- a/apps/portal/src/components/resumes/badgeIcons/reviewer/SilverReviewerBadgeIcon.tsx +++ b/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx @@ -2,7 +2,7 @@ type Props = Readonly<{ className: string; }>; -export default function SilverReviewerBadgeIcon({ className }: Props) { +export default function ResumeBadgeDetectiveIcon({ className }: Props) { return (
+
- -

{toolTip}

+ className="absolute -top-0 hidden w-64 -translate-y-full flex-col + justify-center gap-1 rounded-lg bg-slate-100 px-2 py-2 text-center drop-shadow-xl + after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 + after:border-8 after:border-x-transparent after:border-b-transparent + after:border-t-slate-100 after:drop-shadow-lg after:content-[''] + group-hover:flex"> + +

{title}

{description}

- +
); } diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx index 8c772d8f..0e621599 100644 --- a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx +++ b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx @@ -20,17 +20,17 @@ export default function ResumeUserBadges({ userId }: Props) { }; return ( - <> +
{RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map( (badge) => ( ), )} - +
); } diff --git a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts index 92086204..0c806437 100644 --- a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts +++ b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts @@ -1,12 +1,12 @@ -import BronzeReviewerBadgeIcon from '../badgeIcons/reviewer/BronzeReviewerBadgeIcon'; -import GoldReviewerBadgeIcon from '../badgeIcons/reviewer/GoldReviewerBadgeIcon'; -import SilverReviewerBadgeIcon from '../badgeIcons/reviewer/SilverReviewerBadgeIcon'; +import ResumeBadgeDetectiveIcon from '../badgeIcons/reviewer/ResumeBadgeDetectiveIcon'; +import ResumeBadgeEagleIcon from '../badgeIcons/reviewer/ResumeBadgeEagleIcon'; +import ResumeBadgeSuperheroIcon from '../badgeIcons/reviewer/ResumeBadgeSuperheroIcon'; export type BadgeIcon = ( props: React.ComponentProps< - | typeof BronzeReviewerBadgeIcon - | typeof GoldReviewerBadgeIcon - | typeof SilverReviewerBadgeIcon + | typeof ResumeBadgeDetectiveIcon + | typeof ResumeBadgeEagleIcon + | typeof ResumeBadgeSuperheroIcon >, ) => JSX.Element; @@ -15,7 +15,7 @@ export type BadgeInfo = { icon: BadgeIcon; id: string; isValid: (payload: BadgePayload) => boolean; - toolTip: string; + title: string; }; // TODO: Add other badges in @@ -23,35 +23,35 @@ export type BadgePayload = { reviewedResumesCount: number; }; -const GOLD_TIER = 20; -const SILVER_TIER = 10; -const BRONZE_TIER = 5; +const TIER_THREE = 20; +const TIER_TWO = 10; +const TIER_ONE = 5; export const RESUME_USER_BADGES: Array = [ { - description: `User has reviewed over ${GOLD_TIER} resumes`, - icon: GoldReviewerBadgeIcon, + description: `Reviewed over ${TIER_ONE} resumes`, + icon: ResumeBadgeSuperheroIcon, id: 'Superhero', isValid: (payload: BadgePayload) => - payload.reviewedResumesCount >= GOLD_TIER, - toolTip: 'True saviour of the people', + payload.reviewedResumesCount >= TIER_THREE, + title: 'True saviour of the people', }, { - description: `User has reviewed over ${SILVER_TIER} resumes`, - icon: SilverReviewerBadgeIcon, + description: `Reviewed over ${TIER_TWO} resumes`, + icon: ResumeBadgeDetectiveIcon, id: 'Detective', isValid: (payload: BadgePayload) => - payload.reviewedResumesCount >= SILVER_TIER && - payload.reviewedResumesCount < GOLD_TIER, - toolTip: 'Keen eye for details like a private eye', + payload.reviewedResumesCount >= TIER_TWO && + payload.reviewedResumesCount < TIER_THREE, + title: 'Keen eye for details like a private eye', }, { - description: `User has reviewed over ${BRONZE_TIER} resumes`, - icon: BronzeReviewerBadgeIcon, + description: `Reviewed over ${TIER_THREE} resumes`, + icon: ResumeBadgeEagleIcon, id: 'Eagle', isValid: (payload: BadgePayload) => - payload.reviewedResumesCount >= BRONZE_TIER && - payload.reviewedResumesCount < SILVER_TIER, - toolTip: 'As sharp as an eagle', + payload.reviewedResumesCount >= TIER_ONE && + payload.reviewedResumesCount < TIER_TWO, + title: 'As sharp as an eagle', }, ]; diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx index 677678e6..2fe23335 100644 --- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx +++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx @@ -73,7 +73,7 @@ export default function ResumeCommentsList({
) : ( -
+
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => { const comments = commentsQuery.data ? commentsQuery.data.filter((comment: ResumeComment) => {