work on the #37

amosproj · May 14, 2021 · 3b156d9 · 3b156d9
1 parent 2ddfc3e
commit 3b156d9
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 22 deletions.
diff --git a/frontend/public/LogoCarbonteam.png b/frontend/public/LogoCarbonteam.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -22,7 +22,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-        <title>Dashboard Kit</title>
+
+        <title>Carbon Footprint Visualization</title>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/assets/dummyImages/Logo2.png b/frontend/src/assets/dummyImages/Logo2.png
diff --git a/frontend/src/assets/icons/icon-circle.js b/frontend/src/assets/icons/icon-circle.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg width="50" height="50" fill ='grey'>
-  <circle opacity={props.opacity || ''} cx="30" cy="25" r="4"  fill = {props.fill || "#9FA2B4"}/>
+<svg width="25" height="50" fill ='grey'>
+  <circle opacity={props.opacity || ''} cx="15" cy="25" r="4"  fill = {props.fill || "#9FA2B4"}/>
 </svg>
 )
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -10,12 +10,12 @@ const useStyles = createUseStyles((theme) => ({
         border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 200,
+        maxWidth: 180,
         maxHeight:150,
         marginTop:50,
         padding: '8px 16px 8px 16px',
         '&:hover': {
-            borderColor: '#7b9095', //'#00b300'
+            borderColor: '#8b8d94',//'#7b9095', //'#00b300'
             '&:nth-child(n) > span': {
                 color: theme.color.lightBlue
             }
@@ -47,7 +47,7 @@ function MiniCardComponent({ className = '', title, value, path }) {
     return (
         <Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
         {/*  Resize the image on the cards (product images)            */}
-            <div style={{width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
+            <div style={{width: 155, paddingLeft: 10, paddingTop: 20, paddingBottom: 10 }}>
             {/* define the image path */}
             <img src={path} alt=''/>
             </div>

diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import {getResultsImpactAssessment} from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 const ColumnChartComponent = () => {
     const series = [{
@@ -22,9 +23,13 @@ const ColumnChartComponent = () => {
         },
         plotOptions: {
           bar: {
-            color: '#00308F',
+            //color: '#00308F',
             columnWidth: '60%',
           }
+
+        },
+        fill: {
+          colors: ['#48D1CC']//['#00bcd4'] 0CA8CA 52bfb2
         },
         dataLabels: {
           enabled: false,
@@ -57,7 +62,7 @@ const ColumnChartComponent = () => {
 
     return (
         <div id='chart'>
-            <ReactApexChart options={options} series={series} type="bar" height={350} />
+            <ReactApexChart options={options} series={series} type="bar" color='green' height={350} />
         </div>
     );
 

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import { getMaterialComposition} from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 const PieChartDiagramComponent = () => {
     //const series = [17, 13, 3, 2, 1, 42, 21];
@@ -26,7 +27,7 @@ const PieChartDiagramComponent = () => {
             'Silicon steel',
             'Copper'
         ],
-        colors: ['#040f13', '#0b2d39', '#165a72', '#2596be', '#3ba1c5', '#00308F', '#d3eaf2'],
+        colors: [theme.color.TransformerOil, theme.color.Steel, theme.color.Pressboard, theme.color.StainlessSteel, theme.color.Alminium, theme.color.SiliconSteel, theme.color.Copper],
         fill: {
             type: 'gradient'
         },

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -28,7 +28,9 @@ const useStyles = createUseStyles((theme) => ({
         }
     },
     container: {
-        height: 40
+        height: 20,
+        color:'#00b300'
+
     },
     name: {
         ...theme.typography.itemTitle,
@@ -51,10 +53,10 @@ const useStyles = createUseStyles((theme) => ({
     title: {
         ...theme.typography.title,
         '@media (max-width: 1080px)': {
-            marginLeft: 60
+            marginLeft: 100
         },
         '@media (max-width: 468px)': {
-            fontSize: 20
+            fontSize: 50
         }
     },
     iconStyles: {
@@ -116,8 +118,8 @@ function HeaderComponent() {
     }
 
     return (
-        <Row className={classes.container} vertical='center' horizontal='space-between'>
-            <span className={classes.title}>{title}</span>
+        <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 vertical='center'>
                 <div className={classes.iconStyles}>
                     <IconSearch />

diff --git a/frontend/src/components/sidebar/MenuComponent.js b/frontend/src/components/sidebar/MenuComponent.js
@@ -25,7 +25,7 @@ const getMenuStyles = ({ theme }) => ({
     bmMenuWrap: {
         position: 'fixed',
         height: '100%',
-        width: 260,
+        width: 270,
         zIndex: 30
     },
     bmMenu: {

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -24,11 +24,12 @@ const useStyles = createUseStyles({
             level > 1 ? 'none' : `3px solid ${theme.color.darkGrayishBlue}`
     },
     title: { 
-        fontSize: 15, // left bar titles 
+        fontSize: 13, // left bar titles 
         lineHeight: '20px',
         letterSpacing: '0.2px',
         color: ({ theme, isActive }) =>(isActive ? '#00b300' : '#b5b4b9'), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
-        marginLeft: 10
+        marginLeft: 10,
+        fontWeight:'inherit'
     }
 });
 

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:25,paddingLeft: 25, paddingRight: 20, paddingTop: 20, paddingBottom: 20 }}>
+            <div style={{width: 180, marginLeft:30,paddingLeft: 25, paddingRight: 20, paddingTop: 20, paddingBottom: 20 }}>
             <img src={logo} style={{marginTop:20, marginBottom:20}}/>
             </div>
             <MenuItem

diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js
@@ -6,14 +6,14 @@
 
 import logo from 'assets/logo/LogoCarbonteam.png'
 import logo_1 from 'assets/dummyImages/Image_1.PNG'
-import logo_2 from 'assets/dummyImages/Image_2.PNG'
+import logo_3 from 'assets/dummyImages/Logo2.png'
 
 /**
  * should get all the Products from the backend (soon) //TODO: declare and write.
  * @returns 
  */
 export function getProducts() {
-    return ([logo,logo_1,logo_2,logo_1,logo_2,logo_1]);
+    return ([logo_3,logo_1,logo_3,logo_1,logo_3,logo_1]);
 }
 
 /**

diff --git a/frontend/src/interface/simaProInterface.js b/frontend/src/interface/simaProInterface.js
@@ -7,7 +7,7 @@
 
 import logo from 'assets/logo/LogoCarbonteam.png'
 import logo_1 from 'assets/dummyImages/Image_1.PNG'
-import logo_2 from 'assets/dummyImages/Image_2.PNG'
+import logo_2 from 'assets/dummyImages/Logo2.png'
 import { categories } from './categories';
 
 /**

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -15,7 +15,17 @@ const color = {
     paleBlue: '#DDE2FF',
     paleBlueTransparent: 'rgba(221, 226, 255, 0.08)',
     veryDarkGrayishBlue: '#373a47',
-    lightgreen: '#b5b4b9',
+    lightgreen: '#66a103',
+    teal:'#008081',
+    Copper:'#BF6016',//B87333
+    Alminium:'#6093AC',//'#A9ACB6',
+    SiliconSteel:'#0c6c84',//'#8FB1CC',016064,8EA0B3, 016A86,006994,04657e,0c6c84
+    TransformerOil: '#FACA0F',//'#D4AF37 cca42b',
+    StainlessSteel:'#caccce', //
+    Pressboard:'#C38888',//BC8379,
+    Steel:'#8C9BA1'
+
+
 };
 
 const typography = {