feat: typography component

src/v2/components/Applications/index.jsx

@@ -5,6 +5,8 @@ import {observer} from 'mobx-react-lite';
 import HelpLink from 'v2/components/HelpLink';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import ApplicationsTimelineStore from 'v2/stores/applications/timeline';
+import formatNum from 'v2/utils/formatNum';
+import CTypography from 'v2/components/UI/CTypography';
 import Table from './Table';
 import useStyles from './styles';
 import {Link, Match} from 'react-router-dom';
@@ -35,7 +37,9 @@ const ApplicationsPage = ({match}: {match: Match}) => {
     <Container>
       <SectionHeader title="Applications">
         <HelpLink text="" term="" />
-        <div className={classes.totalApplications}>{applicationCount}</div>
+        <CTypography type="caption" className={classes.total}>
+          {formatNum(applicationCount)}
+        </CTypography>
       </SectionHeader>
       {nav}
       <Table applications={applications} />

src/v2/components/Applications/styles.js

@@ -1,8 +1,8 @@
 import {makeStyles} from '@material-ui/core';
 
 export default makeStyles({
-  totalBlocks: {
+  total: {
     marginRight: 'auto',
-    marginLeft: 100,
+    marginLeft: 15,
   },
 });

src/v2/components/Blocks/Detail/index.jsx

@@ -4,14 +4,14 @@ import {observer} from 'mobx-react-lite';
 import React, {useEffect} from 'react';
 import {map} from 'lodash/fp';
 import {Match} from 'react-router-dom';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import HelpLink from 'v2/components/HelpLink';
 import Mixpanel from 'v2/mixpanel';
 import CopyBtn from 'v2/components/UI/CopyBtn';
 import TransactionsTable from 'v2/components/Transactions/Table';
 import Loader from 'v2/components/UI/Loader';
 import BlockDetailStore from 'v2/stores/blocks/detail';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import ValidatorName from 'v2/components/UI/ValidatorName';
 
 import useStyles from './styles';

src/v2/components/Blocks/index.jsx

@@ -8,6 +8,8 @@ import HelpLink from 'v2/components/HelpLink';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import BlocksTimelineStore from 'v2/stores/blocks/timeline';
 import {Link, Match} from 'react-router-dom';
+import formatNum from 'v2/utils/formatNum';
+import CTypography from 'v2/components/UI/CTypography';
 
 import Table from './Table';
 import useStyles from './styles';
@@ -39,7 +41,9 @@ const BlocksPage = ({match}: {match: Match}) => {
     <Container>
       <SectionHeader title="Blocks">
         <HelpLink text="" term="" />
-        <div className={classes.total}>{blockCount}</div>
+        <CTypography className={classes.total} type="caption">
+          {formatNum(blockCount)}
+        </CTypography>
       </SectionHeader>
       {nav}
       <Table blocks={blocks} />

src/v2/components/Blocks/styles.js

@@ -4,7 +4,7 @@ import getColor from 'v2/utils/getColor';
 export default makeStyles(theme => ({
   total: {
     marginRight: 'auto',
-    marginLeft: 100,
+    marginLeft: 15,
   },
   nav: {
     display: 'flex',

src/v2/components/Transactions/index.jsx

@@ -1,13 +1,15 @@
 // @flow
 import {Container} from '@material-ui/core';
 import React from 'react';
+import {Link, Match} from 'react-router-dom';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import {observer} from 'mobx-react-lite';
 import HelpLink from 'v2/components/HelpLink';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import TransactionsTimelineStore from 'v2/stores/transactions/timeline';
-import {Link, Match} from 'react-router-dom';
+import CTypography from 'v2/components/UI/CTypography';
+import formatNum from '../../utils/formatNum';
 
 import Table from './Table';
 import useStyles from './styles';
@@ -45,7 +47,9 @@ const TransactionsPage = ({match}: {match: Match}) => {
     <Container>
       <SectionHeader title="Transactions">
         <HelpLink text="" term="" />
-        <div className={classes.total}>{transactionCount}</div>
+        <CTypography type="caption" className={classes.total}>
+          {formatNum(transactionCount)}
+        </CTypography>
       </SectionHeader>
       {nav}
       <Table transactions={transactions} />

src/v2/components/Transactions/styles.js

@@ -4,7 +4,7 @@ import getColor from 'v2/utils/getColor';
 export default makeStyles(theme => ({
   total: {
     marginRight: 'auto',
-    marginLeft: 25,
+    marginLeft: 15,
   },
   nav: {
     display: 'flex',

src/v2/components/UI/CTypography/index.jsx

@@ -0,0 +1,18 @@
+//@flow
+import React from 'react';
+import cn from 'classnames';
+
+import useStyles from './styles';
+
+type TypographyProps = {
+  type?: 'caption',
+  className?: string,
+};
+
+const CTypography = ({type = 'text', className, ...props}: TypographyProps) => {
+  const classes = useStyles();
+  const classNames = cn(classes.root, classes[type], className);
+  return <div className={classNames} {...props} />;
+};
+
+export default CTypography;

src/v2/components/UI/CTypography/styles.js

@@ -0,0 +1,13 @@
+import {makeStyles} from '@material-ui/core';
+
+import getColor from '../../../utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {},
+  caption: {
+    letterSpacing: 2.5,
+    color: getColor('caption')(theme),
+    fontSize: 15,
+  },
+  text: {},
+}));

src/v2/components/UI/SectionHeader/styles.js

@@ -17,7 +17,7 @@ export default makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     whiteSpace: 'nowrap',
-    marginRight: 25,
+    marginRight: 5,
     [theme.breakpoints.down('sm')]: {
       whiteSpace: 'normal',
     },

src/v2/theme.js

@@ -24,6 +24,7 @@ export default createMuiTheme({
       pink: '#f71ef4',
       blue: '#2069f6',
       yellow: '#ffc617',
+      caption: '#c4c4c4',
     },
     secondary: {
       main: '#000',

src/v2/utils/formatNum.js

@@ -0,0 +1,4 @@
+export default function formatNum(val) {
+  if (!val) return 0;
+  return val.toLocaleString();
+}