From 1b25de8eff995d926ec7dd470d6cc6f89460f945 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Wed, 11 Apr 2018 12:15:22 +0530
Subject: [PATCH] Refactor title function to new component

+ Use it in portfolio and pickstocks
---
 .../PortfolioManager/PortfolioManager.css     | 13 ++++++++++++
 .../PortfolioManager/PortfolioManager.jsx     |  7 +++++++
 src/Components/SectionTitle/SectionTitle.css  | 19 +++++++++++++++++
 src/Components/SectionTitle/SectionTitle.jsx  | 15 +++++++++++++
 src/Components/SectionTitle/index.jsx         |  1 +
 src/Components/StockPicker/StockPicker.css    | 21 ++++++-------------
 src/Components/StockPicker/StockPicker.jsx    | 13 ++----------
 7 files changed, 63 insertions(+), 26 deletions(-)
 create mode 100644 src/Components/SectionTitle/SectionTitle.css
 create mode 100644 src/Components/SectionTitle/SectionTitle.jsx
 create mode 100644 src/Components/SectionTitle/index.jsx

diff --git a/src/Components/PortfolioManager/PortfolioManager.css b/src/Components/PortfolioManager/PortfolioManager.css
index e69de29..1b97255 100644
--- a/src/Components/PortfolioManager/PortfolioManager.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/Components/PortfolioManager/PortfolioManager.jsx b/src/Components/PortfolioManager/PortfolioManager.jsx
index 058112c..205751a 100644
--- a/src/Components/PortfolioManager/PortfolioManager.jsx
+++ b/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>
diff --git a/src/Components/SectionTitle/SectionTitle.css b/src/Components/SectionTitle/SectionTitle.css
new file mode 100644
index 0000000..09c8850
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/Components/SectionTitle/SectionTitle.jsx b/src/Components/SectionTitle/SectionTitle.jsx
new file mode 100644
index 0000000..06ca02b
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/src/Components/SectionTitle/index.jsx b/src/Components/SectionTitle/index.jsx
new file mode 100644
index 0000000..d9f73ef
--- /dev/null
+++ b/src/Components/SectionTitle/index.jsx
@@ -0,0 +1 @@
+export { SectionTitle } from './SectionTitle';
diff --git a/src/Components/StockPicker/StockPicker.css b/src/Components/StockPicker/StockPicker.css
index 9527433..207e590 100644
--- a/src/Components/StockPicker/StockPicker.css
+++ b/src/Components/StockPicker/StockPicker.css
@@ -1,24 +1,15 @@
-.stock-picker .title {
-  position: relative;
-  font-size: 1em;
-  color: #FFFFFF;
+.stock-picker {
+  margin: 2em 0;
 }
 
-.stock-picker .title .title-box {
-  display: inline-block;
-  padding: 1em 1.25em;
+.stock-picker .section-title .title-box {
+  color: #FFFFFF;
   background-color: #00B3D6;
   box-shadow: .35em .35em rgba(0, 0, 0, 0.1);
 }
 
-.stock-picker .title .title-tail {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 1em;
-  height: 1.5em;
+.stock-picker .section-title .title-tail {
   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%;
 }
 
diff --git a/src/Components/StockPicker/StockPicker.jsx b/src/Components/StockPicker/StockPicker.jsx
index b29b9d7..7452791 100644
--- a/src/Components/StockPicker/StockPicker.jsx
+++ b/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">
             {