From 212e12a7c572cc8b4de8e1089b33d7bcc113496c Mon Sep 17 00:00:00 2001
From: Fabian Eichhorner <fabian.eichhorner@gmail.com>
Date: Sat, 19 Jan 2019 18:05:14 +0100
Subject: [PATCH] basic styling

---
 service-website/package.json                  |  3 ++
 service-website/src/components/App.js         | 31 ++++++++++++++-----
 service-website/src/components/SearchTerm.js  | 20 ++++++++++--
 .../src/components/SearchTermsInput.js        | 14 ++++++++-
 .../src/components/SentimentAnalysis.js       | 12 +++++--
 5 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/service-website/package.json b/service-website/package.json
index fdd9ee8..b7a8b88 100644
--- a/service-website/package.json
+++ b/service-website/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.12",
+    "@fortawesome/free-solid-svg-icons": "^5.6.3",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "axios": "^0.18.0",
     "immutable": "^4.0.0-rc.12",
     "prop-types": "^15.6.2",
diff --git a/service-website/src/components/App.js b/service-website/src/components/App.js
index f56c1b2..74eaeec 100755
--- a/service-website/src/components/App.js
+++ b/service-website/src/components/App.js
@@ -1,19 +1,34 @@
 import React, {Component} from "react";
 import SentimentAnalysis from "./SentimentAnalysis";
 
+import {Container, Hero, Heading} from "react-bulma-components/full";
+
 class App extends Component {
     render() {
         return (
-            <div className="App">
-                <header>
-                    <span>Sentiment Analysis</span>
-                </header>
-                <main>
+            <div className="App" Style="min-height: 100vh; display:flex; flex-direction:column;">
+                    <Hero color="info">
+                    <Hero.Body>
+                        <Container>
+                        <Heading>Sentiment Analysis</Heading>
+                        <Heading subtitle size={5}>
+                            AIC Project - G6T4
+                        </Heading>
+                        </Container>
+                    </Hero.Body>
+                    </Hero>
+                <main Style="flex: 1">
+                    <Container>
                     <SentimentAnalysis/>
+                    </Container>
                 </main>
-                <footer>
-                    <span>G6T4</span>
-                </footer>
+                <div Style="padding-top:1em; padding-bottom:2em">
+                    <div class="content has-text-centered">
+                        <p>
+                            Docker-based Service Composition by <strong>G6T4</strong>.
+                        </p>
+                    </div>
+                </div>
             </div>
         );
     }
diff --git a/service-website/src/components/SearchTerm.js b/service-website/src/components/SearchTerm.js
index aadda1c..c31a2d6 100644
--- a/service-website/src/components/SearchTerm.js
+++ b/service-website/src/components/SearchTerm.js
@@ -1,5 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { Form, Icon, Button} from "react-bulma-components/full";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrashAlt, faComments } from '@fortawesome/free-solid-svg-icons'
 
 const SearchTerm = ({
                         index,
@@ -24,8 +27,21 @@ const SearchTerm = ({
 
     return (
         <div key={index} className="search-term">
-            <input type="text" value={value} onChange={handleChange}/>
-            <button onClick={handleRemoveTerm}>Remove</button>
+            <Form.Field kind="addons">
+                <Form.Control iconLeft iconRight>
+                    <Form.Input type="text" value={value} onChange={handleChange} placeholder="Enter a term" />
+                    <Icon align="left">
+                        <FontAwesomeIcon icon={faComments} />
+                    </Icon>
+                </Form.Control>
+                <Form.Control>
+                    <Button onClick={handleRemoveTerm} color="danger" outlined>
+                        <Icon align="left">
+                            <FontAwesomeIcon icon={faTrashAlt} />
+                        </Icon>
+                    </Button>
+                </Form.Control>
+            </Form.Field>            
         </div>
     );
 };
diff --git a/service-website/src/components/SearchTermsInput.js b/service-website/src/components/SearchTermsInput.js
index be072db..304f0d5 100644
--- a/service-website/src/components/SearchTermsInput.js
+++ b/service-website/src/components/SearchTermsInput.js
@@ -1,6 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import SearchTerm from "./SearchTerm";
+import {Button, Icon} from "react-bulma-components/full";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {faPlus} from '@fortawesome/free-solid-svg-icons'
 
 const SearchTermsInput = ({
                               terms,
@@ -41,8 +44,17 @@ const SearchTermsInput = ({
 
     return (
         <div className="search-terms-input">
+            <Button onClick={handleAddTerm}>
+                <Icon align="left">
+                    <FontAwesomeIcon icon={faPlus} />
+                </Icon> 
+                <p>Add term</p>
+            </Button>
+            <br/>
+            <br/>
             {createSearchTerms()}
-            <button onClick={handleAddTerm}>Add term</button>
+            <br/>
+            
         </div>
     );
 };
diff --git a/service-website/src/components/SentimentAnalysis.js b/service-website/src/components/SentimentAnalysis.js
index 88b41c7..5e368c4 100644
--- a/service-website/src/components/SentimentAnalysis.js
+++ b/service-website/src/components/SentimentAnalysis.js
@@ -3,6 +3,7 @@ import {Map} from "immutable";
 import PdfReport from "./PdfReport";
 import SearchTermsInput from "./SearchTermsInput";
 import CamundaService from "../services/CamundaService";
+import {Button, Heading, Form} from "react-bulma-components/full";
 
 class SentimentAnalysis extends Component {
     constructor(props, context) {
@@ -76,12 +77,19 @@ class SentimentAnalysis extends Component {
         return (
             <div className="sentiment-analysis">
                 <form onSubmit={this.handleSubmit}>
-                    <label>Search Terms</label>
+                    <Heading size={3} Style="margin-top:1em">Search Terms: </Heading>
                     <SearchTermsInput terms={this.state.terms}
                                       onTermChange={this.handleTermChange}
                                       onAddTerm={this.handleAddTerm}
                                       onRemoveTerm={this.handleRemoveTerm}/>
-                    <input type="submit" value="Submit"/>
+                    <Form.Field kind="group">
+                        <p class="control">
+                            <Button color="info" type="submit" value="Submit">Submit</Button>
+                        </p>
+                        <p class="control">
+                            <Button value="Reset" onClick={this.emptyTerms}>Reset</Button>
+                        </p>
+                    </Form.Field>
                 </form>
                 <PdfReport pdfLink={this.state.pdfLink}/>
             </div>
-- 
2.43.0