Refactor(#240): Created Reset CSS and added local fonts

src/design-tokens/ResetStyles.tsx

@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+import { fontWeight } from '../utils/styles/sizes';
+import { breakpoints } from '../utils/styles/media';
+
+const resetStyles = makeStyles(() => ({
+  '@global': {
+    // eslint-disable-next-line max-len
+    'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
+      fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
+    },
+    strong: {
+      fontWeight: fontWeight.semiBold,
+    },
+    'html, body, #root': {
+      height: '100%',
+    },
+    '.container': {
+      padding: 15,
+      flex: 1,
+
+      [`@media screen and (min-width: ${breakpoints.container}px)`]: {
+        maxWidth: breakpoints.container,
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      },
+    },
+  },
+}));
+
+const ResetStyles: React.FC = ({ children }) => {
+  resetStyles();
+  return <>{children}</>;
+};
+
+export default ResetStyles;

src/design-tokens/StyleBaseline.tsx

@@ -0,0 +1,15 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import React from 'react';
+import 'normalize.css';
+import 'typeface-roboto/index.css';
+
+import ResetCSS from './ResetStyles';
+
+const StyleBaseline: React.FC = () => (
+  <>
+    <CssBaseline />
+    <ResetCSS />
+  </>
+);
+
+export default StyleBaseline;