New theme based on graphql playground

taskcluster · Mar 19, 2018 · a7cc659 · a7cc659
1 parent f167744
commit a7cc659
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "error-stack-parser": "^2.0.1",
-    "material-ui": "^1.0.0-beta.37",
-    "mdi-react": "^2.1.19",
+    "material-ui": "1.0.0-beta.38",
+    "mdi-react": "^3.0.0",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -34,6 +34,6 @@
     "husky": "^0.14.3",
     "lint-staged": "^7.0.0",
     "neutrino": "^8.1.2",
-    "neutrino-preset-mozilla-frontend-infra": "^1.1.0"
+    "neutrino-preset-mozilla-frontend-infra": "^2.0.2"
   }
 }
diff --git a/src/App/index.jsx b/src/App/index.jsx
@@ -23,7 +23,7 @@ const NotFound = loadable(() =>
 @hot(module)
 export default class App extends Component {
   state = {
-    error: null
+    error: null,
   };
 
   componentDidCatch(error) {

diff --git a/src/components/AppView/SidebarListGroup.jsx b/src/components/AppView/SidebarListGroup.jsx
@@ -11,23 +11,23 @@ import SidebarListItem from './SidebarListItem';
 @withStyles(theme => ({
   listGroup: {
     '& > a': {
-      paddingLeft: theme.spacing.triple
-    }
-  }
+      paddingLeft: theme.spacing.triple,
+    },
+  },
 }))
 export default class SidebarListGroup extends Component {
   static propTypes = {
     children: arrayOf(node).isRequired,
     title: string.isRequired,
-    icon: node
+    icon: node,
   };
 
   static defaultProps = {
-    icon: null
+    icon: null,
   };
 
   state = {
-    open: false
+    open: false,
   };
 
   handleClick = e => {

diff --git a/src/components/AppView/SidebarListItem.jsx b/src/components/AppView/SidebarListItem.jsx
@@ -1,30 +1,44 @@
-import { Component } from 'react';
+import { Component, cloneElement } from 'react';
 import { node, string } from 'prop-types';
+import classNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import { withStyles } from 'material-ui/styles';
 import { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
 
 @withStyles(theme => ({
   active: {
-    backgroundColor: theme.palette.text.active
+    backgroundColor: theme.palette.text.active,
+    '& $text': {
+      color: theme.palette.common.white,
+    },
+    '& $icon': {
+      fill: theme.palette.common.white,
+    },
   },
   listItem: {
     paddingLeft: theme.spacing.double,
-    paddingRight: theme.spacing.unit
-  }
+    paddingRight: theme.spacing.unit,
+  },
+  text: {
+    color: theme.palette.text.inactive,
+    fontFamily: 'Roboto500',
+  },
+  icon: {
+    fill: theme.palette.text.inactive,
+  },
 }))
 export default class SidebarListItem extends Component {
   static propTypes = {
     children: node.isRequired,
     to: string,
     icon: node,
-    rightIcon: node
+    rightIcon: node,
   };
 
   static defaultProps = {
     to: null,
     icon: null,
-    rightIcon: null
+    rightIcon: null,
   };
 
   render() {
@@ -38,9 +52,17 @@ export default class SidebarListItem extends Component {
         component={NavLink}
         activeClassName={classes.active}
         {...props}>
-        {icon && <ListItemIcon>{icon}</ListItemIcon>}
-        <ListItemText inset primary={children} />
-        {rightIcon}
+        {icon && <ListItemIcon className={classes.icon}>{icon}</ListItemIcon>}
+        <ListItemText
+          disableTypography
+          className={classes.text}
+          inset
+          primary={children}
+        />
+        {rightIcon &&
+          cloneElement(rightIcon, {
+            className: classNames(rightIcon.props.className, classes.icon),
+          })}
       </ListItem>
     );
   }

diff --git a/src/components/AppView/UserMenu.jsx b/src/components/AppView/UserMenu.jsx
@@ -8,12 +8,12 @@ import AccountCircleIcon from 'mdi-react/AccountCircleIcon';
 
 @withStyles(theme => ({
   avatar: {
-    backgroundColor: theme.palette.secondary.main
-  }
+    backgroundColor: theme.palette.secondary.main,
+  },
 }))
 export default class UserMenu extends Component {
   state = {
-    anchorEl: null
+    anchorEl: null,
   };
 
   handleMenuClick = e => this.setState({ anchorEl: e.currentTarget });

diff --git a/src/components/AppView/index.jsx b/src/components/AppView/index.jsx
@@ -25,72 +25,76 @@ import SidebarList from './SidebarList';
       overflow: 'hidden',
       position: 'relative',
       display: 'flex',
-      width: '100vw'
+      width: '100vw',
     },
     appBar: {
       position: 'fixed',
       backgroundColor: theme.palette.secondary.main,
       zIndex: theme.zIndex.drawer + 1,
       [theme.breakpoints.up('md')]: {
-        width: `calc(100% - ${theme.drawerWidth}px)`
-      }
+        width: `calc(100% - ${theme.drawerWidth}px)`,
+      },
+    },
+    appBarTitle: {
+      fontFamily: 'Roboto300',
     },
     navIconHide: {
       [theme.breakpoints.up('md')]: {
-        display: 'none'
-      }
+        display: 'none',
+      },
     },
     toolbar: {
       ...theme.mixins.toolbar,
       paddingLeft: theme.spacing.double,
       display: 'flex',
       flexGrow: 1,
       flexDirection: 'row',
-      alignItems: 'center'
+      alignItems: 'center',
     },
     drawerPaper: {
       color: theme.palette.secondary.contrastText,
       width: theme.drawerWidth,
       [theme.breakpoints.up('md')]: {
-        position: 'fixed'
-      }
+        position: 'fixed',
+      },
+      borderRight: 0,
     },
     title: {
+      textDecoration: 'none',
       color: theme.palette.common.white,
-      textDecoration: 'none'
     },
     content: {
       flexGrow: 1,
-      padding: theme.spacing.triple,
+      backgroundColor: theme.palette.primary.background,
       paddingBottom: theme.spacing.unit * 12,
       overflowY: 'auto',
-      height: 'calc(100% - 56px)',
+      minHeight: 'calc(100vh - 56px)',
       marginTop: 56,
       [theme.breakpoints.up('sm')]: {
-        height: 'calc(100% - 64px)',
-        marginTop: 64
+        minHeight: 'calc(100vh - 64px)',
+        marginTop: 64,
       },
       [theme.breakpoints.up('md')]: {
         marginLeft: theme.drawerWidth,
-        width: `calc(100% - ${theme.drawerWidth}px)`
-      }
-    }
+        width: `calc(100% - ${theme.drawerWidth}px)`,
+      },
+    },
   }),
   { withTheme: true }
 )
 export default class AppView extends Component {
   static propTypes = {
     children: node.isRequired,
-    title: string
+    title: string,
   };
 
   static defaultProps = {
-    title: ''
+    title: '',
   };
 
   state = {
     mobileOpen: false,
-    error: null
+    error: null,
   };
 
   componentDidCatch(error) {
@@ -142,7 +146,7 @@ export default class AppView extends Component {
               className={classes.navIconHide}>
               <MenuIcon />
             </IconButton>
-            <Typography variant="title" noWrap className={classes.title}>
+            <Typography variant="title" noWrap className={classes.appBarTitle}>
               {title}
             </Typography>
           </Toolbar>
@@ -154,10 +158,10 @@ export default class AppView extends Component {
             open={mobileOpen}
             onClose={this.handleDrawerToggle}
             classes={{
-              paper: classes.drawerPaper
+              paper: classes.drawerPaper,
             }}
             ModalProps={{
-              keepMounted: true
+              keepMounted: true,
             }}>
             {drawer}
           </Drawer>
@@ -166,8 +170,11 @@ export default class AppView extends Component {
           <Drawer
             variant="permanent"
             open
+            PaperProps={{
+              elevation: 2,
+            }}
             classes={{
-              paper: classes.drawerPaper
+              paper: classes.drawerPaper,
             }}>
             {drawer}
           </Drawer>

diff --git a/src/components/ErrorPanel/ErrorBox.jsx b/src/components/ErrorPanel/ErrorBox.jsx
@@ -12,18 +12,18 @@ import CardContent from 'material-ui/Card/CardContent';
     textAlign: 'left',
     fontSize: 16,
     lineHeight: 1.2,
-    overflow: 'auto'
+    overflow: 'auto',
   },
   stack: {
-    fontFamily: 'monospace'
+    fontFamily: 'monospace',
   },
   frame: {
-    marginTop: '1em'
-  }
+    marginTop: '1em',
+  },
 })
 export default class ErrorBox extends RedBoxError {
   static propTypes = {
-    error: instanceOf(Error).isRequired
+    error: instanceOf(Error).isRequired,
   };
 
   render() {

diff --git a/src/components/ErrorPanel/index.jsx b/src/components/ErrorPanel/index.jsx
@@ -4,7 +4,7 @@ import { withStyles } from 'material-ui/styles';
 import Typography from 'material-ui/Typography';
 import ExpansionPanel, {
   ExpansionPanelSummary,
-  ExpansionPanelDetails
+  ExpansionPanelDetails,
 } from 'material-ui/ExpansionPanel';
 import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
 import ErrorBox from './ErrorBox';
@@ -13,15 +13,15 @@ import ErrorBox from './ErrorBox';
   panel: {
     color: theme.palette.error.contrastText,
     backgroundColor: theme.palette.error.main,
-    borderColor: theme.palette.error.light
+    borderColor: theme.palette.error.light,
   },
   disabled: {
-    opacity: 1
+    opacity: 1,
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular
-  }
+    fontWeight: theme.typography.fontWeightRegular,
+  },
 }))
 /**
  * Render an error in a panel. Will be expandable display stack traces
@@ -30,7 +30,7 @@ import ErrorBox from './ErrorBox';
 export default class ErrorPanel extends Component {
   static propTypes = {
     /** Error to display */
-    error: oneOfType([string, instanceOf(Error)]).isRequired
+    error: oneOfType([string, instanceOf(Error)]).isRequired,
   };
 
   render() {

diff --git a/src/components/FontStager/index.css b/src/components/FontStager/index.css
@@ -33,7 +33,7 @@ html, body {
   font-family: sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 /*

diff --git a/src/components/FontStager/index.jsx b/src/components/FontStager/index.jsx
@@ -15,11 +15,11 @@ export default class FontStager extends Component {
                 className: 'font-stage-secondary',
                 families: [
                   { family: 'Roboto300', options: { weight: 300 } },
-                  { family: 'Roboto500', options: { weight: 500 } }
-                ]
-              }
-            ]
-          }
+                  { family: 'Roboto500', options: { weight: 500 } },
+                ],
+              },
+            ],
+          },
         ]}
       />
     );

diff --git a/src/components/PageTitle/index.jsx b/src/components/PageTitle/index.jsx
@@ -4,7 +4,7 @@ import Helmet, { title } from 'react-helmet';
 
 export default class PageTitle extends PureComponent {
   static propTypes = {
-    children: string.isRequired
+    children: string.isRequired,
   };
 
   render() {