Form improvements & ui cleanup

src/components/generic/IconButton.tsx

@@ -4,17 +4,27 @@ type DefaulButtonProps = JSX.IntrinsicElements['button'];
 
 export interface IconButtonProps extends DefaulButtonProps {
   icon: React.ReactNode;
+  active?: boolean;
 }
 
 export const IconButton = ({
   icon,
+  active,
+  disabled,
   ...props
 }: IconButtonProps): JSX.Element => {
   return (
     <div className="my-auto text-gray-500 dark:text-gray-400">
       <button
         type="button"
-        className="p-2 transition duration-200 ease-in-out rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
+        disabled={disabled}
+        className={`p-2 transition duration-200 ease-in-out rounded-md active:scale-95 ${
+          active
+            ? 'bg-gray-200 dark:bg-gray-600'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
+        } ${
+          disabled ? 'text-gray-400 dark:text-gray-700 cursor-not-allowed' : ''
+        }`}
         {...props}
       >
         {icon}