Merge 3c28358 into 9371f6f

CHANGELOG.md

@@ -24,6 +24,9 @@ The types of changes are:
 ### Fixed
 - Fixing quickstart.py script [#5585](https://github.com/ethyca/fides/pull/5585)
 
+### Changed
+- Adjusted Ant's Select component colors and icon [#5594](https://github.com/ethyca/fides/pull/5594)
+
 ## [2.51.1](https://github.com/ethyca/fides/compare/2.51.0...2.51.1)
 
 ### Fixed

clients/admin-ui/src/theme/ant.ts

@@ -51,7 +51,7 @@ export const antTheme: AntThemeConfig = {
       bodyBg: palette.FIDESUI_NEUTRAL_50,
     },
     Select: {
-      optionActiveBg: palette.FIDESUI_SANDSTONE,
+      optionActiveBg: palette.FIDESUI_NEUTRAL_50,
     },
     Tooltip: {
       colorBgSpotlight: palette.FIDESUI_MINOS,

clients/fidesui/src/hoc/CustomSelect.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown } from "@carbon/icons-react";
+import { Checkmark, ChevronDown } from "@carbon/icons-react";
 import { Flex, Select, SelectProps, Typography } from "antd/lib";
 import { BaseOptionType, DefaultOptionType } from "antd/lib/select";
 import React from "react";
@@ -37,13 +37,15 @@ const withCustomProps = (WrappedComponent: typeof Select) => {
     optionRender = optionDescriptionRender,
     className = "w-full",
     suffixIcon = <ChevronDown />,
+    menuItemSelectedIcon = <Checkmark />,
     ...props
   }: SelectProps<ValueType, OptionType>) => {
     const customProps = {
       placeholder,
       optionRender,
       className,
       suffixIcon,
+      menuItemSelectedIcon,
       "data-testid": `select${props.id ? `-${props.id}` : ""}`,
       ...props,
     };