QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-08-04 04:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Browse Source 
Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Maxime Beauchemin
2025-06-20 13:38:58 -07:00
committed by GitHub
parent 2cc1ef88c8
commit dd129fa403
1267 changed files with 32958 additions and 23592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
View File

@@ -16,30 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ErrorLevel, styled, useTheme } from '@superset-ui/core';
import { Icons } from 'src/components/Icons';
const StyledContainer = styled.div<{ level: ErrorLevel }>`
display: flex;
flex-direction: row;
background-color: ${({ level, theme }) => theme.colors[level].light2};
border-radius: ${({ theme }) => theme.borderRadius}px;
border: 1px solid ${({ level, theme }) => theme.colors[level].base};
color: ${({ level, theme }) => theme.colors[level].dark2};
padding: ${({ theme }) => theme.gridUnit * 2}px;
margin-bottom: ${({ theme }) => theme.gridUnit}px;
width: 100%;
`;
import { ErrorLevel, styled, themeObject, useTheme } from '@superset-ui/core';
import { Icons } from '@superset-ui/core/components';
const StyledContent = styled.div`
display: flex;
flex-direction: column;
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
overflow: hidden;
`;
const StyledTitle = styled.span`
font-weight: ${({ theme }) => theme.typography.weights.bold};
font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
interface BasicErrorAlertProps {
@@ -48,21 +36,32 @@ interface BasicErrorAlertProps {
level?: ErrorLevel;
}
export default function BasicErrorAlert({
export function BasicErrorAlert({
body,
level = 'error',
title,
}: BasicErrorAlertProps) {
const theme = useTheme();
const iconColor = theme.colors[level].base;
const variants = themeObject.getColorVariants(level);
const style: React.CSSProperties = {
backgroundColor: variants.bg,
borderColor: variants.border,
color: variants.text,
display: 'flex',
flexDirection: 'row',
borderRadius: `${theme.borderRadius}px`,
padding: `${theme.sizeUnit * 2}px`,
marginBottom: `${theme.sizeUnit}px`,
width: '100%',
};
return (
<StyledContainer level={level} role="alert">
<Icons.ExclamationCircleFilled iconColor={iconColor} />
<div style={style} role="alert">
<Icons.ExclamationCircleFilled iconColor={variants.text} />
<StyledContent>
<StyledTitle>{title}</StyledTitle>
<p>{body}</p>
</StyledContent>
</StyledContainer>
</div>
);
}