refactor: replace paragraph (#1031)

* refactor: Text component WIP * refactor: text component v1 * refactor: some replacements * refactor: replace paragraph in SuccessModal * refactor: replace details paragraph * refactor: replace paragraph in submit pages * refactor: replace paragraph small * refactor: replace paragraph tiny * refactor: replace components paragraph * refactor: update paragraphs and css * refactor: remove unused text props * refactor: remove export for text fontsize * refactor: text default props * refactor: remove unnecessary text size --------- Co-authored-by: 1emu <[email protected]>
decentraland · Jun 20, 2023 · 034cda6 · 034cda6
1 parent 6927318
commit 034cda6
Show file tree

Hide file tree

Showing 44 changed files with 330 additions and 285 deletions.
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react'
 
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 
+import Text from '../Common/Text/Text'
+
 import './Banner.css'
 
 export type BannerProps = {
@@ -50,10 +51,10 @@ function Banner({
           <div className="Banner__Icon">{icon}</div>
           <div className="Banner__Content">
             <div className="Banner__Description">
-              <Paragraph small semiBold>
+              <Text size="lg" weight="semi-bold">
                 {title}
-              </Paragraph>
-              <Paragraph tiny>{description}</Paragraph>
+              </Text>
+              <Text>{description}</Text>
             </div>
             <div className="Banner__ButtonContainer">
               <Button

diff --git a/src/components/Category/CategoryBanner.tsx b/src/components/Category/CategoryBanner.tsx
@@ -3,11 +3,11 @@ import React from 'react'
 import classNames from 'classnames'
 import Link from 'decentraland-gatsby/dist/components/Text/Link'
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 
 import { HiringType, PoiType, ProposalType, isHiringType } from '../../entities/Proposal/types'
+import Text from '../Common/Text/Text'
 import AddPoi from '../Icon/ProposalCategories/AddPoi'
 import BanName from '../Icon/ProposalCategories/BanName'
 import Catalyst from '../Icon/ProposalCategories/Catalyst'
@@ -88,17 +88,17 @@ export default function CategoryBanner({ active = true, isNew, type, onClick, hr
       </div>
       <div>
         <div className="CategoryBanner__TitleContainer">
-          <Paragraph small semiBold>
+          <Text size="lg" weight="semi-bold">
             {t(`category.${type}_title`)}
-          </Paragraph>
+          </Text>
           {isNew && <span className="CategoryBanner__Badge NewBadge">{t(`category.new`)}</span>}
           {!active && (
             <span className="CategoryBanner__Badge CategoryBanner__PausedBadge">
               {t(`category.${isHiringType(type) ? 'not_available' : 'paused'}`)}
             </span>
           )}
         </div>
-        <Paragraph tiny>{t(`category.${type}_description`)}</Paragraph>
+        <Text>{t(`category.${type}_description`)}</Text>
         {!active && <Markdown className="CategoryBanner__PausedText">{t(`category.${type}_paused`)}</Markdown>}
       </div>
     </Component>

diff --git a/src/components/Category/CategoryOption.tsx b/src/components/Category/CategoryOption.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useEffect, useMemo, useState } from 'react'
 
 import { useLocation } from '@reach/router'
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { navigate } from 'decentraland-gatsby/dist/plugins/intl'
 import isNumber from 'lodash/isNumber'
@@ -12,6 +11,7 @@ import { NewGrantCategory, SubtypeAlternativeOptions, SubtypeOptions, toGrantSub
 import { getNewGrantsCategoryIcon } from '../../entities/Grant/utils'
 import { ProposalType, toProposalType } from '../../entities/Proposal/types'
 import { CategoryIconVariant } from '../../helpers/styles'
+import Text from '../Common/Text/Text'
 import Arrow from '../Icon/Arrow'
 import All from '../Icon/ProposalCategories/All'
 import Grant from '../Icon/ProposalCategories/Grant'
@@ -125,9 +125,7 @@ export default React.memo(function CategoryOption({
         <span className="CategoryOption__TitleContainer">
           <span>
             {getCategoryIcon(type, CategoryIconVariant.Circled)}
-            <Paragraph tiny semiBold>
-              {t(`category.${type}_title`)}
-            </Paragraph>
+            <Text weight="semi-bold">{t(`category.${type}_title`)}</Text>
           </span>
           {hasSubtypes && (
             <span

diff --git a/src/components/Common/Text/Text.css b/src/components/Common/Text/Text.css
@@ -0,0 +1,46 @@
+.Text {
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: 0.3px;
+}
+
+.Text.Text--size-xs {
+  font-size: 11px;
+  line-height: 16px;
+}
+.Text.Text--size-sm {
+  font-size: 13px;
+  line-height: 18px;
+}
+.Text.Text--size-md {
+  font-size: 15px;
+  line-height: 24px;
+}
+.Text.Text--size-lg {
+  font-size: 17px;
+  line-height: 26px;
+}
+.Text.Text--size-xl {
+  font-size: 21px;
+  line-height: 1.81px;
+}
+
+.Text.Text--weight-normal {
+  font-weight: 300;
+}
+.Text.Text--weight-semi-bold {
+  font-weight: 400;
+}
+.Text.Text--weight-bold {
+  font-weight: 700;
+}
+
+.Text.Text--color-default {
+  color: var(--text);
+}
+.Text.Text--color-primary {
+  color: var(--primary);
+}
+.Text.Text--color-secondary {
+  color: var(--secondary-text);
+}
diff --git a/src/components/Common/Text/Text.tsx b/src/components/Common/Text/Text.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+import classNames from 'classnames'
+
+import './Text.css'
+
+const DEFAULT_COLOR: TextColor = 'default'
+const DEFAULT_FONT_WEIGHT: FontWeight = 'normal'
+const DEFAULT_FONT_SIZE: FontSize = 'md'
+type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+type FontWeight = 'bold' | 'semi-bold' | 'normal'
+type TextColor = 'default' | 'primary' | 'secondary'
+
+interface Props {
+  children?: React.ReactNode
+  size?: FontSize
+  weight?: FontWeight
+  color?: TextColor
+  className?: string
+}
+
+export default function Text({
+  children,
+  size = DEFAULT_FONT_SIZE,
+  weight = DEFAULT_FONT_WEIGHT,
+  color = DEFAULT_COLOR,
+  className,
+}: Props) {
+  return (
+    <p
+      className={classNames('Text', className, `Text--size-${size}`, `Text--weight-${weight}`, `Text--color-${color}`)}
+    >
+      {children}
+    </p>
+  )
+}
diff --git a/src/components/Modal/AddRemoveProposalModal/AddRemoveProposalModal.tsx b/src/components/Modal/AddRemoveProposalModal/AddRemoveProposalModal.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 
 import { HiringType, PoiType } from '../../../entities/Proposal/types'
 import CategoryBanner from '../../Category/CategoryBanner'
+import Text from '../../Common/Text/Text'
 import '../ProposalModal.css'
 
 export type AddRemoveProposalModalProps = ModalProps & {
@@ -37,7 +37,7 @@ export function AddRemoveProposalModal({
       <Modal.Content>
         <div className="ProposalModal__Title">
           <Header>{t(`category.${title}_title`)}</Header>
-          <Paragraph small>{t('modal.poi_proposal.description')}</Paragraph>
+          <Text size="lg">{t('modal.poi_proposal.description')}</Text>
         </div>
       </Modal.Content>
       <div className="ProposalModel__Actions">

diff --git a/src/components/Modal/DeleteProposalModal/DeleteProposalModal.tsx b/src/components/Modal/DeleteProposalModal/DeleteProposalModal.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 
+import Text from '../../Common/Text/Text'
 import '../ProposalModal.css'
 
 export type DeleteProposalModalProps = Omit<ModalProps, 'children'> & {
@@ -28,7 +28,7 @@ export function DeleteProposalModal({ onClickAccept, loading, ...props }: Delete
       <Modal.Content>
         <div className="ProposalModal__Title">
           <Header>{t('modal.delete_proposal.title')}</Header>
-          <Paragraph small>{t('modal.delete_proposal.description')}</Paragraph>
+          <Text size="lg">{t('modal.delete_proposal.description')}</Text>
         </div>
         <div>
           <Button fluid primary onClick={onClickAccept} loading={loading}>

diff --git a/src/components/Modal/DeleteUpdateModal/DeleteUpdateModal.tsx b/src/components/Modal/DeleteUpdateModal/DeleteUpdateModal.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 
+import Text from '../../Common/Text/Text'
 import '../ProposalModal.css'
 
 export type DeleteUpdateModal = Omit<ModalProps, 'children'> & {
@@ -28,7 +28,7 @@ export function DeleteUpdateModal({ onClickAccept, loading, ...props }: DeleteUp
       <Modal.Content>
         <div className="ProposalModal__Title">
           <Header>{t('modal.delete_update.title')}</Header>
-          <Paragraph small>{t('modal.delete_update.description')}</Paragraph>
+          <Text size="lg">{t('modal.delete_update.description')}</Text>
         </div>
         <div>
           <Button fluid primary onClick={onClickAccept} loading={loading}>

diff --git a/src/components/Modal/EditUpdateModal/EditUpdateModal.tsx b/src/components/Modal/EditUpdateModal/EditUpdateModal.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 
+import Text from '../../Common/Text/Text'
 import '../ProposalModal.css'
 
 type Props = Omit<ModalProps, 'children'> & {
@@ -27,7 +27,7 @@ export function EditUpdateModal({ onClickAccept, loading, ...props }: Props) {
       <Modal.Content>
         <div className="ProposalModal__Title">
           <Header>{t('modal.edit_update.title')}</Header>
-          <Paragraph small>{t('modal.edit_update.description')}</Paragraph>
+          <Text size="lg">{t('modal.edit_update.description')}</Text>
         </div>
         <div>
           <Button fluid primary onClick={onClickAccept} loading={loading}>

diff --git a/src/components/Modal/NewsletterSubscriptionModal/NewsletterSubscriptionModal.tsx b/src/components/Modal/NewsletterSubscriptionModal/NewsletterSubscriptionModal.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react'
 
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
@@ -15,6 +14,7 @@ import { Decentraland } from '../../../clients/Decentraland'
 import useAsyncTask from '../../../hooks/useAsyncTask'
 import { ANONYMOUS_USR_SUBSCRIPTION, NEWSLETTER_SUBSCRIPTION_KEY } from '../../Banner/Subscription/SubscriptionBanner'
 import Label from '../../Common/Label'
+import Text from '../../Common/Text/Text'
 import CheckCloud from '../../Icon/CheckCloud'
 import '../ProposalModal.css'
 
@@ -119,10 +119,10 @@ export function NewsletterSubscriptionModal({
         <Modal.Content>
           <div className="ProposalModal__Title">
             <Header>{t('modal.newsletter_subscription.title')}</Header>
-            <Paragraph small className="NewsletterSubscriptionModal__Description">
+            <Text size="lg" className="NewsletterSubscriptionModal__Description">
               {t('modal.newsletter_subscription.description')}
-            </Paragraph>
-            <Paragraph small>{t('modal.newsletter_subscription.description_sub')}</Paragraph>
+            </Text>
+            <Text size="lg">{t('modal.newsletter_subscription.description_sub')}</Text>
           </div>
           <div className="ProposalModal__Form">
             <Label>{t('modal.newsletter_subscription.email_label')}</Label>
@@ -146,10 +146,10 @@ export function NewsletterSubscriptionModal({
         <Modal.Content className="NewsletterSubscriptionModal__Subscribed">
           <CheckCloud />
           <Header>{t('modal.newsletter_subscription.subscribed')}</Header>
-          <Paragraph small className="NewsletterSubscriptionModal__Description">
+          <Text size="lg" className="NewsletterSubscriptionModal__Description">
             {t('modal.newsletter_subscription.thanks')}
-          </Paragraph>
-          <Paragraph small>{t('modal.newsletter_subscription.heads_up')}</Paragraph>
+          </Text>
+          <Text size="lg">{t('modal.newsletter_subscription.heads_up')}</Text>
         </Modal.Content>
       )}
     </Modal>

diff --git a/src/components/Modal/SuccessModal.css b/src/components/Modal/SuccessModal.css
@@ -29,14 +29,10 @@ div.SuccessModal__Banner.CopyLink {
   background-color: #cdf1b8;
 }
 
-.SuccessModal__Banner .dg.Paragraph {
+.SuccessModal__BannerTitle {
   margin-bottom: 0;
 }
 
-.SuccessModal__Banner .dg.Paragraph.Paragraph--tiny {
-  font-size: 15px;
-}
-
 .SuccessModal__Banner .Button {
   position: relative;
   width: auto !important;

diff --git a/src/components/Modal/SuccessModal.tsx b/src/components/Modal/SuccessModal.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react'
 
 import classNames from 'classnames'
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 import useClipboardCopy from 'decentraland-gatsby/dist/hooks/useClipboardCopy'
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
@@ -11,6 +10,7 @@ import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 
 import { JOIN_DISCORD_URL } from '../../entities/Proposal/utils'
 import Time from '../../utils/date/Time'
+import Text from '../Common/Text/Text'
 
 import './ProposalModal.css'
 import './SuccessModal.css'
@@ -51,18 +51,18 @@ export function SuccessModal({
       <Modal.Content>
         <div className="ProposalModal__Title">
           <Header>{title}</Header>
-          <Paragraph small className="SuccessModal__Description">
+          <Text size="lg" className="SuccessModal__Description">
             {description}
-          </Paragraph>
-          <Paragraph small>{t('modal.success.sub')}</Paragraph>
+          </Text>
+          <Text size="lg">{t('modal.success.sub')}</Text>
         </div>
-        {!!linkToForum && (
+        {!!linkToCopy && (
           <div className={classNames('SuccessModal__Banner', 'JoinTheDiscussion')}>
             <div className="Description">
-              <Paragraph small semiBold>
+              <Text size="lg" weight="semi-bold" className="SuccessModal__BannerTitle">
                 {t('modal.success.view_on_forum_title')}
-              </Paragraph>
-              <Paragraph tiny>{t('modal.success.view_on_forum_description')}</Paragraph>
+              </Text>
+              <Text>{t('modal.success.view_on_forum_description')}</Text>
             </div>
             <Button
               className={classNames('Button', 'JoinTheDiscussion')}
@@ -79,10 +79,10 @@ export function SuccessModal({
         )}
         <div className={classNames('SuccessModal__Banner', 'Discord')}>
           <div className="Description">
-            <Paragraph small semiBold>
+            <Text size="lg" weight="semi-bold" className="SuccessModal__BannerTitle">
               {t('modal.success.join_discord_title')}
-            </Paragraph>
-            <Paragraph tiny>{t('modal.success.join_discord_description')}</Paragraph>
+            </Text>
+            <Text>{t('modal.success.join_discord_description')}</Text>
           </div>
           <Button
             className={classNames('Button', 'Discord')}
@@ -98,10 +98,10 @@ export function SuccessModal({
         {!!linkToCopy && (
           <div className={classNames('SuccessModal__Banner', 'CopyLink')}>
             <div className="Description">
-              <Paragraph small semiBold>
+              <Text size="lg" weight="semi-bold" className="SuccessModal__BannerTitle">
                 {t('modal.success.copy_link_title')}
-              </Paragraph>
-              <Paragraph tiny>{t('modal.success.copy_link_description')}</Paragraph>
+              </Text>
+              <Text>{t('modal.success.copy_link_description')}</Text>
             </div>
             <Button
               className={classNames('Button', 'CopyLink')}