From 58ce16273e0e6d4d76d37459d2aee801cd279441 Mon Sep 17 00:00:00 2001
From: Irem Toroslu <irem.toroslu@fau.de>
Date: Thu, 3 Jun 2021 22:38:05 +0200
Subject: [PATCH] Reconfiguration of the sidebar icons

regarding the issue #78
---
 .../components/sidebar/MenuItemComponent.js   |  9 ++++----
 .../components/sidebar/SidebarComponent.js    | 23 ++++++++++---------
 frontend/src/index.css                        |  3 ++-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
index 8e485625..47d626a3 100644
--- a/frontend/src/components/sidebar/MenuItemComponent.js
+++ b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -67,11 +67,12 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
         <Column key={id} className={classNameColumn}>
             <Row vertical='center' onClick={onItemClicked} className={classNameContainer}>
                 {/* <Icon fill={iconColor} opacity={!isActive && '0.4'} /> */}
-                <div className='SideBarIconStyle' style={{color:iconColor}}>
-                    <i className={Icon} aria-hidden="true" />
-                    <span className="SideBarTitle" style={{color:iconColor}}>{title}</span>
-                    {/* <Icon fill={iconColor} opacity={!isActive && '0.4'} /> */}
+                <div className='SideBarIconStyle' style={{color:iconColor,fontSize:'20px'}}>
+                    <i className={Icon} aria-hidden="true"/>
                 </div>  
+                <span className="SideBarTitle" style={{color:iconColor}}>{title}</span>
+                    {/* <Icon fill={iconColor} opacity={!isActive && '0.4'} /> */}
+
             </Row>
             {isCollapsible && (
                 <CollapsibleContent expanded={isExpanded}>
diff --git a/frontend/src/components/sidebar/SidebarComponent.js b/frontend/src/components/sidebar/SidebarComponent.js
index 550f4ca7..f8c68488 100644
--- a/frontend/src/components/sidebar/SidebarComponent.js
+++ b/frontend/src/components/sidebar/SidebarComponent.js
@@ -6,6 +6,7 @@ import { convertSlugToUrl } from 'resources/utilities';
 import Menu from './MenuComponent';
 import MenuItem from './MenuItemComponent';
 import logo from 'assets/logo/LogoCarbonteam.png';
+import LoginComponent from 'components/login/LoginComponent';
 
 /**
  * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
@@ -87,28 +88,28 @@ function SidebarComponent() {
                     title='Generation'
                     items={allMenuItems([SLUGS.generation])}
                     level={2}
-                    icon="fa fa-lightbulb-o"
+                    icon="fa fa-power-off"
                     onClick={() => onClick(SLUGS.generation)}
                 >
                     <MenuItem
                         id={SLUGS.generation + SLUGS.products}
                         title='Products'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.generation + SLUGS.products)}
                     />
                     <MenuItem
                         id={SLUGS.generation + SLUGS.solutions}
                         title='Solutions'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.generation + SLUGS.solutions)}
                     />
                     <MenuItem
                         id={SLUGS.generation + SLUGS.services}
                         title='Services'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.generation + SLUGS.services)}
                     />
                 </MenuItem>
@@ -124,21 +125,21 @@ function SidebarComponent() {
                         id={SLUGS.transmission + SLUGS.products}
                         title='Products'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.transmission + SLUGS.products)}
                     />
                     <MenuItem
                         id={SLUGS.transmission + SLUGS.solutions}
                         title='Solutions'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.transmission + SLUGS.solutions)}
                     />
                     <MenuItem
                         id={SLUGS.transmission + SLUGS.services}
                         title='Services'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.transmission + SLUGS.services)}
                     />
                 </MenuItem>
@@ -154,21 +155,21 @@ function SidebarComponent() {
                         id={SLUGS.industrialApplications + SLUGS.products}
                         title='Products'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.industrialApplications + SLUGS.products)}
                     />
                     <MenuItem
                         id={SLUGS.industrialApplications + SLUGS.solutions}
                         title='Solutions'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.industrialApplications + SLUGS.solutions)}
                     />
                     <MenuItem
                         id={SLUGS.industrialApplications + SLUGS.services}
                         title='Services'
                         level={3}
-                        icon="fa fa-genderless"
+                        icon="fa fa-circle"
                         onClick={() => onClick(SLUGS.industrialApplications + SLUGS.services)}
                     />
                 </MenuItem>
@@ -189,7 +190,7 @@ function SidebarComponent() {
                 onClick={() => onClick(SLUGS.settings)}
             />
 
-            <MenuItem id='logout' title='Logout' icon="fa fa-sign-out" onClick={logout} />
+            <MenuItem id='logout' title='Logout' icon="fa fa-sign-out" onClick={LoginComponent} />
         </Menu>
     );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2aa8ea95..ba0210ff 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -230,9 +230,10 @@ body {
 
 /* Reconfiguration of  the icon style on the side bar */
 .SideBarIconStyle{
-    font-size: 20px;
+    font-size: 15px;
     color: #dbdbdb;
     padding-right: 100;
+    margin-bottom: 3px;
     
 }