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

274
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};
box-shadow: ${!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}`
: 'none'};
color: ${theme.grayScale.gray0}; color: ${theme.grayScale.gray0};
box-shadow: ${ opacity: ${disabled ? 0.24 : 1};
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ${disabled
: 'none' ? ''
}; : css`
&:hover { &:hover {
background: ${ background: ${theme.color.blue50};
!disabled ? theme.color.blue50 : theme.color.blue20 }
}; &:active {
} background: ${theme.color.blue60};
&:active { }
background: ${ `}
!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`
&:active { &:hover,
background: ${ &:active {
!disabled ? theme.color.red50 : theme.color.red20 background: ${theme.color.red50};
}; }
} `}
`; `;
} }
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
}; ? theme.font.color.secondary
color: ${ : theme.font.color.extraLight};
!disabled
? theme.font.color.secondary
: 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'};
} }
`; `;
} }

264
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};
box-shadow: ${!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}`
: 'none'};
color: ${theme.grayScale.gray0}; color: ${theme.grayScale.gray0};
box-shadow: ${ opacity: ${disabled ? 0.24 : 1};
!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}` ${disabled
: 'none' ? ''
}; : css`
&:hover { &:hover {
background: ${ background: ${theme.color.blue50};
!disabled ? theme.color.blue50 : theme.color.blue20 }
}; &:active {
} background: ${theme.color.blue60};
&:active { }
background: ${ `}
!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`
&:active { &:hover,
background: ${ &:active {
!disabled ? theme.color.red50 : theme.color.red20 background: ${theme.color.red50};
}; }
} `}
`; `;
} }
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
}; ? theme.font.color.secondary
color: ${ : theme.font.color.extraLight};
!disabled
? theme.font.color.secondary
: 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'};
} }
`; `;
} }