From 0a491bbbf0481f44eecb6a0eece544b56969bdf7 Mon Sep 17 00:00:00 2001
From: jhunsley <john.hunsley@capgemini.com>
Date: Thu, 21 Mar 2019 14:40:33 +0000
Subject: [PATCH 1/2] Bootstrapped

---
 package.json                                    | 1 +
 src/index.js                                    | 3 ++-
 src/main/components/CurrencyConversionForm.js   | 2 +-
 src/main/components/form/CurrencyAmountInput.js | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index f31a328..207dc1e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"
diff --git a/src/index.js b/src/index.js
index dd75e8f..c8366b0 100755
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import App from './main/App';
 import PrimaryLayout from './main/layouts/PrimaryLayout';
-import './main/styles/styles.css';
+//import './main/styles/styles.css';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(
     <PrimaryLayout>
diff --git a/src/main/components/CurrencyConversionForm.js b/src/main/components/CurrencyConversionForm.js
index 5daec49..83c11db 100644
--- a/src/main/components/CurrencyConversionForm.js
+++ b/src/main/components/CurrencyConversionForm.js
@@ -16,7 +16,7 @@ const CurrencyConversionForm = ({data, handleChange, handleSelect, handleSubmit}
                 currencies={data && data.rates}
                 handleSelect={handleSelect}
             />
-            <button id='convertCurrency' type='submit'>Convert</button>
+            <button class="btn btn-primary" id='convertCurrency' type='submit'>Convert</button>
         </form>
     </div>
 )
diff --git a/src/main/components/form/CurrencyAmountInput.js b/src/main/components/form/CurrencyAmountInput.js
index f606d22..1d78b25 100644
--- a/src/main/components/form/CurrencyAmountInput.js
+++ b/src/main/components/form/CurrencyAmountInput.js
@@ -3,7 +3,7 @@ import React from 'react';
 const CurrencyAmountInput = ({handleChange}) => (
     <div>
         <label htmlFor='amount'>Amount to Convert</label><br/>
-        <input id='amount' type='text' name='amount' onChange={handleChange}/><br/>
+        <input class="form-control" id='amount' type='text' name='amount' onChange={handleChange}/><br/>
     </div>
 )
 

From 0824e3fa8a230f0287b7d890599ac76465ce0713 Mon Sep 17 00:00:00 2001
From: jhunsley <john.hunsley@capgemini.com>
Date: Thu, 21 Mar 2019 15:17:56 +0000
Subject: [PATCH 2/2] Bootstrapped

---
 src/main/components/form/CurrencySelect.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/main/components/form/CurrencySelect.js b/src/main/components/form/CurrencySelect.js
index 19bf763..6f0594a 100644
--- a/src/main/components/form/CurrencySelect.js
+++ b/src/main/components/form/CurrencySelect.js
@@ -10,10 +10,14 @@ const CurrencySelect = ({selectionType, currencies, handleSelect}) => {
 
     return (
         <div className={`${selectionType}Selection`}>
-            <label htmlFor={selectionType}>From</label><br/>
-            <select id={selectionType} onChange={handleSelect}>
-                {currencyOptions}
-            </select><br/>
+            <div className="input-group mb-3">
+                <div className="input-group-prepend">
+                    <label className="input-group-text" htmlFor={selectionType}>From</label>
+                </div>
+                <select className="custom-select" id={selectionType} onChange={handleSelect}>
+                    {currencyOptions}
+                </select>
+            </div>
         </div>
     )
 }