feat: Apply monospace fonts

.storybook/config.js

@@ -1,11 +1,12 @@
 import React from "react"
 import { configure, addDecorator } from "@storybook/react"
 import { withKnobs } from "@storybook/addon-knobs"
-import { ThemeProvider } from "styled-components"
+
+import ReactotronProvider from "../src/ReactotronProvider"
 
 import theme from "../src/theme"
 
-const StyledDecorator = storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
+const StyledDecorator = storyFn => <ReactotronProvider>{storyFn()}</ReactotronProvider>
 addDecorator(StyledDecorator)
 
 addDecorator(withKnobs)

src/ReactotronProvider/index.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react"
+import styled, { ThemeProvider } from "styled-components"
+
+import theme from "../theme"
+
+const ReactotronContainer = styled.div`
+  font-family: ${props => props.theme.fontFamily};
+  width: 100%;
+  height: 100%;
+`
+
+const ReactotronProvider: FunctionComponent = ({ children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <ReactotronContainer>{children}</ReactotronContainer>
+    </ThemeProvider>
+  )
+}
+
+export default ReactotronProvider;

src/index.ts

@@ -6,6 +6,7 @@ import ContentView from "./ContentView"
 import DispatchActionModal from "./DispatchActionModal"
 import Header from "./Header"
 import Modal from "./Modal"
+import ReactotronProvider from "./ReactotronProvider"
 import SubscriptionAddModal from "./SubscriptionAddModal"
 import ActionButton from "./ActionButton"
 import TimelineCommand from "./TimelineCommand"
@@ -28,6 +29,7 @@ export {
   DispatchActionModal,
   Header,
   Modal,
+  ReactotronProvider,
   SubscriptionAddModal,
   ActionButton,
   TimelineCommand,

src/theme.ts

@@ -1,4 +1,5 @@
 export default {
+  fontFamily: '"Fira Code", "SF Mono", "Consolas", "Segoe UI", "Roboto", "-apple-system", "Helvetica Neue", sans-serif',
   background: "#1e1e1e",
   backgroundDarker: "hsl(0, 0%, 10.6%)",
   backgroundHighlight: "#464b50",