[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

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 (
     <svg
       aria-hidden="true"

apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeEagleIcon.tsx

@@ -2,7 +2,7 @@ type Props = Readonly<{
   className: string;
 }>;
 
-export default function BronzeReviewerBadgeIcon({ className }: Props) {
+export default function ResumeBadgeEagleIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"

apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeSuperheroIcon.tsx

@@ -2,7 +2,7 @@ type Props = Readonly<{
   className: string;
 }>;
 
-export default function GoldReviewerBadgeIcon({ className }: Props) {
+export default function ResumeBadgeSuperheroIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"

apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx

@@ -3,29 +3,28 @@ import type { BadgeIcon } from './resumeBadgeConstants';
 type Props = Readonly<{
   description: string;
   icon: BadgeIcon;
-  toolTip: string;
+  title: string;
 }>;
 
 export default function ResumeUserBadge({
   description,
   icon: Icon,
-  toolTip,
+  title,
 }: Props) {
   return (
-    <div className="group">
+    <div className="group flex items-center justify-center">
       <div
-        className="absolute left-16 -top-1 hidden w-64 -translate-y-full flex-col justify-center
+        className="absolute -top-0 hidden w-64 -translate-y-full flex-col
-        rounded-lg bg-slate-50 px-2 py-2 text-center shadow-md
+        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:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2
-       after:-translate-x-1/2 after:border-8 after:border-x-transparent
+        after:border-8 after:border-x-transparent after:border-b-transparent
-       after:border-b-transparent after:border-t-slate-50
+       after:border-t-slate-100 after:drop-shadow-lg after:content-['']
-       after:content-['']
+        group-hover:flex">
-       group-hover:flex">
+        <Icon className="self-center" />
-        <Icon className="text-center" />
+        <p className="font-medium">{title}</p>
-        <p className="text-lg font-medium">{toolTip}</p>
         <p className="text-sm font-light">{description}</p>
       </div>
-      <Icon className="h-3 w-3" />
+      <Icon className="h-4 w-4" />
     </div>
   );
 }

apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx

@@ -20,17 +20,17 @@ export default function ResumeUserBadges({ userId }: Props) {
   };
 
   return (
-    <>
+    <div className="flex items-center justify-center gap-1">
       {RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map(
         (badge) => (
           <ResumeUserBadge
             key={badge.id}
             description={badge.description}
             icon={badge.icon}
-            toolTip={badge.toolTip}
+            title={badge.title}
           />
         ),
       )}
-    </>
+    </div>
   );
 }

apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts

@@ -1,12 +1,12 @@
-import BronzeReviewerBadgeIcon from '../badgeIcons/reviewer/BronzeReviewerBadgeIcon';
+import ResumeBadgeDetectiveIcon from '../badgeIcons/reviewer/ResumeBadgeDetectiveIcon';
-import GoldReviewerBadgeIcon from '../badgeIcons/reviewer/GoldReviewerBadgeIcon';
+import ResumeBadgeEagleIcon from '../badgeIcons/reviewer/ResumeBadgeEagleIcon';
-import SilverReviewerBadgeIcon from '../badgeIcons/reviewer/SilverReviewerBadgeIcon';
+import ResumeBadgeSuperheroIcon from '../badgeIcons/reviewer/ResumeBadgeSuperheroIcon';
 
 export type BadgeIcon = (
   props: React.ComponentProps<
-    | typeof BronzeReviewerBadgeIcon
+    | typeof ResumeBadgeDetectiveIcon
-    | typeof GoldReviewerBadgeIcon
+    | typeof ResumeBadgeEagleIcon
-    | typeof SilverReviewerBadgeIcon
+    | 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 TIER_THREE = 20;
-const SILVER_TIER = 10;
+const TIER_TWO = 10;
-const BRONZE_TIER = 5;
+const TIER_ONE = 5;
 
 export const RESUME_USER_BADGES: Array<BadgeInfo> = [
   {
-    description: `User has reviewed over ${GOLD_TIER} resumes`,
+    description: `Reviewed over ${TIER_ONE} resumes`,
-    icon: GoldReviewerBadgeIcon,
+    icon: ResumeBadgeSuperheroIcon,
     id: 'Superhero',
     isValid: (payload: BadgePayload) =>
-      payload.reviewedResumesCount >= GOLD_TIER,
+      payload.reviewedResumesCount >= TIER_THREE,
-    toolTip: 'True saviour of the people',
+    title: 'True saviour of the people',
   },
   {
-    description: `User has reviewed over ${SILVER_TIER} resumes`,
+    description: `Reviewed over ${TIER_TWO} resumes`,
-    icon: SilverReviewerBadgeIcon,
+    icon: ResumeBadgeDetectiveIcon,
     id: 'Detective',
     isValid: (payload: BadgePayload) =>
-      payload.reviewedResumesCount >= SILVER_TIER &&
+      payload.reviewedResumesCount >= TIER_TWO &&
-      payload.reviewedResumesCount < GOLD_TIER,
+      payload.reviewedResumesCount < TIER_THREE,
-    toolTip: 'Keen eye for details like a private eye',
+    title: 'Keen eye for details like a private eye',
   },
   {
-    description: `User has reviewed over ${BRONZE_TIER} resumes`,
+    description: `Reviewed over ${TIER_THREE} resumes`,
-    icon: BronzeReviewerBadgeIcon,
+    icon: ResumeBadgeEagleIcon,
     id: 'Eagle',
     isValid: (payload: BadgePayload) =>
-      payload.reviewedResumesCount >= BRONZE_TIER &&
+      payload.reviewedResumesCount >= TIER_ONE &&
-      payload.reviewedResumesCount < SILVER_TIER,
+      payload.reviewedResumesCount < TIER_TWO,
-    toolTip: 'As sharp as an eagle',
+    title: 'As sharp as an eagle',
   },
 ];

apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx

@@ -73,7 +73,7 @@ export default function ResumeCommentsList({
           <Spinner display="block" size="lg" />
         </div>
       ) : (
-        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto">
+        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden">
           {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
             const comments = commentsQuery.data
               ? commentsQuery.data.filter((comment: ResumeComment) => {