Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Make DropdownMenuSeparator background transparent based on theme #9037

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

muraliSingh7
Copy link
Contributor

This PR addresses issue #8993 by updating the DropdownMenuSeparator to adjust its background color based on the current theme.

muraliSingh7 and others added 6 commits December 1, 2024 03:55
Changed the padding-left for the chip component when the variant is Transparent.
The padding-left is now set to 2px to ensure proper alignment, while other variants
continue to use the default horizontal padding.
- Increased padding-left for table cells from 6px to 8px for uniform spacing.
- Set padding to 0px for Chip component in transparent mode to prevent it from affecting cell padding and ensure consistent 8px left padding across all cells.
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

Updated the DropdownMenuSeparator component to use theme-based transparent background colors, improving visual consistency in dropdown menus.

  • Modified packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSeparator.tsx to use theme.background.transparent.light for dark theme
  • Inconsistent indentation in the component styling needs to be fixed
  • Theme-based color implementation only partially addresses issue Borders / separators should be transparent #8993, as light theme still uses border.color.light

💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!

1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines 4 to 7
background-color: ${({ theme }) =>
theme.name === 'dark'
? theme.background.transparent.light
: theme.border.color.light};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Inconsistent indentation in the template literal

@muraliSingh7
Copy link
Contributor Author

@lucasbordeau please review it

@lucasbordeau lucasbordeau self-assigned this Dec 17, 2024
@lucasbordeau
Copy link
Contributor

lucasbordeau commented Dec 17, 2024

Could you please provide screenshots of an example of DropdownMenuSeparator both light and dark mode before and after ?

@muraliSingh7
Copy link
Contributor Author

@lucasbordeau
Before:
Light:
image

Dark:
image

After:
Light:
image

Dark:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants