@verdaccio/ui-components 2.0.0-6-next.10 → 3.0.0-next-7.3

package/src/components/Readme/Readme.tsx

@@ -1,30 +1,41 @@
 import styled from '@emotion/styled';
-import 'github-markdown-css';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
 import 'highlight.js/styles/default.css';
 import React from 'react';
 
-import { Theme } from '../../Theme';
+import { useCustomTheme } from '../../';
+import './github-markdown.css';
 import { Props } from './types';
 import { parseReadme } from './utils';
 
 const Readme: React.FC<Props> = ({ description }) => {
+  // @ts-ignore
+  const { isDarkMode } = useCustomTheme();
+  const theme = useTheme();
+
   return (
-    <Wrapper
-      className="markdown-body"
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
+    <Card>
+      <CardContent>
+        <Box data-testid="readme" sx={{ margin: theme.spacing(1) }}>
+          <Wrapper
+            className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
+            dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 export default Readme;
 
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
+const Wrapper = styled('div')({
   ul: {
     listStyle: 'disc',
   },
   img: {
     maxWidth: '100%',
   },
-}));
+});