Merge pull request #962 from unicef/feature/#927-styling-spacing

fixes and changes to layout/ui
unicef · Jan 29, 2018 · e4778b9 · e4778b9
2 parents cc81118 + 04a75a3
commit e4778b9
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 68 deletions.
diff --git a/frontend/src/components/common/headerNavigation.js b/frontend/src/components/common/headerNavigation.js
@@ -30,6 +30,7 @@ const styleSheet = (theme) => {
       '@media print': {
         borderBottom: '0',
       },
+      background: '#fff',
     },
     alignItems: {
       display: 'flex',
@@ -41,7 +42,6 @@ const styleSheet = (theme) => {
     alignItemsPadding: {
       display: 'flex',
       alignItems: 'flex-end',
-      paddingBottom: `${padding}px`,
     },
     flex: {
       alignItems: 'flex-end',

diff --git a/frontend/src/components/common/list/paginatedList.js b/frontend/src/components/common/list/paginatedList.js
@@ -15,11 +15,11 @@ const table = {
 };
 
 const styleSheet = (theme) => {
-  const paddingSmall = theme.spacing.unit * 3;
-
+  const paddingSmall = theme.spacing.unit * 2;
+  const paddingBig = theme.spacing.unit * 3;
   return {
     container: {
-      padding: `${paddingSmall}px 0 ${paddingSmall}px ${paddingSmall}px`,
+      padding: `${paddingSmall}px 0 ${paddingSmall}px ${paddingBig}px`,
     },
   };
 };

diff --git a/frontend/src/components/common/list/selectableList.js b/frontend/src/components/common/list/selectableList.js
@@ -23,7 +23,7 @@ const table = {
 };
 
 const styleSheet = (theme) => {
-  const paddingSmall = theme.spacing.unit * 3;
+  const paddingSmall = theme.spacing.unit * 2;
   const paddingMedium = theme.spacing.unit * 4;
 
   return {

diff --git a/frontend/src/components/common/mainContentWrapper.js b/frontend/src/components/common/mainContentWrapper.js
@@ -6,9 +6,8 @@ import Paper from 'material-ui/Paper';
 
 const styleSheet = theme => ({
   root: {
-    background: theme.palette.primary[200],
     padding: theme.spacing.unit * 3,
-    height: '100%',
+    background: 'inherit',
   },
 });
 

diff --git a/frontend/src/components/layout/appBar.js b/frontend/src/components/layout/appBar.js
@@ -20,11 +20,6 @@ import SidebarMenu from './sidebarMenu';
 import Logout from './logout';
 
 const styleSheet = theme => ({
-  root: {
-    height: 60,
-    display: 'flex',
-    width: '100%',
-  },
   leftHeader: {
     [theme.breakpoints.down('xs')]: {
       width: '100%',
@@ -85,7 +80,7 @@ class MainAppBar extends Component {
   render() {
     const { classes } = this.props;
     return (
-      <div className={classes.root}>
+      <React.Fragment>
         <AppBar
           className={`${classes.header} ${classes.leftHeader} ${classes.noPrint}`}
           position="static"
@@ -148,7 +143,7 @@ class MainAppBar extends Component {
         >
           <Logout />
         </Popover>
-      </div>
+      </React.Fragment>
     );
   }
 }

diff --git a/frontend/src/components/layout/mainLayout.js b/frontend/src/components/layout/mainLayout.js
@@ -1,39 +1,32 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
-import Grid from 'material-ui/Grid';
-import Paper from 'material-ui/Paper';
 import SidebarMenu from './sidebarMenu';
 import MainAppBar from './appBar';
 
 // TODO check what can be done in muiTheme
 const styleSheet = theme => ({
   root: {
     margin: 'auto',
+    display: 'grid',
+    gridTemplateColumns: '224px auto',
+    gridTemplateRows: `${theme.spacing.unit * 8}px auto`,
+    height: '100vh',
+    width: '100vw',
   },
   rightItem: {
-    overflowX: 'scroll',
-    height: '100%',
-    width: '100%',
-    flexShrink: 1,
+    overflow: 'scroll',
+    background: theme.palette.primary[200],
   },
   border: {
   },
-  leftItem: {
+  fullWidth: {
     [theme.breakpoints.down('md')]: {
-      width: '100%',
+      gridColumnEnd: 'span 2',
     },
-    width: theme.spacing.unit * 28,
-    flex: '0 0 auto',
-    borderRight: `2px ${theme.palette.primary[300]} solid`,
   },
-  paper: {
-    minHeight: 'calc(100vh - 60px)',
-    display: 'flex',
-    width: '100%',
-    [theme.breakpoints.down('md')]: {
-      flexDirection: 'column',
-    },
+  leftItem: {
+    borderRight: `2px ${theme.palette.primary[300]} solid`,
   },
   noPrint: {
     '@media print': {
@@ -76,17 +69,15 @@ class MainLayout extends Component {
   render() {
     const { classes, children } = this.props;
     return (
-      <Grid container spacing={0} className={classes.root}>
+      <div className={classes.root}>
         <MainAppBar />
-        <Paper className={classes.paper}>
-          <div className={`${classes.leftItem} ${classes.noPrint}`}>
-            <SidebarMenu />
-          </div>
-          <div className={classes.rightItem}>
-            {children}
-          </div>
-        </Paper>
-      </Grid>
+        <div className={`${classes.leftItem} ${classes.noPrint} ${classes.fullWidth}`}>
+          <SidebarMenu />
+        </div>
+        <div className={`${classes.rightItem} ${classes.fullWidth}`}>
+          {children}
+        </div>
+      </div>
     );
   }
 }

diff --git a/frontend/src/components/layout/menuLink.js b/frontend/src/components/layout/menuLink.js
@@ -2,6 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ListItem, ListItemText, ListItemIcon } from 'material-ui/List';
 import Hidden from 'material-ui/Hidden';
+import { withStyles } from 'material-ui/styles';
+
+const styleSheet = theme => ({
+  default: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+  },
+  icon: {
+    color: 'inherit',
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: theme.palette.primary[200],
+      color: theme.palette.secondary[500],
+    },
+    '&.active': {
+      backgroundColor: theme.palette.primary[200],
+      color: theme.palette.secondary[500],
+    },
+  },
+});
 
 const menuLink = (props) => {
   const { active, onClick, icon, label, classes } = props;
@@ -10,6 +31,7 @@ const menuLink = (props) => {
       className={active ? 'active' : ''}
       classes={{
         button: classes.button,
+        default: classes.default,
       }}
       button
       onClick={onClick}
@@ -32,4 +54,4 @@ menuLink.propTypes = {
   classes: PropTypes.object,
 };
 
-export default menuLink;
+export default withStyles(styleSheet, { name: 'menuLink' })(menuLink);
diff --git a/frontend/src/components/layout/sidebarMenu.js b/frontend/src/components/layout/sidebarMenu.js
@@ -17,30 +17,12 @@ const styleSheet = theme => ({
     alignContent: 'space-between',
   },
   logo: {
-    [theme.breakpoints.down('md')]: {
-      width: '100%',
-      position: 'inherit',
-    },
-    width: theme.spacing.unit * 28,
-    position: 'fixed',
-    bottom: 0,
+    width: '100%',
   },
   innerLogo: {
     padding: theme.spacing.unit * 2,
   },
-  icon: {
-    color: 'inherit',
-  },
-  button: {
-    '&:hover': {
-      backgroundColor: theme.palette.primary[200],
-      color: theme.palette.secondary[500],
-    },
-    '&.active': {
-      backgroundColor: theme.palette.primary[200],
-      color: theme.palette.secondary[500],
-    },
-  },
+
 });
 
 function sidebarMenu(props) {
@@ -52,10 +34,6 @@ function sidebarMenu(props) {
         label={item.label}
         key={item.label}
         icon={createElement(item.icon)}
-        classes={{
-          button: classes.button,
-          icon: classes.icon,
-        }}
         onClick={() => onItemClick(index, item.path)}
       />
     );

diff --git a/frontend/src/components/organizationProfile/edit/partnerProfileEdit.js b/frontend/src/components/organizationProfile/edit/partnerProfileEdit.js
@@ -86,7 +86,7 @@ class PartnerProfileEdit extends Component {
           backButton
           defaultReturn={`/profile/${id}/overview`}
           handleChange={this.handleChange}
-          tabsProps={{ scrollButtons: 'on' }}
+          tabsProps={{ scrollButtons: 'auto' }}
         >
           {(index !== -1) && children}
         </HeaderNavigation>

diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
@@ -1,6 +1,7 @@
 html {
   height: 100%;
   font-family: 'Roboto', sans-serif;
+  font-size: 14px;
 }
 
 body {

diff --git a/frontend/src/styles/muiTheme.js b/frontend/src/styles/muiTheme.js
@@ -99,6 +99,21 @@ const theme = {
     MuiDefaultTab: {
       fontWeight: 400,
     },
+    MuiTableHead: {
+      root: {
+        fontSize: '0.9rem',
+      },
+    },
+    MuiTableBody: {
+      root: {
+        fontSize: '1rem',
+      },
+    },
+    MuiTab: {
+      rootLabelIcon: {
+        height: '48px',
+      },
+    },
   },
 };
 const getTheme = () => (