Updates table markdown on proposal page (#651)

voteagora · Dec 10, 2024 · 3012b28 · 3012b28
1 parent b263734
commit 3012b28
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 47 deletions.
diff --git a/src/app/api/common/proposals/getProposals.ts b/src/app/api/common/proposals/getProposals.ts
@@ -102,9 +102,13 @@ async function getProposal(proposalId: string) {
 async function getProposalTypes() {
   const { namespace, contracts } = Tenant.current();
 
+  if (!contracts.proposalTypesConfigurator) {
+    return [];
+  }
+
   const results = await findProposalType({
     namespace,
-    contract: contracts.proposalTypesConfigurator!.address,
+    contract: contracts.proposalTypesConfigurator.address,
   });
 
   return results;

diff --git a/src/app/custom.css/route.ts b/src/app/custom.css/route.ts
@@ -14,7 +14,7 @@ export async function GET() {
     negative: "197 47 0",
     brandPrimary: "23 23 23",
     brandSecondary: "255 255 255",
-    font: "TransSansPremium",
+    font: "var(--font-inter)",
   };
 
   const primary = ui?.customization?.primary || defaults.primary;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,7 +34,7 @@ const defaults = {
   negative: "197 47 0",
   brandPrimary: "23 23 23",
   brandSecondary: "255 255 255",
-  font: "TransSansPremium",
+  font: "var(--font-inter)",
 };
 
 const defaultFavicons = {

diff --git a/src/app/proposals/draft/components/DraftPreview.tsx b/src/app/proposals/draft/components/DraftPreview.tsx
@@ -16,9 +16,7 @@ import {
 import Tenant from "@/lib/tenant/tenant";
 import { ProposalType, BasicProposal } from "@/app/proposals/draft/types";
 import toast from "react-hot-toast";
-import styles from "@/components/Proposals/ProposalPage/ProposalDescription/proposalDescription.module.scss";
-import { cn } from "@/lib/utils";
-import ReactMarkdown from "react-markdown";
+import MarkdownPreview from "@uiw/react-markdown-preview";
 
 const PreText = ({ text }: { text: string }) => {
   return (
@@ -239,15 +237,16 @@ const DraftPreview = ({
 
         <h3 className="font-semibold mt-6">Description</h3>
         <div className="mt-2 p-4 bg-wash border border-line rounded-lg">
-          <ReactMarkdown
-            className={cn(
-              styles.proposal_description_md,
-              "max-w-none",
-              "prose"
-            )}
-          >
-            {proposalDraft.abstract}
-          </ReactMarkdown>
+          <MarkdownPreview
+            source={proposalDraft.abstract}
+            className={`h-full py-3 px-4 rounded-t-lg max-w-full bg-transparent prose`}
+            style={{
+              backgroundColor: "transparent",
+            }}
+            wrapperElement={{
+              "data-color-mode": "light",
+            }}
+          />
         </div>
       </FormCard.Section>
       <FormCard.Section className="z-0">

diff --git a/src/app/proposals/draft/components/form/MarkdownTextareaInput.tsx b/src/app/proposals/draft/components/form/MarkdownTextareaInput.tsx
@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/tooltip";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useState, useEffect } from "react";
-import MarkdownPreview from "@uiw/react-markdown-preview";
 import {
   ControllerProps,
   FieldPath,
@@ -23,6 +22,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import Markdown from "@/components/shared/Markdown/Markdown";
 
 type MarkdownTextareaInputProps = {
   label: string;
@@ -99,16 +99,11 @@ function MarkdownTextareaInput<
                 />
 
                 <div>
-                  <MarkdownPreview
-                    source={value}
-                    className={`h-full py-3 px-4 rounded-t-lg max-w-[650px] bg-transparent prose ${selectedMode === "write" ? "hidden" : "visible"}`}
-                    style={{
-                      backgroundColor: "transparent",
-                    }}
-                    wrapperElement={{
-                      "data-color-mode": "light",
-                    }}
-                  />
+                  <div
+                    className={`h-full py-3 px-4 rounded-t-lg max-w-full bg-transparent prose ${selectedMode === "write" ? "hidden" : "visible"}`}
+                  >
+                    <Markdown content={value} />
+                  </div>
                 </div>
               </div>
               <div className="w-full flex flex-row justify-end py-3 gap-x-1 rounded-b-lg border-x border-b border-line pr-2">

diff --git a/src/components/Proposals/ProposalPage/ProposalDescription/ProposalDescription.tsx b/src/components/Proposals/ProposalPage/ProposalDescription/ProposalDescription.tsx
@@ -1,16 +1,14 @@
 "use client";
 
-import ReactMarkdown from "react-markdown";
 import ProposalTitle from "../ProposalTitle/ProposalTitle";
 import styles from "./proposalDescription.module.scss";
-import { cn } from "@/lib/utils";
 import ApprovedTransactions from "../ApprovedTransactions/ApprovedTransactions";
 import ProposalTransactionDisplay from "../ApprovedTransactions/ProposalTransactionDisplay";
 import ProposalChart from "../ProposalChart/ProposalChart";
 import { Proposal } from "@/app/api/common/proposals/proposal";
-
 import { Vote } from "@/app/api/common/votes/vote";
 import { PaginatedResult } from "@/app/lib/pagination";
+import Markdown from "@/components/shared/Markdown/Markdown";
 
 export default function ProposalDescription({
   proposal,
@@ -78,11 +76,14 @@ export default function ProposalDescription({
             executedTransactionHash={proposal.executedTransactionHash}
           />
         )}
-        <ReactMarkdown
-          className={cn(styles.proposal_description_md, "max-w-none", "prose")}
-        >
-          {stripTitleFromDescription(shortTitle, patchedDescription ?? "")}
-        </ReactMarkdown>
+        <div className={styles.proposal_description_md}>
+          <Markdown
+            content={stripTitleFromDescription(
+              shortTitle,
+              patchedDescription ?? ""
+            )}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Proposals/ProposalPage/ProposalDescription/proposalDescription.module.scss b/src/components/Proposals/ProposalPage/ProposalDescription/proposalDescription.module.scss
@@ -10,42 +10,46 @@
 .proposal_description_md {
   h1 {
     font-size: $font-size-2xl;
+    font-weight: 700;
   }
 
   h2 {
     font-size: $font-size-xl;
     margin-bottom: $spacing-2;
     margin-top: $spacing-8;
+    font-weight: 700;
   }
 
   h3 {
     font-size: $font-size-lg;
     margin-bottom: $spacing-2;
     margin-top: $spacing-8;
+    font-weight: 700;
   }
 
   h4 {
     font-size: $font-size-lg;
     margin-bottom: $spacing-2;
     margin-top: $spacing-8;
+    font-weight: 700;
   }
 
   h5 {
     font-size: $font-size-lg;
     margin-bottom: $spacing-2;
     margin-top: $spacing-8;
+    font-weight: 700;
   }
 
   h6 {
     font-size: $font-size-lg;
     margin-bottom: $spacing-2;
     margin-top: $spacing-8;
+    font-weight: 700;
   }
 
   pre {
-    background-color: var(--neutral);
     border-radius: $border-radius-lg;
-    border: 1px solid var(--line);
   }
 
   code {
@@ -82,7 +86,12 @@
   p {
     word-break: break-word;
   }
+
   pre {
     white-space: pre-wrap;
   }
+
+  code {
+    border-radius: $border-radius-lg;
+  }
 }
diff --git a/src/components/shared/Markdown/Markdown.jsx b/src/components/shared/Markdown/Markdown.jsx
diff --git a/src/components/shared/Markdown/Markdown.tsx b/src/components/shared/Markdown/Markdown.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import styles from "./markdown.module.scss";
+import Tenant from "@/lib/tenant/tenant";
+import cn from "classnames";
+
+const defaults = {
+  primary: "23 23 23",
+  secondary: "64 64 64",
+  tertiary: "115 115 115",
+  neutral: "255 255 255",
+  wash: "250 250 250",
+  line: "229 229 229",
+  positive: "0 153 43",
+  negative: "197 47 0",
+  brandPrimary: "23 23 23",
+  brandSecondary: "255 255 255",
+  font: "var(--font-inter)",
+};
+
+const toRGBA = (hex: string, alpha: number) => {
+  return `rgba(${hex
+    .split(" ")
+    .map((n) => parseInt(n, 10))
+    .join(",")}, ${alpha})`;
+};
+
+export default function Markdown({ content }: { content: string }) {
+  const { ui } = Tenant.current();
+  const primary = ui?.customization?.primary ?? defaults.primary;
+  const secondary = ui?.customization?.secondary ?? defaults.secondary;
+  const tertiary = ui?.customization?.tertiary ?? defaults.tertiary;
+  const line = ui?.customization?.line ?? defaults.line;
+  const positive = ui?.customization?.positive ?? defaults.positive;
+  return (
+    <div className={cn(styles.proposal_description_md, "max-w-full")}>
+      <MarkdownPreview
+        source={content}
+        style={
+          {
+            "--color-fg-default": toRGBA(secondary, 1),
+            "--color-canvas-default": toRGBA(primary, 0),
+            "--color-border-default": toRGBA(line, 1),
+            "--color-border-muted": toRGBA(line, 1),
+            "--color-canvas-subtle": toRGBA(tertiary, 0.05),
+            "--color-prettylights-syntax-entity-tag": toRGBA(positive, 1),
+            fontFamily: ui?.customization?.font ?? defaults.font,
+          } as React.CSSProperties
+        }
+        className={`h-full py-3 max-w-full bg-transparent prose prose-code:bg-wash prose-code:text-primary`}
+        wrapperElement={{
+          "data-color-mode": "light",
+        }}
+      />
+    </div>
+  );
+}