Code styling

src/custom/Markdown/index.tsx

@@ -5,6 +5,7 @@ import {
   BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
+  StyledMarkdownCode,
   StyledMarkdownH1,
   StyledMarkdownH2,
   StyledMarkdownH3,
@@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
         td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
-        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>,
+        code: ({ ...props }) => <StyledMarkdownCode>{props.children}</StyledMarkdownCode>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   whiteSpace: 'pre-line',
   fontFamily: 'inherit'
 }));
+
+export const StyledMarkdownCode = styled('code')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line',
+  padding: '1.5px',
+  paddingInline: '5px',
+  fontFamily: 'inherit',
+  borderRadius: 3
+}));

src/index.tsx

@@ -6,3 +6,4 @@ export * from './icons';
 export * from './redux-persist';
 export * from './schemas';
 export * from './theme';
+export * from './utils';

src/theme/palette.ts

@@ -255,6 +255,7 @@ export const lightModePalette: PaletteOptions = {
       tertiary: Colors.red[70]
     },
     code: Colors.charcoal[90],
+
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],
@@ -369,7 +370,7 @@ export const darkModePalette: PaletteOptions = {
       secondary: Colors.red[20],
       tertiary: Colors.red[10]
     },
-    code: Colors.accentGrey[90],
+    code: Colors.charcoal[10],
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],

src/utils/components.ts

@@ -0,0 +1,6 @@
+export const componentIcon = ({ kind, model, color }) => {
+  if (!kind || !model || !color) {
+    return null;
+  }
+  return `/ui/public/static/img/meshmodels/${model}/${color}/${kind.toLowerCase()}-${color}.svg`;
+};

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './components';