feat(FE-314-315): API Integration project budgets and refactoring UI

src/components/FloatingActionsButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
@@ -50,7 +51,7 @@ const FloatingActionsButton = ({
     <div
       className={cn(
         `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
-        'mx-auto w-full max-w-xl sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
+        'mx-auto w-full max-w-lg sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
         'bg-slate-950 backdrop-blur-md'
       )}
     >
@@ -72,14 +73,15 @@ const FloatingActionsButton = ({
                       key={index}
                       onClick={action.onClick}
                       className='text-white hover:text-gray-400 tooltip tooltip-bottom'
-                      data-tip={action.label}
                     >
-                      <Icon
-                        icon={action.icon}
-                        width={24}
-                        height={24}
-                        className={`text-${getActionColor(action.action)} font-thin`}
-                      />
+                      <Tooltip content={action.label || action.action}>
+                        <Icon
+                          icon={action.icon}
+                          width={20}
+                          height={20}
+                          className={`text-${getActionColor(action.action)} font-thin`}
+                        />
+                      </Tooltip>
                     </button>
                   );
                 })}
@@ -91,7 +93,9 @@ const FloatingActionsButton = ({
                 onClick={onClose}
                 className='text-white hover:text-gray-400'
               >
-                <Icon icon='mdi:close' width={24} height={24} />
+                <Tooltip content='Close'>
+                  <Icon icon='mdi:close' width={20} height={20} />
+                </Tooltip>
               </button>
             </div>
           </div>