Hotfix/improvements

example/src/pages/LandingPage.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Typography, HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import { HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import Typography from '@material-ui/core/Typography'
 import { Grid, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsksmart/rif-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Exposes common components to be re used in RIF projects",
   "keywords": [
     "RIF",

src/components/atoms/atoms.test.tsx

@@ -1,5 +1,5 @@
 import {
-  Button, Checkbox, LoginOption, Logo, LogoNavbar, Typography,
+  Button, Checkbox, LoginOption, Logo, LogoNavbar,
 } from '.'
 
 describe('Button component sanity', () => {
@@ -31,9 +31,3 @@ describe('LogoNavbar component sanity', () => {
     expect(LogoNavbar).toBeTruthy()
   })
 })
-
-describe('Typography component sanity', () => {
-  it('is truthy', () => {
-    expect(Typography).toBeTruthy()
-  })
-})

src/components/atoms/index.ts

@@ -5,7 +5,6 @@ import Logo from './Logo'
 import LogoNavbar from './LogoNavbar'
 import StyledNavTab from './StyledNavTab'
 import NetworkIndicator from './NetworkIndicator'
-import Typography from './Typography'
 
 export * from './modal'
 
@@ -17,5 +16,4 @@ export {
   LogoNavbar,
   StyledNavTab,
   NetworkIndicator,
-  Typography,
 }

src/components/atoms/modal/ModalTitle.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Typography from '../Typography'
+import Typography from '@material-ui/core/Typography'
 
 export interface ModalTitleProps {
   className?: string

src/components/molecules/Accordion.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react'
 import { Accordion as MUIAccordion, AccordionProps as MUIAccordionProps } from '@material-ui/core'
+import Typography from '@material-ui/core/Typography'
 import AccordionDetails from '@material-ui/core/AccordionDetails'
 import AccordionSummary from '@material-ui/core/AccordionSummary'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import { Typography } from '../atoms'
 import { colors } from '../../theme'
 
 interface AccordionProps extends MUIAccordionProps {
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   heading: {
     color: colors.gray4,
     fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightBold,
+    fontWeight: theme.typography.fontWeightRegular,
     width: '100%',
   },
   accordionSummary: {

src/components/molecules/CopyTextTooltip.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react'
 import Tooltip from '@material-ui/core/Tooltip'
-import { Typography, makeStyles } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
+import Typography from '@material-ui/core/Typography'
 
 export interface CopyTextTooltipProps {
   displayElement: React.ReactElement

src/components/molecules/FAQSection.tsx

@@ -1,9 +1,11 @@
 import React, { FC, useState } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Accordion, AccordionDetails, AccordionSummary } from '@material-ui/core'
+import Accordion from '@material-ui/core/Accordion'
+import AccordionDetails from '@material-ui/core/AccordionDetails'
+import AccordionSummary from '@material-ui/core/AccordionSummary'
+import Typography from '@material-ui/core/Typography'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
-import { Typography } from '../atoms'
 import { colors, fonts } from '../../theme'
 
 export interface FAQSectionProps {
@@ -30,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: colors.primary,
   },
   headingCollapsed: {
-    fontWeight: fonts.weight.lightBold,
+    fontWeight: fonts.weight.regular,
   },
   panelDetails: {
     display: 'flex',

src/components/molecules/FilterCheckboxCard.tsx

@@ -4,7 +4,7 @@ import LabeledCheckbox, { LabeledCheckboxProps } from './LabeledCheckbox'
 export interface FilterCheckboxCardProps {
   className?: string
   items: LabeledCheckboxProps[]
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
 }
 
 const FilterCheckboxCard: FC<FilterCheckboxCardProps> = ({ className = '', onClick, items }) => (

src/components/molecules/FooterColumn.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { NavLinkProps, NavLink } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 import { removeEmptySpaces } from '../../utils'
 
@@ -24,10 +24,10 @@ const useStyles = makeStyles(() => ({
   },
   footerLink: {
     color: colors.gray4,
-    fontWeight: fonts.weight.normal,
+    fontWeight: fonts.weight.light,
     textDecoration: 'none',
     '&:hover': {
-      fontWeight: fonts.weight.lightBold,
+      fontWeight: fonts.weight.regular,
     },
   },
   footerTitle: {

src/components/molecules/RangeSliderWithInputs.tsx

@@ -1,9 +1,10 @@
 import Slider, { SliderProps } from '@material-ui/core/Slider'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { FC } from 'react'
+import Typography from '@material-ui/core/Typography'
 import UnitsInput from './UnitsInput'
-import { Typography } from '../atoms'
 import { validatedNumber } from '../../utils'
+import { fonts } from '../../theme'
 
 export interface RangeSliderWithInputsProps extends SliderProps {
   values: {
@@ -30,6 +31,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     justifyContent: 'center',
     width: '100%',
+    fontWeight: fonts.weight.regular,
   },
 }))
 
@@ -101,7 +103,7 @@ const RangeSliderWithInputs: FC<RangeSliderWithInputsProps> = ({
           {...getCommonInputValues()}
           value={startValue}
         />
-        <Typography className={classes.toContainer} weight="bold">
+        <Typography className={classes.toContainer}>
           to
         </Typography>
         <UnitsInput

src/components/molecules/SwitchTabs.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles(() => ({
     },
     borderRadius: 50,
     color: colors.gray3,
-    fontWeight: fonts.weight.normal,
+    fontWeight: fonts.weight.light,
     maxWidth: '50%',
     minHeight: '100%',
     minWidth: '50%',

src/components/molecules/UnitsInput.tsx

@@ -1,9 +1,8 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Grid, Input, InputProps } from '@material-ui/core'
-import {
-  Typography,
-} from '../atoms'
+import Input, { InputProps } from '@material-ui/core/Input'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 
 export interface UnitsInputProps extends InputProps {

src/components/organisms/Account.tsx

@@ -2,9 +2,10 @@ import React, { FC, useState, useEffect } from 'react'
 import Web3 from 'web3'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import Popover from '@material-ui/core/Popover'
+import Typography from '@material-ui/core/Typography'
 import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
 import { shortenString } from '../../utils'
-import { Button, NetworkIndicator, Typography } from '../atoms'
+import { Button, NetworkIndicator } from '../atoms'
 import { colors, fonts } from '../../theme'
 import { AccountModal, WrongNetworkModal } from '../molecules'
 import ConnectionStatus from '../../models/Enums'

src/components/organisms/Footer.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react'
 import { Grid } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import FooterColumn, { FooterColumnProps } from '../molecules/FooterColumn'
 import { colors, fonts } from '../../theme'
 import { logoBlackAndBlue } from '../../assets/images'

src/components/organisms/Header/HeaderDesktop.tsx

@@ -2,15 +2,16 @@ import React, { FC } from 'react'
 import { AppBar, Toolbar } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import { NavLink } from 'react-router-dom'
-import { LogoNavbar, Typography } from '../../atoms'
+import Typography from '@material-ui/core/Typography'
+import { LogoNavbar } from '../../atoms'
 import { colors, fonts, globalConstants } from '../../../theme'
 import { HeaderProps, HeaderItemProps } from './HeaderProps'
 import { removeEmptySpaces } from '../../../utils'
 
 const useStyles = makeStyles((theme: Theme) => ({
   activeNavlink: {
     color: `${colors.white} !important`,
-    fontWeight: fonts.weight.lightBold,
+    fontWeight: fonts.weight.medium,
   },
   itemsContainer: {
     display: 'flex',

src/components/organisms/Header/HeaderTongue.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../../atoms'
-import { colors } from '../../../theme'
+import Typography from '@material-ui/core/Typography'
+import { colors, fonts } from '../../../theme'
 import { headerTongueImg } from '../../../assets/images'
 
 export interface HeaderTongueProps {
@@ -36,6 +36,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   titleContent: {
     marginBottom: theme.spacing(1),
     fontSize: theme.spacing(5),
+    fontWeight: fonts.weight.regular,
   },
   tongueImg: {
     width: '100%',
@@ -54,7 +55,6 @@ const HeaderTongue: FC<HeaderTongueProps> = (
           <Typography
             className={classes.titleContent}
             variant="h3"
-            weight="lightBold"
           >
             {titleLine1}
             <br />

src/components/templates/FAQPageTemplate.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
 import FAQSection, { FAQSectionProps } from '../molecules/FAQSection'
 import { colors } from '../../theme'
-import { Typography } from '../atoms'
 import { removeEmptySpaces } from '../../utils'
 
 export interface FAQPageTemplateProps {

src/theme/theme.ts

@@ -26,10 +26,10 @@ export const fonts = {
     subtitleBig: 22,
   },
   weight: {
-    normal: 300,
-    lightBold: 500,
+    light: 300,
+    regular: 400,
+    medium: 500,
     bold: 700,
-    superBold: 900,
   },
 }
 
@@ -51,14 +51,19 @@ const theme = createMuiTheme({
     button: {
       textTransform: 'none',
     },
-    fontWeightRegular: fonts.weight.normal,
-  },
-  props: {
+    fontWeightLight: fonts.weight.light,
+    fontWeightRegular: fonts.weight.regular,
+    fontWeightMedium: fonts.weight.medium,
+    fontWeightBold: fonts.weight.bold,
+    body1: {
+      fontWeight: fonts.weight.light,
+    },
   },
+  props: {},
   overrides: {
     MuiButton: {
       root: {
-        fontWeight: fonts.weight.normal,
+        fontWeight: fonts.weight.light,
       },
     },
     MuiFormControlLabel: {