Tab fixes

src/components/generic/button/IconButton.tsx

@@ -24,29 +24,27 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <Tooltip disabled={!tooltip} content={tooltip}>
-      <m.div
-        whileHover={{ scale: 1.01 }}
-        whileTap={{ scale: 0.97 }}
-        className="my-auto text-gray-500 dark:text-gray-400"
+      <button
+        type="button"
+        disabled={disabled}
+        className={`rounded-md p-2 hover:bg-gray-300 ${
+          active ? 'bg-gray-300 dark:bg-secondaryDark' : ''
+        } ${
+          nested ? 'dark:hover:bg-primaryDark' : 'dark:hover:bg-secondaryDark'
+        } ${
+          disabled ? 'cursor-not-allowed text-gray-400 dark:text-gray-700' : ''
+        } ${className ?? ''}`}
+        {...props}
       >
-        <button
-          type="button"
-          disabled={disabled}
-          className={`rounded-md p-2 hover:bg-gray-200 ${
-            active ? 'bg-gray-200 dark:bg-secondaryDark' : ''
-          } ${
-            nested ? 'dark:hover:bg-primaryDark' : 'dark:hover:bg-secondaryDark'
-          } ${
-            disabled
-              ? 'cursor-not-allowed text-gray-400 dark:text-gray-700'
-              : ''
-          } ${className ?? ''}`}
-          {...props}
+        <m.div
+          whileHover={{ scale: 1.01 }}
+          whileTap={{ scale: 0.95 }}
+          className="my-auto text-gray-600 dark:text-gray-400"
         >
           {icon}
-          <span className="sr-only">Refresh</span>
-        </button>
-      </m.div>
+        </m.div>
+        <span className="sr-only">Refresh</span>
+      </button>
     </Tooltip>
   );
 };