From c9d9deccc74b0c68a7ceb1a49eee95d7b6bdb1aa Mon Sep 17 00:00:00 2001
From: Irem Toroslu <irem.toroslu@fau.de>
Date: Sat, 12 Jun 2021 11:29:11 +0200
Subject: [PATCH] reconfiguration of details page

regarding the #106

buttons changed and navbarsize adjusted.
back button added.
mouse cursor changed to hand form point.
---
 .../src/components/details/NavbarComponent.js | 20 +++++---
 frontend/src/components/details/navbar.css    | 47 ++++++++++++++++++-
 .../src/components/header/HeaderComponent.js  |  2 +-
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js
index d2f9c517..be77bdda 100644
--- a/frontend/src/components/details/NavbarComponent.js
+++ b/frontend/src/components/details/NavbarComponent.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import slugs from 'resources/slugs';
+import { Link } from 'react-router-dom';
+
 
 /**
  * a divider Pannel for seperating search compoents and result components
@@ -13,15 +15,21 @@ const NavbarComponent = (props) => {
         return (
             <>
                 <div className='navbar' vertical='center' horizontal='space-between'>
+                    <Link to={{ pathname: slugs.categories }}>
+                        <btn>
+                            <i class="fa fa-chevron-left" aria-hidden="true"/>
+                        </btn>
+                    </Link>
                     <b>{props.scenarioName}</b>
-                    <button href={slugs.details} onClick={props.onExportClicked}>
+                    <pdfbtn href={slugs.details} onClick={props.onExportClicked}>
                         <i className='fa fa-file-pdf-o' aria-hidden='true'></i>
                         Export Pdf
-                    </button>
-
-                    <button href={slugs.details} onClick={props.onCompareClick}>
-                        <i className='fa fa-fw fa-plus-circle' /> Add
-                    </button>
+                    </pdfbtn>
+                    <Link to={{ pathname: slugs.details }} onClick={props.onCompareClick}>
+                        <addbtn>
+                            <i className='fa fa-fw fa-plus-circle' /> Add
+                        </addbtn>
+                    </Link>
                 </div>
             </>
         );
diff --git a/frontend/src/components/details/navbar.css b/frontend/src/components/details/navbar.css
index ad9f397d..8b96e9ff 100644
--- a/frontend/src/components/details/navbar.css
+++ b/frontend/src/components/details/navbar.css
@@ -26,12 +26,57 @@
     color: var(--global--button--text--color);
     text-decoration: none;
     font-size: 20px;
+    width: 5%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: right; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
+/* Navigation links */
+.navbar btn {
+    float: left;
+    padding: 10px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 30px;
+    width: 10%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: left; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
+/* Navigation links */
+.navbar addbtn {
+    float: left;
+    padding: 12px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 22px;
     width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
     text-align: right; /* If you want the text to be centered */
     border-style: none;
 
 }
 
+
+.navbar pdfbtn {
+    float: left;
+    padding: 12px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 22px;
+    width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: left; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
 .navbar b {
     float: left;
     padding: 12px;
@@ -39,7 +84,7 @@
     /* color: var(--global--panel--color); */
     text-decoration: none;
     font-size: 22px;
-    width: 60%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    width: 50%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
     text-align: left; /* If you want the text to be centered */
 }
 
diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
index 29e91d1b..4b5e6d1c 100644
--- a/frontend/src/components/header/HeaderComponent.js
+++ b/frontend/src/components/header/HeaderComponent.js
@@ -84,7 +84,7 @@ function HeaderComponent() {
 
     function UseBack(selected) {
         if (title === 'Details ' && !(selected === undefined)) {
-            return <i class='fa fa-chevron-circle-left' />;
+            // return <i class='fa fa-chevron-left ' />;
         }
         return null;
     }