From f6aa4e007ff46ce2bac5101acf6818442f17f7d2 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Thu, 20 Oct 2022 19:18:02 +0800
Subject: [PATCH] [resumes][feat] update badge icon

---
 .../resumes/badges/ResumeUserBadge.tsx        | 21 +++++++++----------
 .../resumes/badges/ResumeUserBadges.tsx       |  4 ++--
 .../resumes/badges/resumeBadgeConstants.ts    |  6 +++---
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index 3843747a..3908aef6 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -12,20 +12,19 @@ export default function ResumeUserBadge({
   toolTip,
 }: 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
-        rounded-lg bg-slate-50 px-2 py-2 text-center shadow-md
-       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-50
-       after:content-['']
-       group-hover:flex">
-        <Icon className="text-center" />
-        <p className="text-lg font-medium">{toolTip}</p>
+        className="absolute -top-0 hidden w-64 -translate-y-full flex-col justify-center
+        gap-1 rounded-lg bg-white 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-white after:drop-shadow-lg
+       after:content-[''] group-hover:flex">
+        <Icon className="self-center" />
+        <p className="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>
   );
 }
diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
index 8c772d8f..d9337fae 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
@@ -20,7 +20,7 @@ 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
@@ -31,6 +31,6 @@ export default function ResumeUserBadges({ userId }: Props) {
           />
         ),
       )}
-    </>
+    </div>
   );
 }
diff --git a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
index 92086204..79bf8a76 100644
--- a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
+++ b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
@@ -29,7 +29,7 @@ const BRONZE_TIER = 5;
 
 export const RESUME_USER_BADGES: Array<BadgeInfo> = [
   {
-    description: `User has reviewed over ${GOLD_TIER} resumes`,
+    description: `Reviewed over ${GOLD_TIER} resumes`,
     icon: GoldReviewerBadgeIcon,
     id: 'Superhero',
     isValid: (payload: BadgePayload) =>
@@ -37,7 +37,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
     toolTip: 'True saviour of the people',
   },
   {
-    description: `User has reviewed over ${SILVER_TIER} resumes`,
+    description: `Reviewed over ${SILVER_TIER} resumes`,
     icon: SilverReviewerBadgeIcon,
     id: 'Detective',
     isValid: (payload: BadgePayload) =>
@@ -46,7 +46,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
     toolTip: 'Keen eye for details like a private eye',
   },
   {
-    description: `User has reviewed over ${BRONZE_TIER} resumes`,
+    description: `Reviewed over ${BRONZE_TIER} resumes`,
     icon: BronzeReviewerBadgeIcon,
     id: 'Eagle',
     isValid: (payload: BadgePayload) =>