Table visual fixes (#5693)

CHANGELOG.md

@@ -37,7 +37,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 ### Fixed
 - Updating mongodb connectors so it can support usernames and password with URL encoded characters [#5682](https://github.com/ethyca/fides/pull/5682)
 - After creating a new system, the url is now updated correctly to the new system edit page [#5701](https://github.com/ethyca/fides/pull/5701)
-
+- Visual fixes for table header buttons [#5693](https://github.com/ethyca/fides/pull/5693)
 
 ## [2.53.0](https://github.com/ethyca/fides/compare/2.52.0...2.53.0)
 

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredAssetsColumns.tsx

@@ -30,7 +30,7 @@ export const useDiscoveredAssetsColumns = () => {
           dataTestId="select-all-rows"
         />
       ),
-      maxSize: 25,
+      maxSize: 40,
     }),
     columnHelper.accessor((row) => row.name, {
       id: "name",

clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx

@@ -101,7 +101,7 @@ const useDiscoveryResultColumns = ({
             dataTestId="select-all-rows"
           />
         ),
-        maxSize: 25,
+        maxSize: 40,
       }),
       columnHelper.accessor((row) => row.name, {
         id: "tables",

clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryFieldBulkActions.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, Flex, ViewOffIcon } from "fidesui";
+import { AntFlex as Flex, CheckIcon, ViewOffIcon } from "fidesui";
 
 import ActionButton from "~/features/data-discovery-and-detection/ActionButton";
 import {
@@ -31,12 +31,7 @@ const DiscoveryFieldBulkActions = ({
   };
 
   return (
-    <Flex
-      direction="row"
-      align="center"
-      justify="center"
-      data-testid="bulk-actions-menu"
-    >
+    <Flex data-testid="bulk-actions-menu">
       <div className="flex gap-2">
         <ActionButton
           title="Confirm all"
@@ -45,13 +40,15 @@ const DiscoveryFieldBulkActions = ({
           disabled={anyActionIsLoading}
           loading={isPromoteLoading}
           type="primary"
+          size="middle"
         />
         <ActionButton
           title="Ignore all"
           icon={<ViewOffIcon />}
           onClick={() => handleIgnoreClicked([resourceUrn])}
           disabled={anyActionIsLoading}
           loading={isMuteLoading}
+          size="middle"
         />
       </div>
     </Flex>

clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryTableBulkActions.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, Flex, Text, ViewOffIcon } from "fidesui";
+import { AntFlex as Flex, CheckIcon, Text, ViewOffIcon } from "fidesui";
 
 import ActionButton from "~/features/data-discovery-and-detection/ActionButton";
 import {
@@ -35,19 +35,14 @@ const DiscoveryTableBulkActions = ({
   }
 
   return (
-    <Flex
-      direction="row"
-      align="center"
-      justify="center"
-      data-testid="bulk-actions-menu"
-    >
+    <Flex className="items-center" data-testid="bulk-actions-menu">
       <Text
         fontSize="xs"
         fontWeight="semibold"
         minW={16}
-        mr={6}
+        mr={4}
       >{`${selectedUrns.length} selected`}</Text>
-      <div>
+      <Flex className="gap-2">
         <ActionButton
           title="Confirm"
           icon={<CheckIcon />}
@@ -65,7 +60,7 @@ const DiscoveryTableBulkActions = ({
           onClick={() => handleIgnoreClicked(selectedUrns)}
           size="middle"
         />
-      </div>
+      </Flex>
     </Flex>
   );
 };