Header, sidebar and panel componant reconfigured

regarding the #106 Co-authored-by: Martin Wagner <martin.wagner@fau.de>
amosproj · Jun 10, 2021 · dd2fa6e · dd2fa6e
1 parent 5e025d4
commit dd2fa6e
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 38 deletions.
diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js
@@ -3,6 +3,7 @@ import ScenarioComponent from './ScenarioComponent';
 import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
 import { Col, Container, Row } from 'react-grid-system';
+import './navbar.css';
 // import { postCalculationRequest } from 'interface/BackendConnect';
 
 /**

diff --git a/frontend/src/components/details/navbar.css b/frontend/src/components/details/navbar.css
@@ -1,5 +1,3 @@
-@import url('theme.css');
-
 /* Style the navigation menu */
 .navbar {
     width: 100%;

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -1,13 +1,12 @@
 import React, { useContext } from 'react';
 import { string } from 'prop-types';
 import { Row } from 'simple-flexbox';
-import { useTheme } from 'react-jss';
 import { SidebarContext } from 'hooks/useSidebar';
 import SLUGS from 'resources/slugs';
 import { PrivateSectionContext } from 'hooks/PrivateSectionContext';
 import slugs from 'resources/slugs';
 import { Link } from 'react-router-dom';
-import { createUseStyles } from 'react-jss';
+import { createUseStyles,  useTheme } from 'react-jss';
 
 /**
  * The Header Component is a shared component between all pages. It displays
@@ -29,6 +28,7 @@ function HeaderComponent() {
     const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
     const [selectedProducts] = useContext(PrivateSectionContext);
     const theme = useTheme();
+    //eslint-disable-next-line 
     const classes = useStyles({ theme });
 
     let title;

diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
@@ -1,10 +1,11 @@
 @import url('theme.css');
-
 /* Reconfiguration of the header bar */
 .HeaderContainer {
-    height: 70;
+    height: 85;
     width: 100%;
-    color: #000000;
+    /* background-color: #4D217A; */
+    background: var(--global--headerbar--color);
+
 }
 /* Reconfiguration of  the title style on the header bar */
 .HeaderTitle {
@@ -15,25 +16,26 @@
     line-height: 16px;
     letter-spacing: 0.5px;
     margin-left: 30px;
-    color: #00b300;
+    color: var( --global--header--title--color);
 }
 /* Reconfiguration of  the icon style on the header bar */
 .HeaderIconSyle {
     font-size: var(--global--header-icon-title--FontSize);
-    color: var(--global--header--color);
+    color: var(--global--header--icon--color);
     padding-right: 100;
     margin-right: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
+
 /* Reconfiguration of  the back icon style on the header bar */
 .HeaderBackIconSyle {
     float: left;
     padding: 12px;
-    background-color: #468c46; /* #466e78;*/
+    background-color: #468c46 ;/* #466e78;*/
     text-decoration: none;
-    font-size: var(--global--header-back-icon-title--FontSize);
+    font-size: var( --global--header-back-icon-title--FontSize);
     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;
@@ -48,7 +50,7 @@
     margin-left: 40;
     letter-spacing: 0.5px;
     line-height: 16px;
-    color: #00b300;
+    color: var(--global--header--icon--color);
     margin-bottom: 15px;
     margin-top: 5px;
-}
+}
diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -66,12 +66,13 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
     return (
         <Column key={id} className={classNameColumn}>
             <Row vertical='center' onClick={onItemClicked} className={classNameContainer}>
-                <div className='SideBarIconStyle' style={{ color: iconColor }}>
-                    <i className={Icon} aria-hidden='true' />
-                </div>
-                <span className='SideBarTitle' style={{ color: iconColor }}>
-                    {title}
-                </span>
+                {/* <Icon fill={iconColor} opacity={!isActive && '0.4'} /> */}
+                <div className='SideBarIconStyle' style={{color:iconColor}}>
+                    <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
@@ -53,9 +53,9 @@ function SidebarComponent({ pageWrapId, outerContainerId }) {
 
     return (
         <Menu   pageWrapId={pageWrapId} outerContainerId={outerContainerId} isMobile={isMobile}>
-            {/* <div className='TeamLogo'>
+            <div className='TeamLogo'>
                 <img alt='' src={logo}/>
-            </div> */}
+            </div>
             <MenuItem
                 id={SLUGS.dashboard}
                 title='My Dashboard'

diff --git a/frontend/src/components/sidebar/sidebar.css b/frontend/src/components/sidebar/sidebar.css
@@ -1,6 +1,4 @@
 @import url('theme.css');
-
-/* Reconfiguration of  the icon style on the side bar */
 .SideBarIconStyle {
     font-family: inherit;
     font-style: normal;
@@ -12,46 +10,59 @@
     letter-spacing: 0.5px;
 }
 
+.SideBarContainer{
+    color:'white';
+    background-color: var(--global--sidebar--color);
+    /* position: 'fixed'; */
+    height: '100%';
+
+}
+
+.SideBarBurgerMenu{
+    background-color:#b5b4b9;
+}
 /* Reconfiguration of  the title style on the side bar */
 .SideBarTitle {
     font-family: inherit;
     font-style: normal;
     font-weight: normal;
     font-size: var(--global--icon-title--FontSize);
     letter-spacing: 0.2px;
-    color: var(--global--header--color);
-    margin-left: 5px;
+    color: var(--global--sidebar--title--color);
+    margin-left: 2px;
 }
 
 /* Reconfiguration of the logo style on sidebar  */
-.TeamLogo {
-    height: fit-content;
+.TeamLogo{
+    height: min-content;
     text-align: center;
     width: fit-content;
-    margin-left: 10px;
-    margin-right: 10px;
-}
+    margin-left:10px;
+    margin-right:10px;
+    padding-top:15px;
+    padding-bottom:30px;
 
-.TeamLogo img {
-    margin-top: 20px;
-    margin-bottom: 20px;
 }
 
-.ActiveContainer {
-    background-color: 'rgba(221, 226, 255, 0.08)';
+.ActiveContainer{
+
+    background-color: 'rgba(221, 226, 255, 0.08)' ;
 }
 
 .MenuContainer {
     display: 'flex';
     height: 40;
     cursor: 'pointer';
-    padding-left: 16px;
+    padding-left: 16px,
 }
 
-.MenuContainer:hover {
-    background-color: 'rgba(221, 226, 255, 0.08)';
+.MenuContainer:hover{
+    background-color:'rgba(221, 226, 255, 0.08)' ;
+
+
 }
 
+
 .SideBarIconStyle:hover {
     color: #00b300;
 }