Worked on the #37, header and navigation bar reconfigured, header fon…

…tsize and style changed
amosproj · May 15, 2021 · 4892f18 · 4892f18
1 parent 09b5d21
commit 4892f18
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 29 deletions.
diff --git a/frontend/src/assets/icons/icon-arrow.js b/frontend/src/assets/icons/icon-arrow.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg  width="16" height="16" fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+<svg  width="20" height="20"  fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
   <path opacity={props.opacity || ''}  d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"
   fill={props.fill || "#9FA2B4"}/>
 </svg>

diff --git a/frontend/src/assets/icons/icon-user.js b/frontend/src/assets/icons/icon-user.js
@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+export default (props) => (
+<svg widht='30' height='30' xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill='none'>
+  <path opacity={props.opacity || ''} fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" 
+  fill={props.fill || "#9FA2B4"}/>
+</svg>
+
+)
diff --git a/frontend/src/assets/icons/index.js b/frontend/src/assets/icons/index.js
@@ -24,6 +24,7 @@ import IconBrowse from './icon-browse';
 import IconBuilding from './icon-building';
 import IconArrowDown from './icon-arrow-down';
 import IconCircle from './icon-circle'
+import IconUser from './icon-user'
 
 export {
     IconCheckboxOff,
@@ -51,5 +52,6 @@ export {
     IconBrowse,
     IconBuilding,
     IconArrowDown,
-    IconCircle
+    IconCircle, 
+    IconUser
 };
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -10,7 +10,7 @@ const useStyles = createUseStyles((theme) => ({
         border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 200,
+        maxWidth: 350,
         maxHeight:150,
         marginTop:50,
         padding: '8px 16px 8px 16px',

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -2,18 +2,19 @@ import React, { useContext } from 'react';
 import { string } from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { Row } from 'simple-flexbox';
-import { createUseStyles, useTheme } from 'react-jss';
+import { createUseStyles, ThemeProvider, useTheme } from 'react-jss';
 import { SidebarContext } from 'hooks/useSidebar';
 import SLUGS from 'resources/slugs';
-import { IconBell, IconBrowse, IconLogin, IconSearch } from 'assets/icons';
+import { IconBell, IconUser, IconSearch, IconLogin, IconArrow, IconBurger, IconBrowse } from 'assets/icons';
 import DropdownComponent from 'components/dropdown';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
 /**
  * The Header Component is a shared component between all pages. It is capable to display 
  * a title that changes when the selection in the SidebarComponent changes. 
  * 
  * @returns The visualization of exactly that.
- */
+ * @author reconfigured by Irem Toroslu
+ */ 
 
 const useStyles = createUseStyles((theme) => ({
     avatar: {
@@ -28,35 +29,51 @@ const useStyles = createUseStyles((theme) => ({
         }
     },
     container: {
-        height: 20,
-        color:'#00b300'
+        height: 50,
+        widht:200,
+        color:'#00b300', // header title color 
+        marginRight:-30
 
     },
     name: {
         ...theme.typography.itemTitle,
         textAlign: 'right',
         '@media (max-width: 768px)': {
-            display: 'none'
+            display: 'none',
+
         }
     },
     separator: {
         borderLeft: `1px solid ${theme.color.lightGrayishBlue2}`,
         marginLeft: 32,
         marginRight: 32,
-        height: 32,
-        width: 2,
+        height: 30,
+        width: 3,
         '@media (max-width: 768px)': {
             marginLeft: 14,
             marginRight: 0
         }
     },
+    subtitle: {
+        ...theme.typography.title,
+        '@media (max-width: 1080px)': {
+            marginLeft: -50,
+
+        },
+        '@media (max-width: 468px)': {
+            fontSize: 50,
+
+        }
+    },
     title: {
         ...theme.typography.title,
         '@media (max-width: 1080px)': {
-            marginLeft: 100
+            marginLeft: 80,
+
         },
         '@media (max-width: 468px)': {
-            fontSize: 50
+            fontSize: 50,
+
         }
     },
     iconStyles: {
@@ -68,7 +85,10 @@ const useStyles = createUseStyles((theme) => ({
     }
 }));
 
+
+
 function HeaderComponent() {
+
     const { push } = useHistory();
     const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
     const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
@@ -78,6 +98,7 @@ function HeaderComponent() {
     let title;
     let subtitle;
 
+
     switch (true) {
 
         case currentItem === SLUGS.dashboard:
@@ -95,7 +116,8 @@ function HeaderComponent() {
         case currentItem === SLUGS.industrialApplications:
             title = 'Industrial Applications';
         case currentItem === SLUGS.details:
-            title = 'Selected product: ' + (selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
+            title='Details '
+            subtitle = ' Selected product: ' + (selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
             break;
         case currentItem === SLUGS.generation + '/products':
             title = 'Product Catagory';
@@ -113,19 +135,27 @@ function HeaderComponent() {
             title = '';
     }
 
+    function UseArrow(selected) {
+
+        if (title === 'Details ' && !(selected === undefined)) {
+            return <IconArrow/>;
+        }
+       return null;
+
+      }
     function onSettingsClick() {
         push(SLUGS.settings);
     }
 
     return (
-        <Row className={classes.container} style={{background:'#262625', marginLeft:-15,marginTop:-30,height:50}} vertical='center' horizontal='space-between'>
-            <span className={classes.title} style={{marginLeft:10, fontSize:20,marginTop:10}}>{title}</span>
+        <Row className={classes.container} style={{background:'#212121', marginLeft:-90,marginTop:-40,height:60}} vertical='center' horizontal='space-between'>
+            <span className={classes.title} style={{marginLeft:20, fontSize:20, fontWeight:'inherit',marginTop:15}}>{ title  } <UseArrow isProductSelected={selectedProducts[0].productName} />{subtitle}</span>
             <Row vertical='center'>
                 <div className={classes.iconStyles}>
                     <IconSearch />
                 </div>
                 <div className={classes.iconStyles}>
-                    <DropdownComponent
+                    {/* <DropdownComponent
                         label={<IconBell />}
                         options={[
                             {
@@ -149,13 +179,13 @@ function HeaderComponent() {
                             top: 42,
                             right: -14
                         }}
-                    />
+                    /> */}
                 </div>
                 <div className={classes.separator}></div>
                 <DropdownComponent
                     label={
-                    <span className={classes.name} >User Name
-                        <IconLogin>  
+                    <span className={classes.name} style={{color:'#b5b4b9', fontWeight:'inherit'}} >User Name
+                        <IconLogin fill= {'#b5b4b9'}>  
 
 
                             {/* <img
@@ -179,7 +209,7 @@ function HeaderComponent() {
                         }
                     ]}
                     position={{
-                        top: 52,
+                        top: 45,
                         right: -6
                     }}
                 />

diff --git a/frontend/src/components/sidebar/MenuComponent.js b/frontend/src/components/sidebar/MenuComponent.js
@@ -6,7 +6,7 @@ const getMenuStyles = ({ theme }) => ({
     bmBurgerButton: {
         position: 'absolute',
         width: 26,
-        height: 20,
+        height: 10,
         left: 20,
         top: 40,
         zIndex: 19
@@ -25,11 +25,11 @@ const getMenuStyles = ({ theme }) => ({
     bmMenuWrap: {
         position: 'fixed',
         height: '100%',
-        width: 270,
+        width: 200,
         zIndex: 30
     },
     bmMenu: {
-        background: '#262625'  // left side bar backgroundcolor 
+        background: '#212121'  // left side bar backgroundcolor  1e231c 202121
     },
     bmItem: {
         outline: 'none',

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -11,20 +11,20 @@ const useStyles = createUseStyles({
     },
     container: {
         display: 'flex',
-        height: 56,
+        height: 40,
         cursor: 'pointer',
         '&:hover': {
             backgroundColor: ({ theme }) => theme.color.paleBlueTransparent
         },
-        paddingLeft: ({ level }) => 24 * level,
+        paddingLeft: ({ level }) => 16 * level,
         transition: 'all 0.2s ease-in-out'
     },
     leftBar: {
         borderLeft: ({ theme, level }) =>
             level > 1 ? 'none' : `3px solid ${theme.color.darkGrayishBlue}`
     },
     title: { 
-        fontSize: 13, // left bar titles 
+        fontSize: 15, // left bar titles 
         lineHeight: '20px',
         letterSpacing: '0.2px',
         color: ({ theme, isActive }) =>(isActive ? '#00b300' : '#b5b4b9'), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),

diff --git a/frontend/src/components/sidebar/SidebarComponent.js b/frontend/src/components/sidebar/SidebarComponent.js
@@ -79,7 +79,7 @@ function SidebarComponent() {
     return (
         <Menu isMobile={isMobile}>
 
-            <div style={{width: 180, marginLeft:30,paddingLeft: 25, paddingRight: 20, paddingTop: 20, paddingBottom: 20 }}>
+            <div style={{width: 150, marginLeft:20,paddingLeft: 15, paddingRight: 20, paddingTop: 15, paddingBottom: 25 }}>
             <img src={logo} style={{marginTop:20, marginBottom:20}}/>
             </div>
             <MenuItem

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -76,6 +76,7 @@ select {
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
+
     }
 }
 

diff --git a/frontend/src/routes/PrivateRoutes.js b/frontend/src/routes/PrivateRoutes.js
@@ -4,7 +4,7 @@
  * on the right handside canvas.
  * 
  * @author Martin Wagner
- * @author Irem
+ * @author Irem Toroslu
  */
 
 import React, { Suspense, lazy } from 'react';
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,6 +76,7 @@ select { @@
             animation-iteration-count: 1 !important;
             transition-duration: 0.01ms !important;
             scroll-behavior: auto !important;
         }
     }
@@ Expand Down @@