fix(FE): refactor UI Dashboard pixel perfect figma

src/components/helper/ButtonFilter.tsx

@@ -9,15 +9,21 @@ export type ButtonFilterProps = ButtonProps & {
   onClick: () => void;
 };
 
+// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
+
 const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
   return (
     <Button
       {...props}
       onClick={onClick}
+      variant='outline'
+      color='none'
       className={cn(
+        'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+        'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
         getFilledFormikValuesCount(values) > 0
-          ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-          : '',
+          ? 'border-primary-gradient !rounded-[8px]'
+          : '!rounded-[8px]',
         props.className
       )}
     >
@@ -31,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       />
       Filter
       {getFilledFormikValuesCount(values) > 0 && (
-        <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
+        <span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
           {getFilledFormikValuesCount(values)}
         </span>
       )}