mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
705462f0cf
## About the changes Creating the first version of the Dark theme Refactor: colors variables Refactor: use theme variable instead - this change will help us to use MuiCssBaseline, and we can use classes directly for easy customization when we can't identify MUI classes Refactor: adjusting some files components - i’ve touched also the structure of some files, not only the colors variables (but only to adjust the style, not functionality) Fix: dark mode persistence on refresh (by Nuno) Feat: dark mode sees light logos, and light mode sees dark logos (by Nuno) --------- Co-authored-by: Nuno Góis <github@nunogois.com>
103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import { styled, SxProps, Theme } from '@mui/material';
|
|
import React, {
|
|
cloneElement,
|
|
FC,
|
|
ForwardedRef,
|
|
forwardRef,
|
|
ReactElement,
|
|
ReactNode,
|
|
} from 'react';
|
|
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
|
|
|
|
type Color = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
|
|
|
|
interface IBadgeProps {
|
|
color?: Color;
|
|
icon?: ReactElement;
|
|
iconRight?: boolean;
|
|
className?: string;
|
|
sx?: SxProps<Theme>;
|
|
children?: ReactNode;
|
|
title?: string;
|
|
onClick?: (event: React.SyntheticEvent) => void;
|
|
}
|
|
|
|
interface IBadgeIconProps {
|
|
color?: Color;
|
|
iconRight?: boolean;
|
|
}
|
|
|
|
const StyledBadge = styled('div')<IBadgeProps>(
|
|
({ theme, color = 'neutral', icon }) => ({
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
padding: theme.spacing(icon ? 0.375 : 0.625, 1),
|
|
borderRadius: theme.shape.borderRadius,
|
|
fontSize: theme.fontSizes.smallerBody,
|
|
fontWeight: theme.fontWeight.bold,
|
|
lineHeight: 1,
|
|
backgroundColor: theme.palette[color].light,
|
|
color: theme.palette[color].contrastText,
|
|
border: `1px solid ${theme.palette[color].border}`,
|
|
})
|
|
);
|
|
|
|
const StyledBadgeIcon = styled('div')<IBadgeIconProps>(
|
|
({ theme, color = 'neutral', iconRight = false }) => ({
|
|
display: 'flex',
|
|
color: theme.palette[color].main,
|
|
margin: iconRight
|
|
? theme.spacing(0, 0, 0, 0.5)
|
|
: theme.spacing(0, 0.5, 0, 0),
|
|
})
|
|
);
|
|
|
|
const BadgeIcon = (color: Color, icon: ReactElement, iconRight = false) => (
|
|
<StyledBadgeIcon color={color} iconRight={iconRight}>
|
|
<ConditionallyRender
|
|
condition={Boolean(icon?.props.sx)}
|
|
show={icon}
|
|
elseShow={() =>
|
|
cloneElement(icon!, {
|
|
sx: { fontSize: '16px' },
|
|
})
|
|
}
|
|
/>
|
|
</StyledBadgeIcon>
|
|
);
|
|
|
|
export const Badge: FC<IBadgeProps> = forwardRef(
|
|
(
|
|
{
|
|
color = 'neutral',
|
|
icon,
|
|
iconRight,
|
|
className,
|
|
sx,
|
|
children,
|
|
...props
|
|
}: IBadgeProps,
|
|
ref: ForwardedRef<HTMLDivElement>
|
|
) => (
|
|
<StyledBadge
|
|
tabIndex={0}
|
|
color={color}
|
|
icon={icon}
|
|
className={className}
|
|
sx={sx}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<ConditionallyRender
|
|
condition={Boolean(icon) && !Boolean(iconRight)}
|
|
show={BadgeIcon(color, icon!)}
|
|
/>
|
|
{children}
|
|
<ConditionallyRender
|
|
condition={Boolean(icon) && Boolean(iconRight)}
|
|
show={BadgeIcon(color, icon!, true)}
|
|
/>
|
|
</StyledBadge>
|
|
)
|
|
);
|