admin/twenty
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) { switch (variant) {
case 'primary': case 'primary':
return `radial-gradient( return theme.background.radialGradient;
50% 62.62% at 50% 0%,
${theme.font.color.secondary} 0%,
${theme.font.color.primary} 100%
)`;
case 'secondary': case 'secondary':
return theme.background.primary; return theme.background.primary;
default: default:
@ -34,12 +30,19 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
} }
}}; }};
border: 1px solid; border: 1px solid;
border-color: ${({ theme, disabled }) => { border-color: ${({ theme, disabled, variant }) => {
if (disabled) { if (disabled) {
return theme.background.transparent.lighter; 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}; border-radius: ${({ theme }) => theme.border.radius.md};
${({ theme, disabled }) => { ${({ theme, disabled }) => {
@ -56,7 +59,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
switch (variant) { switch (variant) {
case 'primary': case 'primary':
return theme.font.color.inverted; return theme.grayScale.gray0;
case 'secondary': case 'secondary':
return theme.font.color.primary; return theme.font.color.primary;
default: default:
@ -82,7 +85,11 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
} }
`; `;
default: 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 DarkNoise from '../assets/dark-noise.jpg';
import LightNoise from '../assets/light-noise.png'; import LightNoise from '../assets/light-noise.png';
@ -20,6 +21,8 @@ export const backgroundLight = {
danger: rgba(color.red, 0.08), danger: rgba(color.red, 0.08),
}, },
overlay: rgba(grayScale.gray80, 0.8), 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 = { export const backgroundDark = {
@ -39,4 +42,6 @@ export const backgroundDark = {
danger: rgba(color.red, 0.08), danger: rgba(color.red, 0.08),
}, },
overlay: rgba(grayScale.gray80, 0.8), 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%)`,
}; };