Reconfiguration of the sidebar icons

regarding the issue #78
amosproj · Jun 3, 2021 · 58ce162 · 58ce162
1 parent 69c8911
commit 58ce162
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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;
 
 }