add styles for instruction text

Author: njons

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["env", "react"],
-  "plugins": ["transform-class-properties"]
+  "plugins": ["transform-class-properties", "babel-plugin-styled-components"]
 }

package-lock.json

@@ -49,6 +49,7 @@
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
+    "babel-plugin-styled-components": "^1.8.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -65,6 +66,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "sass": "^1.14.1",
-    "serve-favicon": "^2.5.0"
+    "serve-favicon": "^2.5.0",
+    "styled-components": "^4.0.2"
   }
 }

package.json

@@ -1,9 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const StyledInstructionH2 = styled.h2`
+  font-family: "Roboto", Helvetica, sans-serif;
+  font-weight: 700;
+`;
 
 export default class InstructionText extends React.Component {
   render() {
-    return <h2 id="revision-title">{this.props.text}</h2>;
+    return (
+      <StyledInstructionH2 id="revision-title">
+        {this.props.text}
+      </StyledInstructionH2>
+    );
   }
 }