Refactor title function to new component

+ Use it in portfolio and pickstocks

src/Components/PortfolioManager/PortfolioManager.css

@@ -0,0 +1,13 @@
+.portfolio-manager {
+    margin: 2em 0;
+}
+
+.portfolio-manager .section-title .title-box {
+    color: #FFFFFF;
+    background-color: #287DCE;
+    box-shadow: .35em .35em rgba(0, 0, 0, 0.1);
+}
+
+.portfolio-manager .section-title .title-tail {
+    border-top: 1.5em solid #15569C;
+}

src/Components/PortfolioManager/PortfolioManager.jsx

@@ -1,8 +1,13 @@
 /* eslint-disable react/prefer-stateless-function */
 import React, { Component } from 'react';
 import './PortfolioManager.css';
+import { SectionTitle } from '../SectionTitle';
 
 class PortfolioManager extends Component {
+  constructor() {
+    super();
+  }
+
   render() {
     const portfolioScripPrices = this.props.portfolioScripPrices;
 
@@ -15,6 +20,8 @@ class PortfolioManager extends Component {
           this.props.addScripToPortfolio(scripName);
         }}
       >
+        <SectionTitle titleText="Manage Portfolio" />
+
         <div className="drop-block" style={{ width: '100%', height: '500px', border: '1px solid black' }} />
         Please drop here
         <ul>

src/Components/SectionTitle/SectionTitle.css

@@ -0,0 +1,19 @@
+.section-title {
+    position: relative;
+}
+
+.section-title .title-box {
+    display: inline-block;
+    font-size: 1em;
+    padding: 1em 1.25em;
+}
+
+.section-title .title-tail {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 1em;
+    height: 1.5em;
+    border-top: 1.5em solid transparent;
+    border-left: 1em solid transparent;
+}

src/Components/SectionTitle/SectionTitle.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import './SectionTitle.css';
+
+function SectionTitle(props) {
+  return (
+    <div className="section-title">
+      <div className="title-box">
+        {props.titleText.toUpperCase()}
+      </div>
+      <div className="title-tail" />
+    </div>
+  );
+}
+
+export { SectionTitle };

src/Components/SectionTitle/index.jsx

@@ -0,0 +1 @@
+export { SectionTitle } from './SectionTitle';

src/Components/StockPicker/StockPicker.css

@@ -1,24 +1,15 @@
-.stock-picker .title {
+.stock-picker {
-  position: relative;
+  margin: 2em 0;
-  font-size: 1em;
-  color: #FFFFFF;
 }
 
-.stock-picker .title .title-box {
+.stock-picker .section-title .title-box {
-  display: inline-block;
+  color: #FFFFFF;
-  padding: 1em 1.25em;
   background-color: #00B3D6;
   box-shadow: .35em .35em rgba(0, 0, 0, 0.1);
 }
 
-.stock-picker .title .title-tail {
+.stock-picker .section-title .title-tail {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 1em;
-  height: 1.5em;
   border-top: 1.5em solid #098DAD;
-  border-left: 1em solid transparent;
 }
 
 .stock-picker .body {
@@ -112,7 +103,7 @@
   visibility: hidden;
 }
 
-.stock-picker .page-nav{
+.stock-picker .page-nav {
   width: 100%;
 }
 

src/Components/StockPicker/StockPicker.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prefer-stateless-function */
 import React, { Component } from 'react';
 import './StockPicker.css';
+import { SectionTitle } from '../SectionTitle';
 
 class StockPicker extends Component {
   constructor() {
@@ -75,16 +76,6 @@ class StockPicker extends Component {
     return currentPageScripPrices;
   }
 
-  static renderTitle() {
-    return (
-      <div className="title">
-        <div className="title-box">
-          PICK STOCKS
-        </div>
-        <div className="title-tail" />
-      </div>
-    );
-  }
 
   renderScripBoxes() {
     const currentPageScripPrices = this.getCurrentPageScripPrices();
@@ -161,7 +152,7 @@ class StockPicker extends Component {
 
     return (
       <div className="stock-picker">
-        {StockPicker.renderTitle()}
+        <SectionTitle titleText="Pick Stocks" />
         <div className="body">
           <div className="page-description">
             {