From 4de0a1f681d8ed8bfe073a3ffcc3f010d3f71d25 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:56:14 +0800
Subject: [PATCH] [resumes][feat] improve badge UI

---
 .../resumes/badges/ResumeUserBadge.tsx           | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index adf647a2..5f45adbb 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -14,18 +14,20 @@ export default function ResumeUserBadge({
   return (
     <div className="group relative flex items-center justify-center">
       <div
-        className="absolute left-6 z-10 hidden w-48 flex-col
-        justify-center gap-1 rounded-xl bg-white px-2 py-2 text-center drop-shadow-lg
+        className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
+        gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
 
-        before:absolute before:top-12 before:-translate-x-6
+        before:absolute before:top-14 before:-translate-x-4
         before:border-8 before:border-y-transparent before:border-l-transparent
         before:border-r-white before:drop-shadow-lg before:content-['']
         group-hover:flex">
-        <Icon className="h-12 w-12 self-center" />
-        <p className="font-medium">{title}</p>
-        <p className="text-sm">{description}.</p>
+        <Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
+        <div className="px-2">
+          <p className="font-medium">{title}</p>
+          <p className="text-sm">{description}.</p>
+        </div>
       </div>
-      <Icon className="h-4 w-4" />
+      <Icon className="h-5 w-5 rounded-xl border bg-slate-200 shadow-sm" />
     </div>
   );
 }