From d7cda0f1c15f0684bff20de43ab0c8736ea5a282 Mon Sep 17 00:00:00 2001
From: Samyak Piya <76403666+samyakpiya@users.noreply.github.com>
Date: Fri, 27 Dec 2024 09:57:19 -0500
Subject: [PATCH] fix(spreadsheet-import): add background and border styles to
 DropdownMenu in`MatchColumnSelect`  (#9255)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../components/MatchColumnSelect.tsx                  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
index 8a4337dc1..fc58723ea 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
@@ -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,
         )}