From a9121ec0b94c743b288a8bac55372dc96b22c288 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Sun, 13 Oct 2019 19:50:04 -0700
Subject: [PATCH] feat: typography component

---
 src/v2/components/Applications/index.jsx     |  6 +++++-
 src/v2/components/Applications/styles.js     |  4 ++--
 src/v2/components/Blocks/Detail/index.jsx    |  2 +-
 src/v2/components/Blocks/index.jsx           |  6 +++++-
 src/v2/components/Blocks/styles.js           |  2 +-
 src/v2/components/Transactions/index.jsx     |  8 ++++++--
 src/v2/components/Transactions/styles.js     |  2 +-
 src/v2/components/UI/CTypography/index.jsx   | 18 ++++++++++++++++++
 src/v2/components/UI/CTypography/styles.js   | 13 +++++++++++++
 src/v2/components/UI/SectionHeader/styles.js |  2 +-
 src/v2/theme.js                              |  1 +
 src/v2/utils/formatNum.js                    |  4 ++++
 12 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/v2/components/UI/CTypography/index.jsx
 create mode 100644 src/v2/components/UI/CTypography/styles.js
 create mode 100644 src/v2/utils/formatNum.js

diff --git a/src/v2/components/Applications/index.jsx b/src/v2/components/Applications/index.jsx
index 5b04c504..a6a32705 100644
--- a/src/v2/components/Applications/index.jsx
+++ b/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} />
diff --git a/src/v2/components/Applications/styles.js b/src/v2/components/Applications/styles.js
index cd3c612d..0d4e8842 100644
--- a/src/v2/components/Applications/styles.js
+++ b/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,
   },
 });
diff --git a/src/v2/components/Blocks/Detail/index.jsx b/src/v2/components/Blocks/Detail/index.jsx
index 32358d16..61769f74 100644
--- a/src/v2/components/Blocks/Detail/index.jsx
+++ b/src/v2/components/Blocks/Detail/index.jsx
@@ -4,6 +4,7 @@ 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';
@@ -11,7 +12,6 @@ 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';
diff --git a/src/v2/components/Blocks/index.jsx b/src/v2/components/Blocks/index.jsx
index 4d9e2842..d5083bc2 100644
--- a/src/v2/components/Blocks/index.jsx
+++ b/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} />
diff --git a/src/v2/components/Blocks/styles.js b/src/v2/components/Blocks/styles.js
index 73771378..611c52ce 100644
--- a/src/v2/components/Blocks/styles.js
+++ b/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',
diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx
index 17b06860..45369a4d 100644
--- a/src/v2/components/Transactions/index.jsx
+++ b/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} />
diff --git a/src/v2/components/Transactions/styles.js b/src/v2/components/Transactions/styles.js
index 146389ac..611c52ce 100644
--- a/src/v2/components/Transactions/styles.js
+++ b/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',
diff --git a/src/v2/components/UI/CTypography/index.jsx b/src/v2/components/UI/CTypography/index.jsx
new file mode 100644
index 00000000..233856d4
--- /dev/null
+++ b/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;
diff --git a/src/v2/components/UI/CTypography/styles.js b/src/v2/components/UI/CTypography/styles.js
new file mode 100644
index 00000000..15c48d17
--- /dev/null
+++ b/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: {},
+}));
diff --git a/src/v2/components/UI/SectionHeader/styles.js b/src/v2/components/UI/SectionHeader/styles.js
index 74ac54c0..d95707e4 100644
--- a/src/v2/components/UI/SectionHeader/styles.js
+++ b/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',
     },
diff --git a/src/v2/theme.js b/src/v2/theme.js
index f1a473ac..39259aaa 100644
--- a/src/v2/theme.js
+++ b/src/v2/theme.js
@@ -24,6 +24,7 @@ export default createMuiTheme({
       pink: '#f71ef4',
       blue: '#2069f6',
       yellow: '#ffc617',
+      caption: '#c4c4c4',
     },
     secondary: {
       main: '#000',
diff --git a/src/v2/utils/formatNum.js b/src/v2/utils/formatNum.js
new file mode 100644
index 00000000..d23a1f8c
--- /dev/null
+++ b/src/v2/utils/formatNum.js
@@ -0,0 +1,4 @@
+export default function formatNum(val) {
+  if (!val) return 0;
+  return val.toLocaleString();
+}