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