From f9163f7b9ca1cd053cf2047e5832fadfa4e05074 Mon Sep 17 00:00:00 2001
From: Andy Espagnolo <andyespagnolo@gmail.com>
Date: Tue, 20 Jun 2023 12:59:56 -0300
Subject: [PATCH] feat: use sublabel component in all forms

---
 src/components/Category/CategoryBanner.css    |  4 ++
 src/components/Category/CategoryBanner.tsx    |  2 +-
 src/components/Common/SubLabel.css            |  2 +-
 src/components/Common/SubLabel.tsx            |  8 +++-
 src/components/Common/Text/Text.css           |  8 +++-
 src/components/Common/Text/Text.tsx           | 15 ++++++-
 src/components/PostLabel.tsx                  | 15 +++++++
 .../Proposal/Submit/ProposalSubmitPoiPage.tsx |  9 ++--
 src/intl/en.json                              |  2 +-
 src/pages/submit/ban-name.tsx                 |  5 +--
 src/pages/submit/catalyst.tsx                 |  5 +--
 src/pages/submit/draft.tsx                    | 21 +++------
 src/pages/submit/governance.tsx               | 29 ++++--------
 src/pages/submit/linked-wearables.tsx         | 44 +++++--------------
 src/pages/submit/pitch.tsx                    | 20 +++------
 src/pages/submit/poll.tsx                     |  3 --
 src/pages/submit/submit.css                   | 12 -----
 src/pages/submit/tender.tsx                   | 25 +++--------
 18 files changed, 96 insertions(+), 133 deletions(-)
 create mode 100644 src/components/PostLabel.tsx

diff --git a/src/components/Category/CategoryBanner.css b/src/components/Category/CategoryBanner.css
index b47bdf7f2..67a9d85f7 100644
--- a/src/components/Category/CategoryBanner.css
+++ b/src/components/Category/CategoryBanner.css
@@ -33,6 +33,10 @@
   align-items: center;
 }
 
+.CategoryBanner__Title {
+  margin-bottom: 0;
+}
+
 .CategoryBanner__Badge {
   margin-left: 8px;
   border-radius: 4px;
diff --git a/src/components/Category/CategoryBanner.tsx b/src/components/Category/CategoryBanner.tsx
index 89f44e5d9..7bfde6f67 100644
--- a/src/components/Category/CategoryBanner.tsx
+++ b/src/components/Category/CategoryBanner.tsx
@@ -88,7 +88,7 @@ export default function CategoryBanner({ active = true, isNew, type, onClick, hr
       </div>
       <div>
         <div className="CategoryBanner__TitleContainer">
-          <Text size="lg" weight="semi-bold">
+          <Text className="CategoryBanner__Title" size="lg" weight="semi-bold">
             {t(`category.${type}_title`)}
           </Text>
           {isNew && <span className="CategoryBanner__Badge NewBadge">{t(`category.new`)}</span>}
diff --git a/src/components/Common/SubLabel.css b/src/components/Common/SubLabel.css
index 15ce83a84..51c255137 100644
--- a/src/components/Common/SubLabel.css
+++ b/src/components/Common/SubLabel.css
@@ -7,6 +7,6 @@
   font-style: normal;
   font-weight: 400;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 20px !important;
   color: var(--black-600);
 }
diff --git a/src/components/Common/SubLabel.tsx b/src/components/Common/SubLabel.tsx
index 8e024786c..76c7ab19d 100644
--- a/src/components/Common/SubLabel.tsx
+++ b/src/components/Common/SubLabel.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 
+import Text from './Text/Text'
+
 import './SubLabel.css'
 
 interface Props {
@@ -14,7 +16,11 @@ const SubLabel = ({ children, isMarkdown }: Props) => {
     return <Markdown className="SubLabel">{children}</Markdown>
   }
 
-  return <p className="SubLabel">{children}</p>
+  return (
+    <Text weight="semi-bold" color="secondary" className="SubLabel">
+      {children}
+    </Text>
+  )
 }
 
 export default SubLabel
diff --git a/src/components/Common/Text/Text.css b/src/components/Common/Text/Text.css
index efcc7b41f..57d0dd402 100644
--- a/src/components/Common/Text/Text.css
+++ b/src/components/Common/Text/Text.css
@@ -1,6 +1,5 @@
 .Text {
   font-stretch: normal;
-  font-style: normal;
   letter-spacing: 0.3px;
 }
 
@@ -44,3 +43,10 @@
 .Text.Text--color-secondary {
   color: var(--secondary-text);
 }
+
+.Text.Text--style-normal {
+  font-style: normal;
+}
+.Text.Text--style-italic {
+  font-style: italic;
+}
diff --git a/src/components/Common/Text/Text.tsx b/src/components/Common/Text/Text.tsx
index 3647f2e65..400af369c 100644
--- a/src/components/Common/Text/Text.tsx
+++ b/src/components/Common/Text/Text.tsx
@@ -7,16 +7,19 @@ import './Text.css'
 const DEFAULT_COLOR: TextColor = 'default'
 const DEFAULT_FONT_WEIGHT: FontWeight = 'normal'
 const DEFAULT_FONT_SIZE: FontSize = 'md'
+const DEFAULT_FONT_STYLE: FontStyle = 'normal'
 type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 type FontWeight = 'bold' | 'semi-bold' | 'normal'
 type TextColor = 'default' | 'primary' | 'secondary'
+type FontStyle = 'normal' | 'italic'
 
 interface Props {
   children?: React.ReactNode
+  className?: string
   size?: FontSize
   weight?: FontWeight
   color?: TextColor
-  className?: string
+  style?: FontStyle
 }
 
 export default function Text({
@@ -24,11 +27,19 @@ export default function Text({
   size = DEFAULT_FONT_SIZE,
   weight = DEFAULT_FONT_WEIGHT,
   color = DEFAULT_COLOR,
+  style = DEFAULT_FONT_STYLE,
   className,
 }: Props) {
   return (
     <p
-      className={classNames('Text', className, `Text--size-${size}`, `Text--weight-${weight}`, `Text--color-${color}`)}
+      className={classNames(
+        'Text',
+        `Text--size-${size}`,
+        `Text--weight-${weight}`,
+        `Text--color-${color}`,
+        `Text--style-${style}`,
+        className
+      )}
     >
       {children}
     </p>
diff --git a/src/components/PostLabel.tsx b/src/components/PostLabel.tsx
new file mode 100644
index 000000000..226dad587
--- /dev/null
+++ b/src/components/PostLabel.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Text from './Common/Text/Text'
+
+interface Props {
+  children: string
+}
+
+export default function PostLabel({ children }: Props) {
+  return (
+    <Text size="sm" color="secondary" weight="semi-bold" style="italic">
+      {children}
+    </Text>
+  )
+}
diff --git a/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx b/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx
index 1ccbb1273..a51ed69bc 100644
--- a/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx
+++ b/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx
@@ -17,6 +17,7 @@ import locations from '../../../utils/locations'
 import Field from '../../Common/Form/Field'
 import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
+import SubLabel from '../../Common/SubLabel'
 import Text from '../../Common/Text/Text'
 import ErrorMessage from '../../Error/ErrorMessage'
 import MarkdownNotice from '../../Form/MarkdownNotice'
@@ -162,9 +163,7 @@ export default function ProposalSubmitPoiPage({ poiType }: Props) {
         </ContentSection>
         <ContentSection className="CoordinatesField">
           <Label>{t(`page.submit_poi.${action}.coordinates_label`)}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_poi.coordinates_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_poi.coordinates_detail')}</SubLabel>
           <div className="CoordinatesField__Inputs">
             <Field
               control={control}
@@ -212,9 +211,7 @@ export default function ProposalSubmitPoiPage({ poiType }: Props) {
             {t('page.submit_poi.description_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t(`page.submit_poi.${action}.description_detail`)}
-          </Text>
+          <SubLabel>{t(`page.submit_poi.${action}.description_detail`)}</SubLabel>
           <MarkdownField
             control={control}
             name="description"
diff --git a/src/intl/en.json b/src/intl/en.json
index 293e10ea3..eb965c481 100644
--- a/src/intl/en.json
+++ b/src/intl/en.json
@@ -1695,7 +1695,7 @@
       "url_add": "Add another link",
       "programmatically_generated_label": "Is this collection programmatically generated?",
       "programmatically_generated_description": "The collection you will upload to Decentraland as Linked Wearables is programmatically generated. This means the 3D models you will submit to Decentraland were made this way.",
-      "programmatically_generated_note": "_In general, large collections of more than 5k NFTs are not created manually, they are systematically generated from individual traits that were designed individually. If your Linked Wearables Collection is made like this, share the details below._",
+      "programmatically_generated_note": "In general, large collections of more than 5k NFTs are not created manually, they are systematically generated from individual traits that were designed individually. If your Linked Wearables Collection is made like this, share the details below.",
       "method_label": "Method",
       "method_detail": "Describe the method used to create the programmatic collection. If possible, share proof and links to the repository.",
       "method_placeholder": "Describe the method",
diff --git a/src/pages/submit/ban-name.tsx b/src/pages/submit/ban-name.tsx
index 9f9680493..37c46a4af 100644
--- a/src/pages/submit/ban-name.tsx
+++ b/src/pages/submit/ban-name.tsx
@@ -13,6 +13,7 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
@@ -133,9 +134,7 @@ export default function SubmitBanName() {
             {t('page.submit_ban_name.description_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_ban_name.description_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_ban_name.description_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="description"
diff --git a/src/pages/submit/catalyst.tsx b/src/pages/submit/catalyst.tsx
index a122488bd..80d91099e 100644
--- a/src/pages/submit/catalyst.tsx
+++ b/src/pages/submit/catalyst.tsx
@@ -16,6 +16,7 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
@@ -212,9 +213,7 @@ export default function SubmitCatalyst() {
             {t('page.submit_catalyst.description_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_catalyst.description_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_catalyst.description_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="description"
diff --git a/src/pages/submit/draft.tsx b/src/pages/submit/draft.tsx
index ad894f9d2..939ae7103 100644
--- a/src/pages/submit/draft.tsx
+++ b/src/pages/submit/draft.tsx
@@ -15,6 +15,7 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
@@ -158,9 +159,7 @@ export default function SubmitDraftProposal() {
             {t('page.submit_draft.summary_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_draft.summary_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_draft.summary_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="summary"
@@ -192,9 +191,7 @@ export default function SubmitDraftProposal() {
             {t('page.submit_draft.abstract_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_draft.abstract_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_draft.abstract_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="abstract"
@@ -226,9 +223,7 @@ export default function SubmitDraftProposal() {
             {t('page.submit_draft.motivation_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_draft.motivation_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_draft.motivation_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="motivation"
@@ -260,9 +255,7 @@ export default function SubmitDraftProposal() {
             {t('page.submit_draft.specification_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_draft.specification_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_draft.specification_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="specification"
@@ -294,9 +287,7 @@ export default function SubmitDraftProposal() {
             {t('page.submit_draft.conclusion_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_draft.conclusion_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_draft.conclusion_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="conclusion"
diff --git a/src/pages/submit/governance.tsx b/src/pages/submit/governance.tsx
index 79edd803b..e2d3fac49 100644
--- a/src/pages/submit/governance.tsx
+++ b/src/pages/submit/governance.tsx
@@ -16,6 +16,7 @@ import { SelectField } from 'decentraland-ui/dist/components/SelectField/SelectF
 import { Governance } from '../../clients/Governance'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
@@ -181,9 +182,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.summary_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.summary_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.summary_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="summary"
@@ -216,9 +215,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.abstract_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.abstract_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.abstract_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="abstract"
@@ -251,9 +248,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.motivation_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.motivation_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.motivation_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="motivation"
@@ -286,9 +281,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.specification_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.specification_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.specification_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="specification"
@@ -321,9 +314,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.impacts_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.impacts_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.impacts_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="impacts"
@@ -356,9 +347,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.implementation_pathways_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.implementation_pathways_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.implementation_pathways_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="implementation_pathways"
@@ -391,9 +380,7 @@ export default function SubmitGovernanceProposal() {
             {t('page.submit_governance.conclusion_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_governance.conclusion_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_governance.conclusion_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="conclusion"
diff --git a/src/pages/submit/linked-wearables.tsx b/src/pages/submit/linked-wearables.tsx
index f022be3e2..7fe273c87 100644
--- a/src/pages/submit/linked-wearables.tsx
+++ b/src/pages/submit/linked-wearables.tsx
@@ -22,11 +22,13 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
 import ContentLayout, { ContentSection } from '../../components/Layout/ContentLayout'
 import LoadingView from '../../components/Layout/LoadingView'
+import PostLabel from '../../components/PostLabel'
 import CoAuthors from '../../components/Proposal/Submit/CoAuthor/CoAuthors'
 import LogIn from '../../components/User/LogIn'
 import { newProposalLinkedWearablesScheme } from '../../entities/Proposal/types'
@@ -191,9 +193,7 @@ export default function SubmitLinkedWearables() {
     return (
       <ContentSection>
         <Label>{t(`page.submit_linked_wearables.${params.section}_label`)}</Label>
-        <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-          {t(`page.submit_linked_wearables.${params.section}_detail`, detailOptions)}
-        </Text>
+        <SubLabel>{t(`page.submit_linked_wearables.${params.section}_detail`, detailOptions)}</SubLabel>
         {errors && (
           <Text size="lg" color="primary">
             {errors[params.section]?.message}
@@ -329,9 +329,7 @@ export default function SubmitLinkedWearables() {
         </ContentSection>
         <ContentSection>
           <Label>{t('page.submit_linked_wearables.name_label')}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.name_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.name_detail')}</SubLabel>
           <Field
             control={control}
             name="name"
@@ -361,9 +359,7 @@ export default function SubmitLinkedWearables() {
         </ContentSection>
         <ContentSection>
           <Label>{t('page.submit_linked_wearables.marketplace_link_label')}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.marketplace_link_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.marketplace_link_detail')}</SubLabel>
           <Field
             name="marketplace_link"
             control={control}
@@ -388,9 +384,7 @@ export default function SubmitLinkedWearables() {
             {t('page.submit_linked_wearables.nft_collections_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.nft_collections_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.nft_collections_detail')}</SubLabel>
           <MarkdownField
             name="nft_collections"
             control={control}
@@ -423,9 +417,7 @@ export default function SubmitLinkedWearables() {
             {t('page.submit_linked_wearables.motivation_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.motivation_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.motivation_detail')}</SubLabel>
           <MarkdownField
             name="motivation"
             control={control}
@@ -455,9 +447,7 @@ export default function SubmitLinkedWearables() {
         </ContentSection>
         <ContentSection>
           <Label>{t('page.submit_linked_wearables.items_label')}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.items_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.items_detail')}</SubLabel>
           <Field
             control={control}
             type="number"
@@ -487,9 +477,7 @@ export default function SubmitLinkedWearables() {
             {t('page.submit_linked_wearables.governance_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_linked_wearables.governance_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.governance_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="governance"
@@ -521,9 +509,7 @@ export default function SubmitLinkedWearables() {
         {getListSection({ section: 'managers', type: 'address' }, addressValidator)}
         <ContentSection>
           <Label>{t('page.submit_linked_wearables.programmatically_generated_label')}</Label>
-          <Text color="secondary" className="ProgrammaticallyGeneratedLabel">
-            {t('page.submit_linked_wearables.programmatically_generated_description')}
-          </Text>
+          <SubLabel>{t('page.submit_linked_wearables.programmatically_generated_description')}</SubLabel>
           <div className="ProgrammaticallyGeneratedRadioButtons">
             <Radio
               checked={watch('programmatically_generated')}
@@ -544,11 +530,7 @@ export default function SubmitLinkedWearables() {
               onChange={handleProgrammaticallyGeneratedOption}
             />
           </div>
-          <Text color="secondary" className="ProgrammaticallyGeneratedLabel">
-            <Markdown className="tinyMarkdown">
-              {t('page.submit_linked_wearables.programmatically_generated_note') || ''}
-            </Markdown>
-          </Text>
+          <PostLabel>{t('page.submit_linked_wearables.programmatically_generated_note')}</PostLabel>
         </ContentSection>
         {values.programmatically_generated && (
           <ContentSection>
@@ -556,9 +538,7 @@ export default function SubmitLinkedWearables() {
               {t('page.submit_linked_wearables.method_label')}
               <MarkdownNotice />
             </Label>
-            <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-              {t('page.submit_linked_wearables.method_detail')}
-            </Text>
+            <SubLabel>{t('page.submit_linked_wearables.method_detail')}</SubLabel>
             <MarkdownField
               control={control}
               name="method"
diff --git a/src/pages/submit/pitch.tsx b/src/pages/submit/pitch.tsx
index 03525bf94..cd1ccf727 100644
--- a/src/pages/submit/pitch.tsx
+++ b/src/pages/submit/pitch.tsx
@@ -14,11 +14,13 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
 import ContentLayout, { ContentSection } from '../../components/Layout/ContentLayout'
 import LoadingView from '../../components/Layout/LoadingView'
+import PostLabel from '../../components/PostLabel'
 import CoAuthors from '../../components/Proposal/Submit/CoAuthor/CoAuthors'
 import LogIn from '../../components/User/LogIn'
 import { SUBMISSION_THRESHOLD_PITCH } from '../../entities/Proposal/constants'
@@ -130,16 +132,14 @@ export default function SubmitPitchProposal() {
               })
             }
           />
-          <span className="Input__PostLabel">{t('page.submit_pitch.initiative_name_postlabel')}</span>
+          <PostLabel>{t('page.submit_pitch.initiative_name_postlabel')}</PostLabel>
         </ContentSection>
         <ContentSection>
           <Label>
             {t('page.submit_pitch.target_audience_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_pitch.target_audience_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_pitch.target_audience_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="target_audience"
@@ -171,9 +171,7 @@ export default function SubmitPitchProposal() {
             {t('page.submit_pitch.problem_statement_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_pitch.problem_statement_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_pitch.problem_statement_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="problem_statement"
@@ -205,9 +203,7 @@ export default function SubmitPitchProposal() {
             {t('page.submit_pitch.proposed_solution_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_pitch.proposed_solution_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_pitch.proposed_solution_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="proposed_solution"
@@ -239,9 +235,7 @@ export default function SubmitPitchProposal() {
             {t('page.submit_pitch.relevance_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_pitch.relevance_detail')}
-          </Text>
+          <SubLabel>{t('page.submit_pitch.relevance_detail')}</SubLabel>
           <MarkdownField
             control={control}
             name="relevance"
diff --git a/src/pages/submit/poll.tsx b/src/pages/submit/poll.tsx
index d28e2dabe..4051d9cee 100644
--- a/src/pages/submit/poll.tsx
+++ b/src/pages/submit/poll.tsx
@@ -254,9 +254,6 @@ export default function SubmitPoll() {
         </ContentSection>
         <ContentSection>
           <Label>{t('page.submit_poll.choices_label')}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {' '}
-          </Text>
           {errors && (
             <Text size="lg" color="primary">
               {errors.choices?.message}
diff --git a/src/pages/submit/submit.css b/src/pages/submit/submit.css
index ed81e2732..9ae85c63b 100644
--- a/src/pages/submit/submit.css
+++ b/src/pages/submit/submit.css
@@ -34,10 +34,6 @@
   font-size: 15px;
 }
 
-.ProposalSubmit__DescriptionDetails {
-  margin-bottom: 2px;
-}
-
 .ContentLayout .ContentLayout__Section .ui.radio.checkbox label {
   font-size: 17px;
 }
@@ -87,11 +83,3 @@
   gap: 10px;
   margin-bottom: 10px;
 }
-
-.Input__PostLabel {
-  font-style: italic;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 17px;
-  color: var(--black-600);
-}
diff --git a/src/pages/submit/tender.tsx b/src/pages/submit/tender.tsx
index cbdf01039..446f0ab3a 100644
--- a/src/pages/submit/tender.tsx
+++ b/src/pages/submit/tender.tsx
@@ -16,6 +16,7 @@ import { Governance } from '../../clients/Governance'
 import Field from '../../components/Common/Form/Field'
 import MarkdownField from '../../components/Common/Form/MarkdownField'
 import Label from '../../components/Common/Label'
+import SubLabel from '../../components/Common/SubLabel'
 import Text from '../../components/Common/Text/Text'
 import ErrorMessage from '../../components/Error/ErrorMessage'
 import MarkdownNotice from '../../components/Form/MarkdownNotice'
@@ -178,9 +179,7 @@ export default function SubmitTenderProposal() {
             {t('page.submit_tender.summary_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.summary_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.summary_description')}</SubLabel>
           <MarkdownField
             control={control}
             name="summary"
@@ -212,9 +211,7 @@ export default function SubmitTenderProposal() {
             {t('page.submit_tender.problem_statement_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.problem_statement_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.problem_statement_description')}</SubLabel>
           <MarkdownField
             control={control}
             name="problem_statement"
@@ -247,9 +244,7 @@ export default function SubmitTenderProposal() {
             {t('page.submit_tender.technical_specification_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.technical_specification_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.technical_specification_description')}</SubLabel>
           <MarkdownField
             control={control}
             name="technical_specification"
@@ -281,9 +276,7 @@ export default function SubmitTenderProposal() {
             {t('page.submit_tender.use_cases_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.use_cases_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.use_cases_description')}</SubLabel>
           <MarkdownField
             control={control}
             name="use_cases"
@@ -316,9 +309,7 @@ export default function SubmitTenderProposal() {
             {t('page.submit_tender.deliverables_label')}
             <MarkdownNotice />
           </Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.deliverables_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.deliverables_description')}</SubLabel>
           <MarkdownField
             control={control}
             name="deliverables"
@@ -349,9 +340,7 @@ export default function SubmitTenderProposal() {
         </ContentSection>
         <ContentSection>
           <Label>{t('page.submit_tender.target_release_quarter_label')}</Label>
-          <Text color="secondary" className="ProposalSubmit__DescriptionDetails">
-            {t('page.submit_tender.target_release_quarter_description')}
-          </Text>
+          <SubLabel>{t('page.submit_tender.target_release_quarter_description')}</SubLabel>
           <Controller
             control={control}
             name="target_release_quarter"