tweak(web): adjust markdown heading margins (#393)

* tweak(web): components for markdown headings

Fixed nomenclature and set as default export.

* fix(ui): temp remove MarkdownComponents file

* fix(ui): return MarkdownComponents file

web/src/features/textui/TextUI.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ScaleFade from '../../transitions/ScaleFade';
 import remarkGfm from 'remark-gfm';
 import type { TextUiProps, TextUiPosition } from '../../typings';
+import MarkdownComponents from '../../config/MarkdownComponents';
 
 const useStyles = createStyles((theme, params: { position?: TextUiPosition }) => ({
   wrapper: {
@@ -52,7 +53,9 @@ const TextUI: React.FC = () => {
           <Box style={data.style} className={classes.container}>
             <Group spacing={12}>
               {data.icon && <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" style={{ color: data.iconColor }} />}
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{data.text}</ReactMarkdown>
+              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm]}>
+                {data.text}
+              </ReactMarkdown>
             </Group>
           </Box>
         </ScaleFade>