Merge pull request #454 from HausDAO/feat/details-markdown-wrapper

styles to make proposal details more readable
HausDAO · Nov 17, 2023 · 075deb0 · 075deb0
2 parents 3f3ab0a + e30f611
commit 075deb0
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx b/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx
@@ -29,12 +29,35 @@ import { ProposalWarning } from '../ProposalActionData/ProposalWarning';
 import styled from 'styled-components';
 import { ProposalActionConfig } from '../ProposalActionData';
 
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from 'react-markdown';
 
 const Spacer = styled.div`
   margin-bottom: 2rem;
 `;
 
+const ReactMarkdownWrapper = styled.div`
+  font-size: 1.6rem;
+
+  .description {
+    p,
+    h1,
+    h2,
+    h3,
+    h4 {
+      margin-top: 1rem;
+    }
+    h2 + p {
+      margin-top: 0;
+    }
+    h3 + p {
+      margin-top: 0;
+    }
+    h4 + p {
+      margin-top: 0;
+    }
+  }
+`;
+
 type ProposalDetailsProps = {
   daoChain: string;
   daoId: string;
@@ -61,7 +84,11 @@ export const ProposalDetails = ({
 
   return (
     <OverviewContainer>
-      <ReactMarkdown className="description">{proposal.description}</ReactMarkdown>
+      <ReactMarkdownWrapper>
+        <ReactMarkdown className="description">
+          {proposal.description}
+        </ReactMarkdown>
+      </ReactMarkdownWrapper>
       {proposal.contentURI && (
         <Link href={proposal.contentURI} className="proposal-link">
           Link