admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: fix disabled Button and IconButton primary accents background co… (#3165)

Browse Source 
fix: fix disabled Button and IconButton primary accents background color and opacity

Fixes #3135
This commit is contained in:
Thaïs
2023-12-28 11:47:15 -03:00
committed by GitHub
parent 40d4a0d9c8
commit 81a18cd751
2 changed files with 243 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { useTheme } from '@emotion/react'; import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@ -37,94 +37,80 @@ const StyledButton = styled.button<
case 'primary': case 'primary':
switch (accent) { switch (accent) {
case 'default': case 'default':
return ` return css`
background: ${theme.background.secondary}; background: ${theme.background.secondary};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
color: ${
!disabled
? theme.font.color.secondary
: theme.font.color.extraLight
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${!disabled
? theme.font.color.secondary
: theme.font.color.extraLight};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled
? theme.background.tertiary ? theme.background.tertiary
: theme.background.secondary : theme.background.secondary};
};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled
? theme.background.quaternary ? theme.background.quaternary
: theme.background.secondary : theme.background.secondary};
};
} }
`; `;
case 'blue': case 'blue':
return ` return css`
background: ${!disabled ? theme.color.blue : theme.color.blue20}; background: ${theme.color.blue};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
color: ${theme.grayScale.gray0}; box-shadow: ${!disabled && focus
box-shadow: ${
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${theme.grayScale.gray0};
opacity: ${disabled ? 0.24 : 1};
${disabled
? ''
: css`
&:hover { &:hover {
background: ${ background: ${theme.color.blue50};
!disabled ? theme.color.blue50 : theme.color.blue20
};
} }
&:active { &:active {
background: ${ background: ${theme.color.blue60};
!disabled ? theme.color.blue60 : theme.color.blue20
};
} }
`}
`; `;
case 'danger': case 'danger':
return ` return css`
background: ${!disabled ? theme.color.red : theme.color.red20}; background: ${theme.color.red};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.red ? theme.color.red
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus ? `0 0 0 3px ${theme.color.red10}` : 'none' ? `0 0 0 3px ${theme.color.red10}`
}; : 'none'};
color: ${theme.grayScale.gray0}; color: ${theme.grayScale.gray0};
&:hover { opacity: ${disabled ? 0.24 : 1};
background: ${
!disabled ? theme.color.red50 : theme.color.red20 ${disabled
}; ? ''
} : css`
&:hover,
&:active { &:active {
background: ${ background: ${theme.color.red50};
!disabled ? theme.color.red50 : theme.color.red20
};
} }
`}
`; `;
} }
break; break;
@ -132,101 +118,89 @@ const StyledButton = styled.button<
case 'tertiary': case 'tertiary':
switch (accent) { switch (accent) {
case 'default': case 'default':
return ` return css`
background: ${ background: ${focus
focus ? theme.background.transparent.primary : 'transparent' ? theme.background.transparent.primary
}; : 'transparent'};
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? !disabled && focus ? !disabled && focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: focus : focus
? theme.color.blue ? theme.color.blue
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${!disabled
color: ${
!disabled
? theme.font.color.secondary ? theme.font.color.secondary
: theme.font.color.extraLight : theme.font.color.extraLight};
};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.background.transparent.light : 'transparent' ? theme.background.transparent.light
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.background.transparent.light : 'transparent' ? theme.background.transparent.light
}; : 'transparent'};
} }
`; `;
case 'blue': case 'blue':
return ` return css`
background: ${ background: ${focus
focus ? theme.background.transparent.primary : 'transparent' ? theme.background.transparent.primary
}; : 'transparent'};
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? focus ? focus
? theme.color.blue ? theme.color.blue
: theme.color.blue20 : theme.color.blue20
: focus : focus
? theme.color.blue ? theme.color.blue
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
};
color: ${!disabled ? theme.color.blue : theme.accent.accent4060}; color: ${!disabled ? theme.color.blue : theme.accent.accent4060};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.accent.tertiary : 'transparent' ? theme.accent.tertiary
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.accent.secondary : 'transparent' ? theme.accent.secondary
}; : 'transparent'};
} }
`; `;
case 'danger': case 'danger':
return ` return css`
background: ${ background: ${!disabled
!disabled ? theme.background.transparent.primary : 'transparent' ? theme.background.transparent.primary
}; : 'transparent'};
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? focus ? focus
? theme.color.red ? theme.color.red
: theme.border.color.danger : theme.border.color.danger
: focus : focus
? theme.color.red ? theme.color.red
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus ? `0 0 0 3px ${theme.color.red10}` : 'none' ? `0 0 0 3px ${theme.color.red10}`
}; : 'none'};
color: ${!disabled ? theme.font.color.danger : theme.color.red20}; color: ${!disabled ? theme.font.color.danger : theme.color.red20};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.background.danger : 'transparent' ? theme.background.danger
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.background.danger : 'transparent' ? theme.background.danger
}; : 'transparent'};
} }
`; `;
} }

196
packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { useTheme } from '@emotion/react'; import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@ -32,94 +32,80 @@ const StyledButton = styled.button<
case 'primary': case 'primary':
switch (accent) { switch (accent) {
case 'default': case 'default':
return ` return css`
background: ${theme.background.secondary}; background: ${theme.background.secondary};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
color: ${
!disabled
? theme.font.color.secondary
: theme.font.color.extraLight
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${!disabled
? theme.font.color.secondary
: theme.font.color.extraLight};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled
? theme.background.tertiary ? theme.background.tertiary
: theme.background.secondary : theme.background.secondary};
};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled
? theme.background.quaternary ? theme.background.quaternary
: theme.background.secondary : theme.background.secondary};
};
} }
`; `;
case 'blue': case 'blue':
return ` return css`
background: ${!disabled ? theme.color.blue : theme.color.blue20}; background: ${theme.color.blue};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
color: ${theme.grayScale.gray0}; box-shadow: ${!disabled && focus
box-shadow: ${
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${theme.grayScale.gray0};
opacity: ${disabled ? 0.24 : 1};
${disabled
? ''
: css`
&:hover { &:hover {
background: ${ background: ${theme.color.blue50};
!disabled ? theme.color.blue50 : theme.color.blue20
};
} }
&:active { &:active {
background: ${ background: ${theme.color.blue60};
!disabled ? theme.color.blue60 : theme.color.blue20
};
} }
`}
`; `;
case 'danger': case 'danger':
return ` return css`
background: ${!disabled ? theme.color.red : theme.color.red20}; background: ${theme.color.red};
border-color: ${ border-color: ${!disabled
!disabled
? focus ? focus
? theme.color.red ? theme.color.red
: theme.background.transparent.light : theme.background.transparent.light
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus ? `0 0 0 3px ${theme.color.red10}` : 'none' ? `0 0 0 3px ${theme.color.red10}`
}; : 'none'};
color: ${theme.grayScale.gray0}; color: ${theme.grayScale.gray0};
&:hover { opacity: ${disabled ? 0.24 : 1};
background: ${
!disabled ? theme.color.red50 : theme.color.red20 ${disabled
}; ? ''
} : css`
&:hover,
&:active { &:active {
background: ${ background: ${theme.color.red50};
!disabled ? theme.color.red50 : theme.color.red20
};
} }
`}
`; `;
} }
break; break;
@ -127,97 +113,85 @@ const StyledButton = styled.button<
case 'tertiary': case 'tertiary':
switch (accent) { switch (accent) {
case 'default': case 'default':
return ` return css`
background: ${ background: ${focus
focus ? theme.background.transparent.primary : 'transparent' ? theme.background.transparent.primary
}; : 'transparent'};
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? !disabled && focus ? !disabled && focus
? theme.color.blue ? theme.color.blue
: theme.background.transparent.light : theme.background.transparent.light
: focus : focus
? theme.color.blue ? theme.color.blue
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
}; color: ${!disabled
color: ${
!disabled
? theme.font.color.secondary ? theme.font.color.secondary
: theme.font.color.extraLight : theme.font.color.extraLight};
};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.background.transparent.light : 'transparent' ? theme.background.transparent.light
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.background.transparent.light : 'transparent' ? theme.background.transparent.light
}; : 'transparent'};
} }
`; `;
case 'blue': case 'blue':
return ` return css`
background: ${ background: ${focus
focus ? theme.background.transparent.primary : 'transparent' ? theme.background.transparent.primary
}; : 'transparent'};
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? !disabled ? !disabled
? theme.color.blue ? theme.color.blue
: theme.color.blue20 : theme.color.blue20
: focus : focus
? theme.color.blue ? theme.color.blue
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ? `0 0 0 3px ${theme.accent.tertiary}`
: 'none' : 'none'};
};
color: ${!disabled ? theme.color.blue : theme.accent.accent4060}; color: ${!disabled ? theme.color.blue : theme.accent.accent4060};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.accent.tertiary : 'transparent' ? theme.accent.tertiary
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.accent.secondary : 'transparent' ? theme.accent.secondary
}; : 'transparent'};
} }
`; `;
case 'danger': case 'danger':
return ` return css`
background: transparent; background: transparent;
border-color: ${ border-color: ${variant === 'secondary'
variant === 'secondary'
? theme.border.color.danger ? theme.border.color.danger
: focus : focus
? theme.color.red ? theme.color.red
: 'transparent' : 'transparent'};
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0}; border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${ box-shadow: ${!disabled && focus
!disabled && focus ? `0 0 0 3px ${theme.color.red10}` : 'none' ? `0 0 0 3px ${theme.color.red10}`
}; : 'none'};
color: ${!disabled ? theme.font.color.danger : theme.color.red20}; color: ${!disabled ? theme.font.color.danger : theme.color.red20};
&:hover { &:hover {
background: ${ background: ${!disabled
!disabled ? theme.background.danger : 'transparent' ? theme.background.danger
}; : 'transparent'};
} }
&:active { &:active {
background: ${ background: ${!disabled
!disabled ? theme.background.danger : 'transparent' ? theme.background.danger
}; : 'transparent'};
} }
`; `;
} }