Merge branch 'master' into refactor/1030-react-intl

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

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;

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 { HiringType, PoiType, ProposalType, isHiringType } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { navigate } from '../../utils/locations'
+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 className="CategoryBanner__Title" 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>

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 isNumber from 'lodash/isNumber'
 import toSnakeCase from 'lodash/snakeCase'
 
@@ -12,6 +11,7 @@ import { ProposalType, toProposalType } from '../../entities/Proposal/types'
 import { CategoryIconVariant } from '../../helpers/styles'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { navigate } from '../../utils/locations'
+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

src/components/Common/ArticleSectionHeading.css

@@ -0,0 +1,7 @@
+.ArticleSectionHeading {
+  margin-bottom: 1rem;
+  font-size: 13px;
+  color: var(--black-600);
+  font-weight: 600;
+  text-transform: uppercase;
+}

src/components/Common/ArticleSectionHeading.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import './ArticleSectionHeading.css'
+
+interface Props {
+  children: React.ReactText
+}
+
+export default function ArticleSectionHeading({ children }: Props) {
+  return <h2 className="ArticleSectionHeading">{children}</h2>
+}

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);
 }

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

src/components/Common/Text/Text.css

@@ -0,0 +1,52 @@
+.Text {
+  font-stretch: 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);
+}
+
+.Text.Text--style-normal {
+  font-style: normal;
+}
+.Text.Text--style-italic {
+  font-style: italic;
+}

src/components/Common/Text/Text.tsx

@@ -0,0 +1,47 @@
+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'
+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
+  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',
+        `Text--size-${size}`,
+        `Text--weight-${weight}`,
+        `Text--color-${color}`,
+        `Text--style-${style}`,
+        className
+      )}
+    >
+      {children}
+    </p>
+  )
+}

src/components/Debug/BudgetsUpdate.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 
 import { TransparencyBudget } from '../../clients/DclData'
 import { Governance } from '../../clients/Governance'
 import { QuarterBudgetAttributes } from '../../entities/QuarterBudget/types'
+import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import MarkdownField from '../Form/MarkdownField'
 import { ContentSection } from '../Layout/ContentLayout'

src/components/Debug/EnvStatus.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
@@ -18,6 +17,7 @@ import {
   SEGMENT_KEY,
   TEST_ENV_VAR,
 } from '../../constants'
+import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import { ContentSection } from '../Layout/ContentLayout'
 

src/components/Debug/ErrorReporting.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
 import { Governance } from '../../clients/Governance'
+import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import { ContentSection } from '../Layout/ContentLayout'
 

src/components/Debug/HttpStatus.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
 import { HttpStat } from '../../clients/HttpStat'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import { ContentSection } from '../Layout/ContentLayout'
 

src/components/Debug/SnapshotStatus.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
 import { SNAPSHOT_SPACE } from '../../entities/Snapshot/constants'
 import { getSnapshotStatusAndSpace } from '../../entities/Snapshot/utils'
+import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import MarkdownField from '../Form/MarkdownField'
 import { ContentSection } from '../Layout/ContentLayout'

src/components/Form/MarkdownField.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import Label from 'decentraland-gatsby/dist/components/Form/Label'
 import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
 import { TextareaProps } from 'decentraland-gatsby/dist/components/Form/Textarea'
 
+import Label from '../Common/Label'
 import { ContentSection } from '../Layout/ContentLayout'
 
 import MarkdownNotice from './MarkdownNotice'

src/components/Layout/BurgerMenu/BurgerMenuContent.tsx

@@ -26,7 +26,7 @@ export type BurgerMenuContentProps = NavigationProps & {
 
 const filtersInitialStatus = { categoryOpen: true, statusOpen: false, timeFrameOpen: false }
 
-const OPEN_BURGER_HEIGHT = 740
+const OPEN_BURGER_HEIGHT = 860
 const SEARCH_TITLE_HEIGHT = 32
 const CATEGORY_FILTER_HEIGHT = 407
 const STATUS_FILTER_HEIGHT = 290

src/components/Layout/Navigation.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
 import { Popup } from 'decentraland-ui/dist/components/Popup/Popup'
 import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
 
@@ -46,6 +47,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
     isDismissClicked: false,
     isPopUpDismissed: false,
   })
+  const isMobile = useMobileMediaQuery()
 
   useEffect(
     () =>
@@ -101,7 +103,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
                     {showDot && <Dot />}
                   </Tabs.Tab>
                 }
-                open={showDot && !dismissState.isPopUpDismissed}
+                open={!isMobile && showDot && !dismissState.isPopUpDismissed}
               />
             </Link>
           )}

src/components/Modal/AddRemoveProposalModal/AddRemoveProposalModal.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import Paragraph from 'decentraland-gatsby/dist/components/Text/Paragraph'
 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 useFormatMessage from '../../../hooks/useFormatMessage'
 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">