worked on #37

Table and chart look and feel changed as well as dropdown's look and feel
amosproj · May 16, 2021 · 5f7d82f · 5f7d82f
1 parent de9ae0c
commit 5f7d82f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Column } from 'simple-flexbox';
 import { createUseStyles, useTheme } from 'react-jss';
-
+import theme from 'resources/theme';
 //reconfiguration of the dropdown boxes
 const useStyles = createUseStyles((theme) => ({
 
@@ -11,12 +11,12 @@ const useStyles = createUseStyles((theme) => ({
         borderRadius: 4,
         cursor: 'pointer',
         maxWidth: 350,
-        minWidth:210, // eesizing the card min widht
+        minWidth:210, // resizing the card min widht
         maxHeight:150,
         marginTop:50,
         // padding: '8px 16px 8px 16px',
         '&:hover': {
-            borderColor: '#8b8d94',//'#7b9095', //'#00b300'
+            borderColor: theme.uniformStyle.color.tableHeaderColor ,
             '&:nth-child(n) > span': {
                 color: theme.color.lightBlue
             }

diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
@@ -22,7 +22,7 @@ class CanvasPage extends Component {
             <Row>
                 <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>
+                    letterSpacing:theme.typography.subtitle.letterSpacing,marginLeft:100}}> Material Composition </h3>
                     <PieChart></PieChart>
                 </Col>
                 <Col xs={5} style={{marginTop:30,marginLeft:20}}>

diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx
@@ -4,6 +4,7 @@ a drop down component for selecting variable
 @author parham, 08.05
 */
 import React, { Component } from 'react';
+import theme from 'resources/theme';
 
 class SelectVariableComponent extends Component {
     /*
@@ -37,10 +38,10 @@ class SelectVariableComponent extends Component {
             <div>
                 Pick your desire variable:
                 <div className='w3-dropdown-hover w3-margin-left w3-margin-right w3-margin-top'>
-                    <button className='w3-button w3-2018-sailor-blue'>
+                    <button className='w3-button w3-2018-sailor-blue' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight,lineHeight:theme.typography.buttontitle.lineHeight,letterSpacing:theme.typography.buttonSendtitle.letterSpacing}}>
                         {this.state.selectedVariable}
                     </button>
-                    <div className='w3-dropdown-content w3-bar-block w3-border'>
+                    <div className='w3-dropdown-content w3-bar-block w3-border' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight,lineHeight:theme.typography.buttontitle.lineHeight,letterSpacing:theme.typography.buttonSendtitle.letterSpacing}}>
                         {this.state.variables.map((item) => (
                             <a
                                 onClick={() => this.onDropDownItemSelectedHandler(item.country)}
@@ -52,8 +53,8 @@ class SelectVariableComponent extends Component {
                         ))}
                     </div>
                 </div>
-                <button onClick={this.handleSubmit} className='w3-button w3-teal w3-wide'>
-                    <b>Send Request</b>
+                <button  style={{backgroundColor:theme.uniformStyle.color.sendButtonColor}} onClick={this.handleSubmit} className='w3-button w3-wide'>
+                    <b style={{fontSize:theme.typography.buttonSendtitle.fontSize,fontWeight:theme.typography.buttonSendtitle.fontWeight,letterSpacing:theme.typography.buttonSendtitle.letterSpacing,lineHeight:theme.typography.buttonSendtitle.lineHeight}}>Send Request</b>
                 </button>
             </div>
         );

diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -26,16 +26,20 @@ const ModelDropdownComponent = (props) =>  {
     // set the initial values for the dropdown list derived from getModels
     const variables = getModels(productID);  
     const [ selected, setSelected ] = useState('Select a model');
-
+    //className=' w3-dropdown-hover w3-border w3-white w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
     return (
             <Container fluid={true}>
-                <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' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight}}>{selected}</button>
+                <Row className='w3-dropdown-hover w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em'>
+                    <Col xs={2}>  
+                    <button className='w3-button' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight,lineHeight:theme.typography.buttontitle.lineHeight,letterSpacing:theme.typography.buttonSendtitle.letterSpacing}}>
+                        {selected}
+                    </button>
+                    <div className='w3-dropdown-content w3-bar-block w3-border' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight,lineHeight:theme.typography.buttontitle.lineHeight,letterSpacing:theme.typography.buttonSendtitle.letterSpacing}}>                       
+                    {/* <button className=' w3-button w3-white' style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight}}>{selected}</button>
                     
                     
-                    <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'>
-
+                    <div style={{fontSize:theme.typography.buttontitle.fontSize,fontWeight:theme.typography.buttontitle.fontWeight}} className='w3-dropdown-content  w3-white'>
+                    */}
                     {variables.map((item) => (
 
                         <a

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -21,10 +21,14 @@ const color = {
     lightGrayishBlue: '#F7F8FC', // background color
     lightGrayishBlue2: '#DFE0EB',
     paleBlue: '#DDE2FF',
+    darkBlue:'#008caf',
     paleBlueTransparent: 'rgba(221, 226, 255, 0.08)',
     veryDarkGrayishBlue: '#373a47',
     lightgreen: '#66a103',
-    lightblueGray:'#5ba688',//009092, 80a7af
+    lightblueGray:'#2e9db0',
+    lightGreenGray:'#9dccca',
+    GreenGray:'#88b598',
+    darkGreenGray:'#94b0a5',//009092,94b0a5 5ba68880a7af
     darkskyblue:'#01a1c1',//1a1c1
     Copper:'#BF6016',//B87333
     Alminium:'#6093AC',//'#A9ACB6',
@@ -109,6 +113,12 @@ const typography = {
         fontSize: 12,
         lineHeight: '30px',
         letterSpacing: 0.3
+    },
+    buttonSendtitle: {
+        fontWeight: 'inherit',
+        fontSize: 14,
+        lineHeight: '30px',
+        letterSpacing: 0.3
     }
 };
 
@@ -123,8 +133,9 @@ const uniformStyle = {
         highlightingColor: color.limeGreen,
         primaryBackgroundColor: color.white,
         secondaryBackgroundColor: color.darkGray,
-        barChartColor: color.darkskyblue ,
-        tableHeaderColor: color.lightblueGray,
+        barChartColor: color.darkBlue ,
+        tableHeaderColor: color.GreenGray,
+        sendButtonColor: color.darkGreenGray
     }
 }