scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-31 20:57:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

added light background for better hover visibility on dark theme (#8043)

Browse Source 
fixes: #7969 

## What does this PR do?

Apply a lighter background color to enhance the hover effect in dark
mode.


![twenty-hover](https://github.com/user-attachments/assets/3d218060-2328-481e-9e66-250abd276dc0)
This commit is contained in:
Muhammad Abdullah
2024-10-29 15:42:04 +05:00
committed by GitHub
parent 2e10070fdb
commit 77a4aa2649
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
View File

@@ -7,13 +7,13 @@ type StyledDropdownButtonProps = {
export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>` export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
align-items: center; align-items: center;
background: ${({ theme }) => theme.background.primary}; background: ${({ theme, isUnfolded }) =>
isUnfolded ? theme.background.transparent.light : theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ isActive, theme, color }) => color: ${({ isActive, theme }) =>
color ?? (isActive ? theme.color.blue : 'none')}; isActive ? theme.color.blue : theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
@@ -22,6 +22,9 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
user-select: none; user-select: none;
&:hover { &:hover {
filter: brightness(0.95); background: ${({ theme, isUnfolded }) =>
isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
} }
`; `;

13
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
View File

@@ -8,14 +8,14 @@ type StyledDropdownButtonProps = {
export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>` export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>`
font-family: inherit; font-family: inherit;
align-items: center; align-items: center;
background: ${({ theme }) => theme.background.primary}; background: ${({ theme, isUnfolded }) =>
isUnfolded ? theme.background.transparent.light : theme.background.primary};
border: none; border: none;
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ isActive, theme, color }) => color: ${({ isActive, theme }) =>
color ?? (isActive ? theme.color.blue : theme.font.color.secondary)}; isActive ? theme.color.blue : theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
@@ -24,6 +24,9 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
user-select: none; user-select: none;
&:hover { &:hover {
filter: brightness(0.95); background: ${({ theme, isUnfolded }) =>
isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
} }
`; `;