mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: dark mode for MainButton (#1681)

Browse Source 
* fix: dark mode for MainButton

* Fix colors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Yaswanth
2023-09-21 05:52:13 +05:30
committed by GitHub
parent 07f589d521
commit dafe08ef78
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/modules/ui/button/components/MainButton.tsx
View File

@ -22,11 +22,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
switch (variant) {
case 'primary':
return `radial-gradient(
50% 62.62% at 50% 0%,
${theme.font.color.secondary} 0%,
${theme.font.color.primary} 100%
)`;
return theme.background.radialGradient;
case 'secondary':
return theme.background.primary;
default:
@ -34,12 +30,19 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
}
}};
border: 1px solid;
border-color: ${({ theme, disabled }) => {
border-color: ${({ theme, disabled, variant }) => {
if (disabled) {
return theme.background.transparent.lighter;
}
return theme.border.color.light;
switch (variant) {
case 'primary':
return theme.background.transparent.light;
case 'secondary':
return theme.border.color.medium;
default:
return theme.background.primary;
}
}};
border-radius: ${({ theme }) => theme.border.radius.md};
${({ theme, disabled }) => {
@ -56,7 +59,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
switch (variant) {
case 'primary':
return theme.font.color.inverted;
return theme.grayScale.gray0;
case 'secondary':
return theme.font.color.primary;
default:
@ -82,7 +85,11 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
}
`;
default:
return '';
return `
&:hover {
background: ${theme.background.radialGradientHover}};
}
`;
}
}};
`;

5
front/src/modules/ui/theme/constants/background.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/no-hardcoded-colors */
import DarkNoise from '../assets/dark-noise.jpg';
import LightNoise from '../assets/light-noise.png';
@ -20,6 +21,8 @@ export const backgroundLight = {
danger: rgba(color.red, 0.08),
},
overlay: rgba(grayScale.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
};
export const backgroundDark = {
@ -39,4 +42,6 @@ export const backgroundDark = {
danger: rgba(color.red, 0.08),
},
overlay: rgba(grayScale.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
};