Styling, removing px use in css

Author: rodriguez-facundo

webapp/Theme.js

@@ -12,8 +12,8 @@ const primaryColor = 'rgb(84, 58, 115)'
 export default createMuiTheme({
   typography: {
     useNextVariants: true,
-    htmlFontSize: 14,
-    fontSize: 14,
+    htmlFontSize: 12,
+    fontSize: 10,
     fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
     button: {
       textTransform: "none",
@@ -33,14 +33,13 @@ export default createMuiTheme({
         boxShadow: 'none !important' 
       },
     },
-    MuiIconButton:{ root: { '&:hover': { backgroundColor: 'inherit' } } },
     MuiSelect: {
       root: {
         outline: 'none !important', 
         border: 'none !important', 
         boxShadow: 'none !important'
       },
-      select: { "&:focus" :{ background: "none" } }
-    },
+      select: { "&:focus" :{ background: "none" } },
+    }
   }
 });

webapp/components/definition/cellRules/NetPyNECellRules.js

@@ -591,7 +591,7 @@ export default class NetPyNECellRules extends React.Component {
             <div className='ml-2'>
               <Fab
                 id="newCellRuleButton"
-                style={{ minWidth: 56 }}
+                style={{ width: 70, height: 70 }}
                 color={ page == 'main' ? 'primary' : 'secondary'}
                 data-tooltip={ this.createTooltip('cellRule')}
                 onClick={() => this.handleHierarchyClick('main')}

webapp/components/definition/cellRules/sections/NetPyNESectionThumbnail.js

@@ -3,7 +3,7 @@ import FontIcon from '@material-ui/core/Icon';
 import Button from '@material-ui/core/Button';
 import DeleteDialogBox from '../../../general/DeleteDialogBox';
 
-const styles = { btn: { borderRadius: '25px' } };
+const styles = { btn: { borderRadius: '25px', marginRight: '8px' } };
 
 export default class NetPyNESectionThumbnail extends React.Component {
 
@@ -46,7 +46,7 @@ export default class NetPyNESectionThumbnail extends React.Component {
         <Button
           variant="contained"
           id={name}
-          color="primary"
+          color={selected ? 'secondary' : 'primary'}
           style={ styles.btn }
           onMouseEnter={ () => this.setState({ isHovered: true }) }
           onMouseLeave={ () => this.setState({ isHovered: false }) }

webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js

@@ -1,11 +1,18 @@
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Utils from '../../../../../Utils';
+import { withStyles } from '@material-ui/core/styles';
 
 var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
 var PythonControlledTextField = PythonControlledCapability.createPythonControlledControl(TextField);
 
-export default class NetPyNEMechanism extends React.Component {
+const styles = ({ spacing }) => ({
+  fields: { 
+    marginTop: spacing(3),
+    width: '100%'
+  } 
+})
+class NetPyNEMechanism extends React.Component {
 
   constructor (props) {
     super(props);
@@ -19,18 +26,19 @@ export default class NetPyNEMechanism extends React.Component {
     this.setState({ currentName: nextProps.name });
   }
 
-  renderMechFields = () => {
+  renderMechFields = classes => {
     if (this.state.mechFields == '') {
       return <div key={"empty"}/>
     } else {
       var tag = "netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.section + "']['mechs']['" + this.state.currentName + "']"
       return this.state.mechFields.map((name, i) =>
-        <PythonControlledTextField id={"mechName" + name} name={name} key={name} model={tag + "['" + name + "']"} label={name} realType={"float"} style={{ width:'100%' }}/>
+        <PythonControlledTextField id={"mechName" + name} name={name} key={name} model={tag + "['" + name + "']"} label={name} realType={"float"} className={classes.fields}/>
       )
     }
   };
 
   render () {
+    const { classes } = this.props
     var content = []
     if (this.state.currentName != undefined && this.state.currentName != '') {
       Utils
@@ -40,7 +48,7 @@ export default class NetPyNEMechanism extends React.Component {
             this.setState({ mechFields: response })
           }
         })
-      content.push(this.renderMechFields())
+      content.push(this.renderMechFields(classes))
     }
 
     return (
@@ -59,3 +67,4 @@ export default class NetPyNEMechanism extends React.Component {
     );
   }
 }
+export default withStyles(styles)(NetPyNEMechanism)

webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanismThumbnail.js

@@ -7,11 +7,11 @@ const hoverColor = '#66d2e2';
 const changeColor = 'rgb(0, 188, 212)';
 
 const styles = {
-  main: { float: 'left' },
+  main: { float: 'left', '&:hover': { backgroundColor: 'red' } },
   trash: {
     zIndex:10,
     marginTop:37,
-    marginLeft:37,
+    marginLeft:38,
     position:"absolute",
     backgroundColor:"#f23d7a",
     color: 'white'
@@ -47,7 +47,7 @@ export default class NetPyNEMechanismThumbnail extends React.Component {
   }
 
   render () {
-    const { name, selected } = this.props;
+    const { name, selected, classes } = this.props;
     const { dialogOpen, isHovered } = this.state;
     let label;
     if (isHovered && selected) {
@@ -62,8 +62,7 @@ export default class NetPyNEMechanismThumbnail extends React.Component {
     return (
       <div style={styles.main}>
         <IconButton
-          disableFocusRipple
-          disableRipple
+          style={{ '&:hover': { backgroundColor: 'red' } }}
           id={`mechThumb${name}`}
           onMouseEnter={ () => this.setState({ isHovered: true }) }
           onMouseLeave={ () => this.setState({ isHovered: false }) }

webapp/components/definition/cellRules/sections/mechanisms/NetPyNENewMechanism.js

@@ -3,31 +3,15 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import NavigationMoreHoriz from '@material-ui/icons/MoreHoriz';
 import { withStyles } from '@material-ui/core/styles'
-import Icon from '@material-ui/core/Icon'
 import Utils from '../../../../../Utils';
 import ContentAdd from '@material-ui/icons/Add'
 
-const styless = ({ spacing, palette }) => ({ 
+const styles = ({ spacing, palette }) => ({ 
   icon : { color: palette.primary.main },
-  disabledIcon : { color: '#d1d1d1', cursor: 'auto' }, 
+  disabledIcon : { color: '#d1d1d1', cursor: 'auto' },
+  iconContent: { position: 'absolute', color: 'white', top: '17px', left: '17px' },
 })
 
-
-const hoverColor = '#66d2e2';
-// const changeColor = 'rgb(0, 188, 212)';
-
-const styles = {
-  anchorOrigin: {
-    horizontal: 'left', 
-    vertical: 'bottom'
-  },
-  anchorTarget: {
-    horizontal: 'left',
-    vertical: 'top'
-  },
-  color: 'white'
-};
-
 class NetPyNENewMechanism extends React.Component {
 
   constructor (props) {
@@ -71,15 +55,15 @@ class NetPyNENewMechanism extends React.Component {
     }
   }
 
-  createLabel (){
+  createLabel (classes){
     const { disabled, blockButton } = this.props;
     if (disabled) {
       return ""
     } else {
       if (blockButton) {
-        return <NavigationMoreHoriz style={{ position: 'absolute', color: 'white', top: '15px', left: '15px' }}/>
+        return <NavigationMoreHoriz className={classes.iconContent}/>
       } else {
-        return <ContentAdd style={{ position: 'absolute', color: 'white', top: '15px', left: '15px' }}/>
+        return <ContentAdd className={classes.iconContent}/>
       }
     }
   }
@@ -100,7 +84,7 @@ class NetPyNENewMechanism extends React.Component {
               style={{ fontSize: '56px' }}
               className="gpt-fullgear"
             />
-            {this.createLabel()}
+            {this.createLabel(classes)}
           </div>
 
         </div>
@@ -127,4 +111,4 @@ class NetPyNENewMechanism extends React.Component {
   }
 }
 
-export default withStyles(styless)(NetPyNENewMechanism)
+export default withStyles(styles)(NetPyNENewMechanism)

webapp/components/definition/connectivity/NetPyNEConnectivityRule.js

@@ -12,6 +12,12 @@ import NetPyNECoordsRange from '../../general/NetPyNECoordsRange';
 import Dialog from '@material-ui/core/Dialog/Dialog';
 import Button from '@material-ui/core/Button';
 
+
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
 var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
 var PythonControlledTextField = PythonControlledCapability.createPythonControlledControl(TextField);
 var PythonMethodControlledSelectField = PythonControlledCapability.createPythonControlledControlWithPythonDataFetch(Select);
@@ -104,24 +110,26 @@ export default class NetPyNEConnectivityRule extends React.Component {
   }
 
   render () {
-    var actions = [
-      <Button
-        variant="contained"
-        color="primary"
-        label={"BACK"}
-        onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
-      />
-    ];
-    var title = this.state.errorMessage;
-    var children = this.state.errorDetails;
-    var dialogPop = (this.state.errorMessage != undefined) ? <Dialog
-      title={title}
-      open={true}
-      actions={actions}
-      bodyStyle={{ overflow: 'auto' }}
-      style={{ whiteSpace: "pre-wrap" }}>
-      {children}
-    </Dialog> : undefined;
+    var dialogPop = (this.state.errorMessage != undefined) ? (
+      <Dialog
+        open={true}
+        style={{ whiteSpace: "pre-wrap" }}>
+        <DialogTitle id="alert-dialog-title">{this.state.errorMessage}</DialogTitle>
+        <DialogContent style={{ overflow: 'auto' }}>
+          <DialogContentText id="alert-dialog-description">
+            {this.state.errorDetails}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
+          >BACK</Button>
+        </DialogActions>
+      </Dialog>
+    )
+      : undefined
 
     if (this.state.sectionId == "General") {
       var content = (

webapp/components/definition/populations/Dimensions.js

@@ -3,16 +3,28 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import Utils from '../../../Utils';
+import { withStyles } from '@material-ui/core/styles';
 
 import NetPyNEField from '../../general/NetPyNEField';
 var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
 
 var PythonControlledTextField = PythonControlledCapability.createPythonControlledControl(TextField);
 
+const styles = ({ spacing }) => ({
+  selectField: { 
+    marginTop: spacing(3),
+    width: '100%'
+  },
+  field:{
+    width: '95%!important',
+    marginLeft: spacing(3)
+  }
+})
+
 /**
  * Population Dimensions Component
  */
-export default class DimensionsComponent extends Component {
+class DimensionsComponent extends Component {
 
   constructor (props) {
     super(props);
@@ -78,10 +90,10 @@ export default class DimensionsComponent extends Component {
   }
 
   render () {
-
+    const { classes } = this.props
     return (
       <div>
-        <NetPyNEField id="netParams.popParams.numCells" className={"netpyneFieldNoWidth"} noStyle>
+        <NetPyNEField id="netParams.popParams.numCells" className={classes.selectField}>
           <Select
             id={"popParamsDimensionsSelect"}
             value={this.state.dimension}
@@ -101,7 +113,7 @@ export default class DimensionsComponent extends Component {
         </NetPyNEField>
         {
           this.state.dimension != undefined && this.state.dimension != ""
-            ? <NetPyNEField id={"netParams.popParams." + this.state.dimension} className={"netpyneRightField"} noStyle>
+            ? <NetPyNEField id={"netParams.popParams." + this.state.dimension} className={classes.fields}>
               <PythonControlledTextField
                 id={"popParamsDimensions"}
                 handleChange={this.handleDimValueChange}
@@ -116,3 +128,5 @@ export default class DimensionsComponent extends Component {
     )
   }
 }
+
+export default withStyles(styles)(DimensionsComponent)