From 0614a7ecf4380ed229065f776771b63779feacbd Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Sun, 30 Oct 2022 10:18:29 +0800
Subject: [PATCH] [resumes][feat] update filter count colour

---
 apps/portal/src/pages/resumes/index.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index bae25c3f..444068a0 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -427,12 +427,9 @@ export default function ResumeHomePage() {
                                 {filter.options.map((option) => (
                                   <div
                                     key={option.value}
-                                    className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
+                                    className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 flex items-center px-1 text-sm [&>div>div:nth-child(2)>label]:font-normal">
                                     <CheckboxInput
-                                      label={`${option.label} (${getFilterCount(
-                                        filter.label,
-                                        option.label,
-                                      )})`}
+                                      label={option.label}
                                       value={userFilters[filter.id].includes(
                                         option.value,
                                       )}
@@ -444,6 +441,14 @@ export default function ResumeHomePage() {
                                         )
                                       }
                                     />
+                                    <span className="ml-1 text-slate-500">
+                                      (
+                                      {getFilterCount(
+                                        filter.label,
+                                        option.label,
+                                      )}
+                                      )
+                                    </span>
                                   </div>
                                 ))}
                               </div>
@@ -527,12 +532,9 @@ export default function ResumeHomePage() {
                             {filter.options.map((option) => (
                               <div
                                 key={option.value}
-                                className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 px-1 [&>div>div:nth-child(2)>label]:font-normal">
+                                className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 flex items-center px-1 text-sm [&>div>div:nth-child(2)>label]:font-normal">
                                 <CheckboxInput
-                                  label={`${option.label} (${getFilterCount(
-                                    filter.label,
-                                    option.label,
-                                  )})`}
+                                  label={option.label}
                                   value={userFilters[filter.id].includes(
                                     option.value,
                                   )}
@@ -544,6 +546,9 @@ export default function ResumeHomePage() {
                                     )
                                   }
                                 />
+                                <span className="ml-1 text-slate-500">
+                                  ({getFilterCount(filter.label, option.label)})
+                                </span>
                               </div>
                             ))}
                           </CheckboxList>