mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
4518ed6642
Related: https://github.com/Unleash/unleash/pull/2544 From: https://linear.app/unleash/issue/1-414/add-a-badge-for-oss-users-on-the-projects-page-to-see-that-extra Includes some fixes and suggestions: - Should only show when OSS (icon was showing every time); - Link now works correctly, opens on new tab; - Improves styling to be more aligned with original design: https://www.figma.com/file/qdwpPfuitJUNinm6mvmCmG/Unleash-application?node-id=6961%3A38443&t=zsXNAnOurapoLm9j-0; - Fixes text to be like in the design; - Improves `HtmlTooltip` look and behaviour: white arrow, custom width, etc; - Some refactoring and cleanup; Let me know if I should change anything 👍
30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
|
|
|
|
const StyledHtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
|
|
<Tooltip {...props} classes={{ popper: className }} />
|
|
))(({ theme }) => ({
|
|
maxWidth: theme.spacing(37.5),
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: theme.palette.background.paper,
|
|
padding: theme.spacing(1, 1.5),
|
|
borderRadius: theme.shape.borderRadiusMedium,
|
|
boxShadow: theme.shadows[2],
|
|
color: theme.palette.text.primary,
|
|
fontWeight: theme.fontWeight.medium,
|
|
maxWidth: 'inherit',
|
|
border: `1px solid ${theme.palette.lightBorder}`,
|
|
},
|
|
[`& .${tooltipClasses.arrow}`]: {
|
|
'&:before': {
|
|
border: `1px solid ${theme.palette.lightBorder}`,
|
|
},
|
|
color: theme.palette.background.paper,
|
|
},
|
|
}));
|
|
|
|
export const HtmlTooltip = (props: TooltipProps) => (
|
|
<StyledHtmlTooltip {...props}>{props.children}</StyledHtmlTooltip>
|
|
);
|