Merge branch 'frontend-dev-#37' of https://github.com/amosproj/amos-s…

…s2021-carbon-footprint into frontend-dev-#37

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>

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>
+
+)

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
 };

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',

frontend/src/components/header/HeaderComponent.js

@@ -2,10 +2,10 @@ 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';
 
@@ -22,35 +22,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: {
@@ -69,6 +85,7 @@ const useStyles = createUseStyles((theme) => ({
  * @returns The visualization of exactly that.
  */
 function HeaderComponent() {
+
     const { push } = useHistory();
     const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
     const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
@@ -77,6 +94,8 @@ function HeaderComponent() {
 
     let title;
     let subtitle;
+    let subsubtitle;
+
 
     switch (true) {
 
@@ -95,7 +114,9 @@ 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  ' ;
+            subsubtitle =(selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
             break;
         case currentItem === SLUGS.generation + '/products':
             title = 'Product Catagory';
@@ -113,6 +134,14 @@ function HeaderComponent() {
             title = '';
     }
 
+    function UseArrow(selected) {
+
+        if (title === 'Details ' && !(selected === undefined)) {
+            return <IconArrow height='10'/>;
+        }
+       return null;
+
+      }
     function onSettingsClick() {
         push(SLUGS.settings);
     }
@@ -125,7 +154,7 @@ function HeaderComponent() {
                     <IconSearch />
                 </div>
                 <div className={classes.iconStyles}>
-                    <DropdownComponent
+                    {/* <DropdownComponent
                         label={<IconBell />}
                         options={[
                             {
@@ -149,13 +178,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 +208,7 @@ function HeaderComponent() {
                         }
                     ]}
                     position={{
-                        top: 52,
+                        top: 45,
                         right: -6
                     }}
                 />

frontend/src/components/productGrid/ProductGridComponent.js

@@ -1,13 +1,3 @@
-/**
- * The Componenet creates new cards   for the product items using the minicard components form 'components/cards/MiniCardComponent'
- * it displays all the related products images attached to each card in a certain category.
- * Also stores the product and model properties and pass this values to the detail page once clicking on the image
- * /**
- * 
- * @returns the product and model properties
- * @author Irem Toroslu, Martin Wagner, Mani Anand
- */
-
 import React, {useContext} from 'react';
 import {Column, Row} from 'simple-flexbox';
 import {createUseStyles} from 'react-jss';
@@ -20,25 +10,15 @@ import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
 import { Component } from 'react';
 import LabelComponent from './LabelComponent'
 
-const myStyles = createUseStyles((theme) => ({
-
-    title: {
-        ...theme.typography.cardTitle,
-        color: theme.color.grayishBlue2,
-        marginBottom: 12,
-        minWidth: 205,
-        textAlign: 'center'
-    },
-    value: {
-        color: theme.color.veryDarkGrayishBlue,
-        fontWeight: 'bold',
-        fontSize: 20,
-        letterSpacing: '1px',
-        lineHeight: '50px',
-        textAlign: 'center'
-    }
-}));
-
+/**
+ * The Componenet creates new cards   for the product items using the minicard components form 'components/cards/MiniCardComponent'
+ * it displays all the related products images attached to each card in a certain category.
+ * Also stores the product and model properties and pass this values to the detail page once clicking on the image
+ * /**
+ * 
+ * @returns the product and model properties
+ * @author Irem Toroslu, Martin Wagner, Mani Anand
+ */
 
 function ProductGridComponent() {
     const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext);

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,7 +25,7 @@ const getMenuStyles = ({ theme }) => ({
     bmMenuWrap: {
         position: 'fixed',
         height: '100%',
-        width: 270,
+        width: 200,
         zIndex: 30
     },
     bmMenu: {

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 ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.secondaryFontColor), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),

frontend/src/components/sidebar/SidebarComponent.js

@@ -1,10 +1,3 @@
-/**
- * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
- * 
- * @author Irem Toroslu
- * @author Martin Wagner 
- */
-
 import React from 'react';
 import { createUseStyles, useTheme } from 'react-jss';
 import { useHistory } from 'react-router-dom';
@@ -26,6 +19,12 @@ import Menu from './MenuComponent';
 import MenuItem from './MenuItemComponent';
 import logo from 'assets/logo/LogoCarbonteam.png';
 
+/**
+ * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
+ * 
+ * @author Irem Toroslu
+ * @author Martin Wagner 
+ */
 
 const useStyles = createUseStyles({
     separator: {
@@ -79,7 +78,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

frontend/src/index.css

@@ -76,6 +76,7 @@ select {
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
+
     }
 }
 

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';