From 1f5ee1ee3ff3423be5648651c85ea0871f65c55b Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 30 Sep 2024 17:23:52 +0200
Subject: [PATCH] chore: tweak styles

---
 .../table/data-table-filter-custom.tsx        |  4 +++-
 .../ui/custom/custom-dropdown-filter.tsx      | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/providers/table/data-table-filter-custom.tsx b/components/providers/table/data-table-filter-custom.tsx
index afb0b3f4ef..04e6df67f2 100644
--- a/components/providers/table/data-table-filter-custom.tsx
+++ b/components/providers/table/data-table-filter-custom.tsx
@@ -46,7 +46,9 @@ export const DataTableFilterCustom = ({
         startContent={<CustomFilterIcon size={16} />}
         onPress={() => setShowFilters(!showFilters)}
       >
-        {showFilters ? "Hide Filters" : "Show Filters"}
+        <h3 className="text-small">
+          {showFilters ? "Hide Filters" : "Show Filters"}
+        </h3>
       </CustomButton>
 
       <div
diff --git a/components/ui/custom/custom-dropdown-filter.tsx b/components/ui/custom/custom-dropdown-filter.tsx
index f8d9d82b96..59f211c0e6 100644
--- a/components/ui/custom/custom-dropdown-filter.tsx
+++ b/components/ui/custom/custom-dropdown-filter.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+const _ = require("lodash");
 import {
   Badge,
   Button,
@@ -90,7 +90,7 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
   }, [groupSelected, allFilterKeys]);
   return (
     <div className="flex w-full max-w-xs flex-col gap-2">
-      <Popover placement="bottom">
+      <Popover backdrop="opaque" placement="bottom">
         <PopoverTrigger>
           <Button
             className="bg-default-100 text-default-800"
@@ -99,7 +99,8 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
             }
             size="sm"
           >
-            {filter?.labelCheckboxGroup}
+            <h3 className="text-small">{filter?.labelCheckboxGroup}</h3>
+
             {groupSelected.size > 0 && (
               <>
                 <Divider orientation="vertical" className="mx-2 h-4" />
@@ -136,18 +137,24 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-80">
-          <div className="flex w-full flex-col gap-6 px-2 py-4">
+          <div className="flex w-full flex-col gap-6 p-2">
             <CheckboxGroup
+              color="default"
               label={filter?.labelCheckboxGroup}
               value={Array.from(groupSelected)}
               onValueChange={onSelectionChange}
+              className="text-small font-bold"
             >
-              <Checkbox value="all" onValueChange={handleSelectAllClick}>
+              <Checkbox
+                className="font-normal"
+                value="all"
+                onValueChange={handleSelectAllClick}
+              >
                 Select All
               </Checkbox>
               {allFilterKeys.map((value) => (
-                <Checkbox key={value} value={value}>
-                  {value}
+                <Checkbox className="font-normal" key={value} value={value}>
+                  {_.capitalize(value)}
                 </Checkbox>
               ))}
             </CheckboxGroup>