Merge pull request #159 from gnosis/formatting-improvements

Resolves formatting issues mentioned in issue #136
gnosisguild · Jul 28, 2022 · a74cd87 · a74cd87
2 parents 7e36c9c + cf17ea3
commit a74cd87
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git 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/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>
 

diff --git 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;
+        }
       `,
     },
   },
-Original file line number
+Diff line change
@@ Expand Up @@
                         ))}
                     </Grid>
                   )}
-                  <Grid item my={5}>
+                  <Grid item my={5} width="100%">
                     <Markdown>{articleToShow}</Markdown>
                   </Grid>
@@ Expand Down @@