Merge remote-tracking branch 'origin/feature/add-styled-divider'

Author: MU-Software

packages/common/src/components/mdx.tsx

@@ -21,6 +21,7 @@ import * as R from "remeda";
 import Hooks from "../hooks";
 import { ErrorFallback } from "./error_handler";
 import { rtrim } from "../utils/string";
+import { StyledDivider } from "./mdx_components/styled_divider";
 
 const REGISTERED_KEYWORDS = [
   "import",
@@ -52,6 +53,7 @@ const CustomMDXComponents: MDXComponents = {
   h5: (props) => <h5 {...props} />,
   h6: (props) => <h6 {...props} />,
   strong: (props) => <strong {...props} />,
+  hr: (props) => <StyledDivider {...props} />,
   em: (props) => <em {...props} />,
   ul: (props) => <ul {...props} />,
   ol: (props) => <ol {...props} />,

packages/common/src/components/mdx_components/styled_divider.tsx

@@ -0,0 +1,9 @@
+import { Divider, DividerProps, useTheme } from "@mui/material";
+import * as React from "react";
+
+export const StyledDivider: React.FC<DividerProps> = (props) => {
+  const { palette } = useTheme();
+  const sx = { borderColor: palette.primary.dark, ...props.sx };
+  const newProps = { ...props, sx };
+  return <Divider {...newProps} />;
+};