admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

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