From 9a1fa1a64e5294f6f68ae63eb33d256979871cd5 Mon Sep 17 00:00:00 2001
From: Colin Spence <udappia@gmail.com>
Date: Wed, 27 Jul 2022 12:41:17 -0600
Subject: [PATCH 1/2] Resolves formatting issues mentioned in issue #136

---
 .../app/src/components/commons/Markdown.tsx   | 33 +++++++++----------
 packages/app/src/theme/index.ts               | 14 ++++++++
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/components/commons/Markdown.tsx b/packages/app/src/components/commons/Markdown.tsx
index 3919d6c5..2226c18d 100644
--- a/packages/app/src/components/commons/Markdown.tsx
+++ b/packages/app/src/components/commons/Markdown.tsx
@@ -1,7 +1,7 @@
 import ReactMarkdown from "markdown-to-jsx"
 import { List, ListItem, Typography } from "@mui/material"
 import Link from "@mui/material/Link"
-import { palette, typography } from "../../theme"
+import { typography } from "../../theme"
 
 const options = {
   overrides: {
@@ -50,13 +50,26 @@ const options = {
       props: { gutterBottom: true, paragraph: true },
     },
     a: { component: Link },
+    ol: {
+      component: List,
+      dense: true,
+      props: {
+        sx: {
+          mb: 2,
+          pl: 2,
+          "& li": {
+            listStyleType: "decimal"
+          }
+        },
+      },
+    },
     ul: {
       component: List,
       dense: true,
       props: {
         sx: {
           mb: 2,
-          pl: 0,
+          pl: 2,
         },
       },
     },
@@ -65,27 +78,13 @@ const options = {
       props: {
         sx: {
           display: "list-item",
-          listStylePosition: "inside",
+          listStylePosition: "outside",
           listStyleType: "circle",
           pl: 0,
           py: "0.25rem",
         },
       },
     },
-    pre: {
-      props: {
-        style: {
-          background: palette.grays[800],
-          borderRadius: 4,
-          color: palette.whites[1000],
-          fontFamily: typography.fontFamilies.monospace,
-          marginBottom: "1rem",
-          overflow: "auto",
-          paddingBottom: "1rem",
-          paddingTop: "1rem",
-        },
-      },
-    },
   },
 }
 
diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts
index de8db8f3..577d44a8 100644
--- a/packages/app/src/theme/index.ts
+++ b/packages/app/src/theme/index.ts
@@ -177,6 +177,20 @@ let theme = createTheme({
         em {
           font-style: italic;
         }
+        blockquote {
+          padding: 0 1rem;
+          border-left: 2px solid ${palette.grays[200]};
+          color: ${palette.grays[800]};
+        }
+        pre, :not(pre) > code {
+          background-color: ${palette.grays[800]};
+          border-radius: 4px;
+          color: ${palette.whites[1000]};
+          font-family: ${typography.fontFamilies.monospace};
+          margin-bottom: 1rem;
+          overflow: auto;
+          padding: 1rem;
+        }
       `,
     },
   },

From 0c62966e9064cb7f8f8481316aca34580edfcaee Mon Sep 17 00:00:00 2001
From: Colin Spence <udappia@gmail.com>
Date: Wed, 27 Jul 2022 17:30:23 -0600
Subject: [PATCH 2/2] Fixes code/pre width issue

---
 packages/app/src/components/views/publication/ArticleView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/components/views/publication/ArticleView.tsx b/packages/app/src/components/views/publication/ArticleView.tsx
index 263d1d6a..54f814bb 100644
--- a/packages/app/src/components/views/publication/ArticleView.tsx
+++ b/packages/app/src/components/views/publication/ArticleView.tsx
@@ -120,7 +120,7 @@ export const ArticleView: React.FC<ArticleViewProps> = ({ updateChainId }) => {
                     ))}
                 </Grid>
               )}
-              <Grid item my={5}>
+              <Grid item my={5} width="100%">
                 <Markdown>{articleToShow}</Markdown>
               </Grid>