feat: use sublabel component in all forms

decentraland · Jun 20, 2023 · f9163f7 · f9163f7
1 parent 034cda6
commit f9163f7
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 133 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,28 +7,39 @@ 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({
   children,
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"