fix(spreadsheet-import): add background and border styles to DropdownMenu inMatchColumnSelect (#9255)

Fixes #9245 - CSV import column selection dropdown was missing
background styles, making it difficult to read the options.

## Changes
- Add styled component for DropdownMenu with background color
- Include border and box shadow styles

## Screenshots
![Screenshot 2024-12-26 at 8 02
22 PM](https://github.com/user-attachments/assets/adb4c114-b819-4655-b628-9ad989593ffa)
![Screenshot 2024-12-26 at 8 03
58 PM](https://github.com/user-attachments/assets/76d7e3c1-9c51-48f2-85b3-1f81c61f9943)

## Testing

- [x] Verify column selection dropdown has proper background color
- [x] Confirm dropdown options are clearly visible
- [x] Check that dropdown appears above other elements correctly
This commit is contained in:
Samyak Piya
2024-12-27 09:57:19 -05:00
committed by GitHub
parent a8bb3e6bdf
commit d7cda0f1c1

View File

@ -25,6 +25,13 @@ const StyledFloatingDropdown = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
const StyledDropdownMenu = styled(DropdownMenu)`
background-color: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.light};
`;
interface MatchColumnSelectProps {
onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
value?: ReadonlyDeep<SelectOption>;
@ -121,7 +128,7 @@ export const MatchColumnSelect = ({
{isOpen &&
createPortal(
<StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<DropdownMenu
<StyledDropdownMenu
data-select-disable
ref={dropdownContainerRef}
// width={refs.domReference.current?.clientWidth}
@ -162,7 +169,7 @@ export const MatchColumnSelect = ({
<MenuItem key="No result" text="No result" />
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</StyledDropdownMenu>
</StyledFloatingDropdown>,
document.body,
)}