worked on the #37

Details and catagories sections UI styles reconfigured such as fontsizes,fontcolors etc.
amosproj · May 16, 2021 · de9ae0c · de9ae0c
1 parent 6c0cb08
commit de9ae0c
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 40 deletions.
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -11,6 +11,7 @@ const useStyles = createUseStyles((theme) => ({
         borderRadius: 4,
         cursor: 'pointer',
         maxWidth: 350,
+        minWidth:210, // eesizing the card min widht
         maxHeight:150,
         marginTop:50,
         // padding: '8px 16px 8px 16px',
@@ -30,8 +31,8 @@ const useStyles = createUseStyles((theme) => ({
     },
     value: {
         color: theme.color.veryDarkGrayishBlue,
-        fontWeight: 'bold',
-        fontSize: 20,
+        fontWeight: 'inherit',
+        fontSize: 14,
         letterSpacing: '1px',
         lineHeight: '50px',
         textAlign: 'center'

diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
@@ -11,25 +11,30 @@ import ColumnChart from './ColumnChartComponent';
 import Table from './TableComponent'
 import './canvas.css';
 import {Container, Row, Col } from 'react-grid-system';
+import theme from 'resources/theme';
+
 
 
 class CanvasPage extends Component {
     render() {
         return (
-            <Container fluid={true}>
+            <Container  fluid={true}>
             <Row>
-                <Col xs={5}>
-                    <h3> Material Composition </h3>
+                <Col xs={5} style={{marginTop:30}}>
+                    <h3  style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                    letterSpacing:theme.typography.subtitle.letterSpacing,marginLeft:90}}> Material Composition </h3>
                     <PieChart></PieChart>
                 </Col>
-                <Col xs={5}>
-                    <h3> Results of the impact assessment </h3>
+                <Col xs={5} style={{marginTop:30,marginLeft:20}}>
+                    <h3 style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                    letterSpacing:theme.typography.subtitle.letterSpacing,marginLeft:90}}> Results of the impact assessment </h3>
                     <ColumnChart></ColumnChart>
                 </Col>
             </Row>
             <Row>
-            <Col xs={10}>
-                <h3> Impact categories </h3>
+            <Col xs={10} style={{marginTop:30}}>
+                <h3 style={{fontSize:theme.typography.subtitle.fontSize,fontWeight:theme.typography.subtitle.fontWeight, lineHeight:theme.typography.subtitle.lineHeight,
+                letterSpacing:theme.typography.subtitle.letterSpacing}} > Impact categories </h3>
                 <Table></Table>
             </Col>
             </Row>

diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -30,7 +30,7 @@ const ColumnChartComponent = () => {
 
         },
         fill: {
-          colors: ['#48D1CC']//['#00bcd4'] 0CA8CA 52bfb2
+          colors: [theme.uniformStyle.color.barChartColor]//['#00bcd4'] 0CA8CA 52bfb2,
         },
         dataLabels: {
           enabled: false,
@@ -45,7 +45,13 @@ const ColumnChartComponent = () => {
           labels: {
             formatter: function (y) {
               return y.toFixed(0) + "%";
-            }
+            },
+            style: {
+              fontSize: theme.typography.chartItemstitle.fontSize,
+              fontWeight: theme.typography.chartItemstitle.fontWeight
+          }
+
+
           }
         },
         xaxis: {
@@ -55,7 +61,8 @@ const ColumnChartComponent = () => {
           labels: {
             rotate: -90,
             style: {
-              fontSize: theme.typography.chartItemstitle.fontSize
+              fontSize: theme.typography.chartItemstitle.fontSize,
+              fontWeight: theme.typography.chartItemstitle.fontWeight
           }
           }
         }

diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js
@@ -3,18 +3,61 @@
  * canvas page and variable drop down list  
  * 
  * @author parham, 08.05  
- */
+ * */
 
 import React, {Component, useContext} from 'react';
 import Canvas from './CanvasComponent';
 import SelectVariable from './SelectVariableComponent';
 import {PrivateSectionContext} from "hooks/PrivateSectionContext";
+import { useTheme, createUseStyles } from 'react-jss';
+const useStyles = createUseStyles((theme) => ({
+
+    container: {
+      display: 'flex'
+
+    },
+    textcontent: {
+        ...theme.typography.textcontent,
+        textAlign: 'left',
+        '@media (max-width: 768px)': {
+            display: 'none',
+
+
+
+        }
+    },
+
+    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: 80,
+
+        },
+        '@media (max-width: 468px)': {
+            fontSize: 50,
+
+        }
+    }
+  }));
 
 function DetailInfo() {
     const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
+    const theme = useTheme();
+    const classes = useStyles({ theme });
         return (
             <React.Fragment>
-                <h2>The chosen Model is {selectedProducts[0].modelName}</h2>
+                <h2 className={classes.subtitle} >The chosen Model is {selectedProducts[0].modelName}</h2>
                 <SelectVariable></SelectVariable>
                 <Canvas></Canvas>
             </React.Fragment>

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -1,7 +1,7 @@
 /**
  * Pie Chart Diagram
  *
- * @author parham, Julian
+ * @author parham, Julian, Irem Toroslu
  */
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
@@ -19,7 +19,8 @@ const PieChartDiagramComponent = () => {
             type: 'donut'
         },
         legend: {
-            fontSize: theme.typography.chartItemstitle.fontSize
+            fontSize: theme.typography.chartItemstitle.fontSize,
+            fontWeight:theme.typography.chartItemstitle.fontWeight
           },
         labels: 
         [
@@ -33,7 +34,17 @@ const PieChartDiagramComponent = () => {
         ],
         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'
+            type: 'gradient',
+            gradient: {
+                shade: 'dark',
+                type: "horizontal",
+                shadeIntensity: 0.5,
+                gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
+                inverseColors: true,
+                opacityFrom: 1,
+                opacityTo: 1,
+                stops: [0, 50, 100],
+                colorStops: []}
         },
         responsive: [
             {

diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { Container } from 'react-grid-system';
+import theme from 'resources/theme';
 
 class DetailTable extends Component {
     state = {
@@ -76,14 +78,16 @@ class DetailTable extends Component {
     };
     render() {
         return (
-            <div className='w3-container'>
+            // TODO:left margin value needed to be fixed
+            <Container fluid={true} style={{marginLeft:-15}}>  
+
                 {/* TODO: dynamic display of product and model */}
-                <h5>Large Power Transformer</h5>
-                <h6>3 Phase GSU transformer</h6>
+                <h5 style={{fontSize:theme.typography.smallSubtitle.fontSize,fontWeight:theme.typography.smallSubtitle.fontWeight}}>Large Power Transformer</h5>
+                <h6 style={{fontSize:theme.typography.secondSmallSubtitle.fontSize,fontWeight:theme.typography.secondSmallSubtitle.fontWeight}}>3 Phase GSU transformer</h6>
 
                 <table className='w3-table-all w3-card-4 w3-small'>
                     <thead>
-                        <tr className='w3-blue-gray'>
+                        <tr style={{backgroundColor:theme.uniformStyle.color.tableHeaderColor}}>
                             {this.state.headers.map((item) => (
                                 <th key={item.id}>{item.value}</th>
                             ))}
@@ -101,7 +105,7 @@ class DetailTable extends Component {
                         </tr>
                     ))}
                 </table>
-            </div>
+            </Container>
         );
     }
 }

diff --git a/frontend/src/components/productGrid/LabelComponent.js b/frontend/src/components/productGrid/LabelComponent.js
@@ -1,4 +1,5 @@
 import React, {useContext} from 'react';
+import theme from 'resources/theme';
 
 /**
  * Displaying a label.
@@ -9,7 +10,7 @@ import React, {useContext} from 'react';
 
 function LabelComponent({productName}) {
     return (
-        <span class='w3-container w3-center w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em'>
+        <span style={{fontSize:theme.typography.textcontent.fontSize,fontWeight:theme.typography.textcontent.fontWeight}} class='w3-container w3-center w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em'>
             {productName}
         </span>
     );

diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -5,6 +5,7 @@ import {getModels} from 'interface/simaProInterface'
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
 import { Component } from 'react';
 import {Container, Row, Col } from 'react-grid-system';
+import theme from 'resources/theme';
 
 
 //TODO: When only one model is available, => How to do that then? Should a click on the image link in that case?
@@ -28,12 +29,12 @@ const ModelDropdownComponent = (props) =>  {
 
     return (
             <Container fluid={true}>
-                <Row className=' w3-dropdown-hover w3-card-4 w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
+                <Row className=' w3-dropdown-hover  w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
                     <Col xs={2}>                         
-                    <button className=' w3-button w3-border w3-white'>{selected}</button>
+                    <button className=' w3-button w3-border w3-white' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight}}>{selected}</button>
 
 
-                    <div className='w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border'>
+                    <div style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight}} className='w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border w3-white'>
 
                     {variables.map((item) => (
 

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -1,5 +1,7 @@
 /**
  * The theme provides cross component UI like Colors and Fonts.
+ * @author Irem Toroslu
+ * @author Martin Wagner 
  */
 
 const color = {
@@ -14,14 +16,16 @@ const color = {
     grayishBlue2: '#9fa2b4',
     grayishBlue3: '#bdc3c7',
     limeGreen: '#00b300',
+    blueGray:'#33b3a6',//687f8c016064018788019799
     lightBlue: '#3751FF',
     lightGrayishBlue: '#F7F8FC', // background color
     lightGrayishBlue2: '#DFE0EB',
     paleBlue: '#DDE2FF',
     paleBlueTransparent: 'rgba(221, 226, 255, 0.08)',
     veryDarkGrayishBlue: '#373a47',
     lightgreen: '#66a103',
-    teal:'#008081',
+    lightblueGray:'#5ba688',//009092, 80a7af
+    darkskyblue:'#01a1c1',//1a1c1
     Copper:'#BF6016',//B87333
     Alminium:'#6093AC',//'#A9ACB6',
     SiliconSteel:'#0c6c84',//'#8FB1CC',016064,8EA0B3, 016A86,006994,04657e,0c6c84
@@ -48,7 +52,14 @@ const typography = {
     smallSubtitle: {
         fontSize: 18,
         lineHeight: '16px',
-        letterSpacing: '0.1px'
+        letterSpacing: '0.1px',
+        fontWeight:'inherit'
+    },
+    secondSmallSubtitle:{
+        fontSize: 16,
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
+        fontWeight:'inherit'
     },
     link: {
         fontWeight: '600',
@@ -84,7 +95,7 @@ const typography = {
     textcontent: {
         fontWeight: 'inherit',
         fontSize: 18,
-        lineHeight: '30px',
+        lineHeight: '16px',
         letterSpacing: 0.3
     },
     chartItemstitle: {
@@ -111,7 +122,9 @@ const uniformStyle = {
         secondaryFontColor: color.whitish,
         highlightingColor: color.limeGreen,
         primaryBackgroundColor: color.white,
-        secondaryBackgroundColor: color.darkGray
+        secondaryBackgroundColor: color.darkGray,
+        barChartColor: color.darkskyblue ,
+        tableHeaderColor: color.lightblueGray,
     }
 }