Worked on the #37

detail page and graphs reconfigured
amosproj · May 16, 2021 · b0f29b6 · b0f29b6
1 parent 3a33b9b
commit b0f29b6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 42 deletions.
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -21,6 +21,7 @@ const ColumnChartComponent = () => {
           type: 'bar',
           height: '150'
         },
+
         plotOptions: {
           bar: {
             //color: '#00308F',
@@ -52,7 +53,10 @@ const ColumnChartComponent = () => {
             'Materials', 'Manufacturing and Transport', 'Operation 30a (75% load)', 'End of Life'
           ],
           labels: {
-            rotate: -90
+            rotate: -90,
+            style: {
+              fontSize: theme.typography.chartItemstitle.fontSize
+          }
           }
         }
     };

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -18,7 +18,11 @@ const PieChartDiagramComponent = () => {
         chart: {
             type: 'donut'
         },
-        labels: [
+        legend: {
+            fontSize: theme.typography.chartItemstitle.fontSize
+          },
+        labels: 
+        [
             'Transformer oil',
             'Steel',
             'Pressboard',
@@ -40,6 +44,7 @@ const PieChartDiagramComponent = () => {
                     },
                     legend: {
                         position: 'bottom'
+
                     }
                 }
             }
@@ -49,7 +54,6 @@ const PieChartDiagramComponent = () => {
     return (
 
         <div id='chart'>
-
             <ReactApexChart options={options} series={series} type='donut' />
         </div>
     );

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -158,37 +158,6 @@ function HeaderComponent() {
                 <div className={classes.separator}>
                 <div className={classes.iconStyles}>
                 <IconLogin fill= {'white'}  /></div>
-            {/* <IconSearch/>  
-            <Row vertical='center'>
-                <div className={classes.iconStyles}>
-                <div className={classes.separator}><IconLogin fill= {'white'}  /></div>
-                </div>
-                <div className={classes.iconStyles}> */}
-                    {/* <DropdownComponent
-                        label={<IconBell />}
-                        options={[
-                            {
-                                label: 'Notification #1',
-                                onClick: () => console.log('Notification #1')
-                            },
-                            {
-                                label: 'Notification #2',
-                                onClick: () => console.log('Notification #2')
-                            },
-                            {
-                                label: 'Notification #3',
-                                onClick: () => console.log('Notification #3')
-                            },
-                            {
-                                label: 'Notification #4',
-                                onClick: () => console.log('Notification #4')
-                            }
-                        ]}
-                        position={{
-                            top: 42,
-                            right: -14
-                        }}
-                    /> */}
                 </div>
 
                 </Row>

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -49,7 +49,7 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
     const classes = useStyles({ theme, level, isActive });
     const classNameColumn = isActive ? classes.leftBar : '';
     const classNameContainer = [classes.container, isActive && classes.activeContainer].join(' ');
-    const iconColor = isActive ? '#00b300' : 'white';//theme.color.paleBlue : theme.color.grayishBlue2;
+    const iconColor = isActive ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.primaryIconColor;//theme.color.paleBlue : theme.color.grayishBlue2;
 
     function onItemClicked(e) {
         if (onClick) {

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -4,6 +4,7 @@
 
 const color = {
     brightBlue: '#3498db',
+    white:'white',
     darkGrayishBlue: '#8b8d94',
     whitish: '#b5b4b9',
     white:'#000000',
@@ -45,7 +46,7 @@ const typography = {
         letterSpacing: '0.1px'
     },
     smallSubtitle: {
-        fontSize: 16,
+        fontSize: 18,
         lineHeight: '16px',
         letterSpacing: '0.1px'
     },
@@ -75,10 +76,28 @@ const typography = {
         letterSpacing: 0.3
     },
     subtitle: {
+        fontWeight: 'inherit',
+        fontSize: 20,
+        lineHeight: '30px',
+        letterSpacing: 0.3
+    },
+    textcontent: {
         fontWeight: 'inherit',
         fontSize: 18,
         lineHeight: '30px',
         letterSpacing: 0.3
+    },
+    chartItemstitle: {
+        fontWeight: 'inherit',
+        fontSize: 12,
+        lineHeight: '30px',
+        letterSpacing: 0.3
+    },
+    buttontitle: {
+        fontWeight: 'inherit',
+        fontSize: 12,
+        lineHeight: '30px',
+        letterSpacing: 0.3
     }
 };
 
@@ -88,6 +107,7 @@ const typography = {
 const uniformStyle = {
     color: { 
         primaryFontColor:  color.darkGrayishBlue,
+        primaryIconColor: 'white',
         secondaryFontColor: color.whitish,
         highlightingColor: color.limeGreen,
         primaryBackgroundColor: color.white,

diff --git a/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js b/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
@@ -9,11 +9,12 @@ const useStyles = createUseStyles((theme) => ({
     display: 'flex'
 
   },
-  name: {
-      ...theme.typography.itemTitle,
-      textAlign: 'right',
+  textcontent: {
+      ...theme.typography.textcontent,
+      textAlign: 'left',
       '@media (max-width: 768px)': {
           display: 'none',
+
 
 
       }
@@ -58,9 +59,8 @@ export default function ProductSolutionsServicesComponent() {
 
     <Column className={classes.container}>
 
-      <h2 className={classes.title} >At this location the component which shows all the products / models will be implemented</h2>
-      <Row className={classes.Itemtitle}>
-      {type === 'products' && <div>This is where all the products of the selected category could be shown.</div>}
+      <Row className={classes.subtitle}>
+      {type === 'products' && <div >All the products<div className={classes.textcontent}>  This is where all the products of the selected category could be shown.</div></div>}
       {type === 'solutions' && <div>This is where all the solutions of the selected category could be shown.</div>}
       {type === 'services' && <div>This is where all the services of the selected category could be shown.</div>}
       </Row>