refactor: extract repeated markdowns to ProposalMarkdown

decentraland · Jun 29, 2023 · 655c5f0 · 655c5f0
1 parent fbf28f5
commit 655c5f0
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 48 deletions.
diff --git a/src/components/GrantRequest/BudgetBreakdownView.tsx b/src/components/GrantRequest/BudgetBreakdownView.tsx
@@ -6,8 +6,7 @@ import toNumber from 'lodash/toNumber'
 import { BudgetBreakdownConcept } from '../../entities/Grant/types'
 import { CURRENCY_FORMAT_OPTIONS } from '../../helpers'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import { PROPOSAL_DESCRIPTION_MARKDOWN_STYLES } from '../../pages/proposal'
-import Markdown from '../Common/Typography/Markdown'
+import ProposalMarkdown from '../Proposal/View/ProposalMarkdown'
 
 import BreakdownAccordion, { BreakdownItem } from './BreakdownAccordion'
 
@@ -32,9 +31,7 @@ function BudgetBreakdownView({ breakdown }: Props) {
   )
   return (
     <>
-      <Markdown componentsClassNames={PROPOSAL_DESCRIPTION_MARKDOWN_STYLES}>{`## ${t(
-        'page.proposal_view.grant.breakdown_title'
-      )}`}</Markdown>
+      <ProposalMarkdown text={`## ${t('page.proposal_view.grant.breakdown_title')}`} />
       <BreakdownAccordion items={items} />
     </>
   )

diff --git a/src/components/GrantRequest/PersonnelView.tsx b/src/components/GrantRequest/PersonnelView.tsx
@@ -2,8 +2,7 @@ import React, { useMemo } from 'react'
 
 import { TeamMember } from '../../entities/Grant/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import { PROPOSAL_DESCRIPTION_MARKDOWN_STYLES } from '../../pages/proposal'
-import Markdown from '../Common/Typography/Markdown'
+import ProposalMarkdown from '../Proposal/View/ProposalMarkdown'
 
 import BreakdownAccordion, { BreakdownItem } from './BreakdownAccordion'
 
@@ -25,9 +24,7 @@ function PersonnelView({ members }: Props) {
   )
   return (
     <>
-      <Markdown componentsClassNames={PROPOSAL_DESCRIPTION_MARKDOWN_STYLES}>{`## ${t(
-        'page.proposal_view.grant.personnel_title'
-      )}`}</Markdown>
+      <ProposalMarkdown text={`## ${t('page.proposal_view.grant.personnel_title')}`} />
       <BreakdownAccordion items={items} />
     </>
   )

diff --git a/src/components/Proposal/View/ProposalDescriptionItem.tsx b/src/components/Proposal/View/ProposalDescriptionItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
-import { PROPOSAL_DESCRIPTION_MARKDOWN_STYLES } from '../../../pages/proposal'
-import Markdown from '../../Common/Typography/Markdown'
+import ProposalMarkdown from './ProposalMarkdown'
 
 interface Props {
   title: string
@@ -13,11 +12,11 @@ function ProposalDescriptionItem({ title, body }: Props) {
   const formattedBody = Array.isArray(body) ? body.map((it) => `- ${it}\n`).join('') : body
 
   return (
-    <Markdown componentsClassNames={PROPOSAL_DESCRIPTION_MARKDOWN_STYLES}>
-      {`${formattedTitle}
+    <ProposalMarkdown
+      text={`${formattedTitle}
       
 ${formattedBody}`}
-    </Markdown>
+    />
   )
 }
 

diff --git a/src/components/Proposal/View/ProposalMarkdown.css b/src/components/Proposal/View/ProposalMarkdown.css
@@ -0,0 +1,22 @@
+.ProposalMarkdown__Description__Title {
+  font-size: 13px !important;
+  text-transform: uppercase;
+  font-weight: var(--weight-semi-bold) !important;
+  color: var(--black-600) !important;
+}
+
+.ProposalMarkdown__Description__SubTitle {
+  font-size: 21px !important;
+  font-weight: var(--weight-medium) !important;
+}
+
+.ProposalMarkdown__Description__Text {
+  white-space: pre-line;
+}
+
+.ProposalMarkdown__Description__Text,
+.ProposalMarkdown__Description__ListItem {
+  font-size: 15px !important;
+  font-weight: var(--weight-normal) !important;
+  letter-spacing: 0 !important;
+}
diff --git a/src/components/Proposal/View/ProposalMarkdown.tsx b/src/components/Proposal/View/ProposalMarkdown.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Markdown from '../../Common/Typography/Markdown'
+
+import './ProposalDetailSection.css'
+
+const PROPOSAL_MARKDOWN_STYLES = {
+  h2: 'ProposalMarkdown__Description__Title',
+  h3: 'ProposalMarkdown__Description__SubTitle',
+  p: 'ProposalMarkdown__Description__Text',
+  li: 'ProposalMarkdown__Description__ListItem',
+}
+interface Props {
+  text: string
+}
+
+export default function ProposalMarkdown({ text }: Props) {
+  return <Markdown componentsClassNames={PROPOSAL_MARKDOWN_STYLES}>{text}</Markdown>
+}
diff --git a/src/pages/proposal.css b/src/pages/proposal.css
@@ -22,29 +22,6 @@
   min-height: 24px;
 }
 
-.ProposalDetailPage__Description__Title {
-  font-size: 13px !important;
-  text-transform: uppercase;
-  font-weight: var(--weight-semi-bold) !important;
-  color: var(--black-600) !important;
-}
-
-.ProposalDetailPage__Description__SubTitle {
-  font-size: 21px !important;
-  font-weight: var(--weight-medium) !important;
-}
-
-.ProposalDetailPage__Description__Text {
-  white-space: pre-line;
-}
-
-.ProposalDetailPage__Description__Text,
-.ProposalDetailPage__Description__ListItem {
-  font-size: 15px !important;
-  font-weight: var(--weight-normal) !important;
-  letter-spacing: 0 !important;
-}
-
 .ProposalDetailPage__Description img {
   max-width: 100%;
 }

diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx
@@ -16,7 +16,6 @@ import { ErrorClient } from '../clients/ErrorClient'
 import { Governance } from '../clients/Governance'
 import { SnapshotApi } from '../clients/SnapshotApi'
 import CategoryPill from '../components/Category/CategoryPill'
-import Markdown from '../components/Common/Typography/Markdown'
 import ContentLayout, { ContentSection } from '../components/Layout/ContentLayout'
 import MaintenanceLayout from '../components/Layout/MaintenanceLayout'
 import { DeleteProposalModal } from '../components/Modal/DeleteProposalModal/DeleteProposalModal'
@@ -38,6 +37,7 @@ import GrantProposalView from '../components/Proposal/View/Categories/GrantPropo
 import CompetingTenders from '../components/Proposal/View/CompetingTenders'
 import GovernanceProcess from '../components/Proposal/View/GovernanceProcess'
 import ProposalImagesPreview from '../components/Proposal/View/ProposalImagesPreview'
+import ProposalMarkdown from '../components/Proposal/View/ProposalMarkdown'
 import TenderProposals from '../components/Proposal/View/TenderProposals'
 import StatusPill from '../components/Status/StatusPill'
 import { VOTES_VP_THRESHOLD } from '../constants'
@@ -70,12 +70,6 @@ const EMPTY_VOTE_CHOICE_SELECTION: SelectedVoteChoice = { choice: undefined, cho
 const MAX_ERRORS_BEFORE_SNAPSHOT_REDIRECT = 3
 const SECONDS_FOR_VOTING_RETRY = 5
 const SURVEY_TOPICS_FEATURE_LAUNCH = new Date(2023, 3, 5, 0, 0)
-export const PROPOSAL_DESCRIPTION_MARKDOWN_STYLES = {
-  h2: 'ProposalDetailPage__Description__Title',
-  h3: 'ProposalDetailPage__Description__SubTitle',
-  p: 'ProposalDetailPage__Description__Text',
-  li: 'ProposalDetailPage__Description__ListItem',
-}
 
 export type ProposalPageState = {
   changingVote: boolean
@@ -367,9 +361,7 @@ export default function ProposalPage() {
                 {proposal?.type === ProposalType.Grant ? (
                   <GrantProposalView config={proposal.configuration} />
                 ) : (
-                  <Markdown componentsClassNames={PROPOSAL_DESCRIPTION_MARKDOWN_STYLES}>
-                    {proposal?.description || ''}
-                  </Markdown>
+                  <ProposalMarkdown text={proposal?.description || ''} />
                 )}
               </div>
               {proposal?.type === ProposalType.POI && <ProposalFooterPoi configuration={proposal.configuration} />}