mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
2e6b6cd354
https://linear.app/unleash/issue/2-849/dark-mode-ui-fixes ![image](https://user-images.githubusercontent.com/14320932/228607663-fd474e42-b23d-4fc2-a083-d42b87332399.png) ![image](https://user-images.githubusercontent.com/14320932/228607757-bf53d67b-8ef1-4aba-bcc1-f2c6b9cc56a2.png) ![image](https://user-images.githubusercontent.com/14320932/228607875-5bfaeb46-e37c-41d3-941f-bc89e10ad43f.png) Also includes misc UI fixes and improvements we identified along the way. Co-authored by @NicolaeUnleash --------- Co-authored-by: NicolaeUnleash <103567375+NicolaeUnleash@users.noreply.github.com>
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { styled } from '@mui/material';
|
|
import mermaid from 'mermaid';
|
|
import { useRef, useEffect } from 'react';
|
|
|
|
const StyledMermaid = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
'#mermaid': {
|
|
'.edgeLabel': {
|
|
backgroundColor: theme.palette.background.paper,
|
|
color: theme.palette.text.primary,
|
|
},
|
|
'.nodeLabel': {
|
|
color: theme.palette.secondary.dark,
|
|
},
|
|
'.edgePaths > path': {
|
|
stroke: theme.palette.secondary.dark,
|
|
},
|
|
'.arrowMarkerPath': {
|
|
fill: theme.palette.secondary.dark,
|
|
stroke: 'transparent',
|
|
},
|
|
},
|
|
'&&& #mermaid .node rect': {
|
|
stroke: theme.palette.secondary.border,
|
|
fill: theme.palette.secondary.light,
|
|
},
|
|
}));
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'default',
|
|
themeCSS: `
|
|
.clusters #_ rect {
|
|
fill: transparent;
|
|
stroke: transparent;
|
|
}
|
|
`,
|
|
});
|
|
|
|
interface IMermaidProps {
|
|
children: string;
|
|
}
|
|
|
|
export const Mermaid = ({ children, ...props }: IMermaidProps) => {
|
|
const mermaidRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
mermaid.render('mermaid', children, svgCode => {
|
|
if (mermaidRef.current) {
|
|
mermaidRef.current.innerHTML = svgCode;
|
|
}
|
|
});
|
|
}, [children]);
|
|
|
|
return <StyledMermaid ref={mermaidRef} {...props} />;
|
|
};
|