From 450481b3bf5074d5194e312a4fe268c25b9fb7ce Mon Sep 17 00:00:00 2001
From: Fabian Eichhorner <fabian.eichhorner@gmail.com>
Date: Sun, 20 Jan 2019 20:48:49 +0100
Subject: [PATCH] updated design

---
 service-website/src/components/PdfReport.js | 32 +++++++++++++++------
 service-website/src/index.scss              |  9 +++++-
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/service-website/src/components/PdfReport.js b/service-website/src/components/PdfReport.js
index 3a1c63c..433475b 100644
--- a/service-website/src/components/PdfReport.js
+++ b/service-website/src/components/PdfReport.js
@@ -1,21 +1,37 @@
 import React from "react";
 import PropTypes from "prop-types";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faFilePdf} from '@fortawesome/free-solid-svg-icons';
 
 const PdfReport = ({pdfLink, loading}) => {
     if (pdfLink) {
         return (
-            <div className="pdf-report">
-                <a href={pdfLink} target="_blank" rel="noopener noreferrer">Download PDF report</a>
+            <div id="pdfDownloadContainer" className="file has-name is-boxed">
+                <a className="file-label" href={pdfLink} target="_blank" rel="noopener noreferrer">
+                    <span className="file-cta">
+                        <span className="file-icon has-text-link has-text-danger" id="pdfDownloadIcon" >
+                                <FontAwesomeIcon icon={faFilePdf} size="3x"/>
+                        </span>
+                        <span className="file-label">
+                            Click to download
+                        </span>
+                    </span>
+                    <span className="file-name">
+                        Report created successfully
+                    </span>
+                </a>
             </div>
         );
     } else if (loading){
         return (
-            <div className="spinner">
-                <div className="rect1 has-background-info"></div>
-                <div className="rect2 has-background-info"></div>
-                <div className="rect3 has-background-info"></div>
-                <div className="rect4 has-background-info"></div>
-                <div className="rect5 has-background-info"></div>
+            <div id="pdfDownloadContainer">
+                <div className="spinner is-pulled-left">
+                    <div className="rect1 has-background-info"></div>
+                    <div className="rect2 has-background-info"></div>
+                    <div className="rect3 has-background-info"></div>
+                    <div className="rect4 has-background-info"></div>
+                    <div className="rect5 has-background-info"></div>
+                </div>
             </div>
         );
     } else {
diff --git a/service-website/src/index.scss b/service-website/src/index.scss
index f4933fd..50f41a5 100755
--- a/service-website/src/index.scss
+++ b/service-website/src/index.scss
@@ -31,7 +31,6 @@ footer {
 }
 
 .spinner {
-  margin: 100px auto;
   height: 3em;
   text-align: center;
   font-size: 10px;
@@ -81,4 +80,12 @@ footer {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
   }
+}
+
+#pdfDownloadContainer{
+  margin-top: 5em;
+}
+
+#pdfDownloadIcon{
+  margin: 3em;
 }
\ No newline at end of file
-- 
2.43.0