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   ## 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:
@ -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,
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user