[docs] Fix outdated links & demos

docs/src/modules/components/AppFrame.js

@@ -89,8 +89,8 @@ const styles = theme => ({
     display: 'block',
     padding: 4,
     textAlign: 'center',
-    backgroundColor: '#0a6fc2',
-    color: 'white',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.getContrastText(theme.palette.primary.dark),
   },
   grow: {
     flex: '1 1 auto',
@@ -108,7 +108,7 @@ const styles = theme => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     left: theme.spacing(2),
-    top: theme.spacing(-6),
+    top: theme.spacing(-10),
     zIndex: theme.zIndex.tooltip + 1,
     '&:focus': {
       top: theme.spacing(2),

docs/src/modules/components/Demo.js

@@ -50,6 +50,7 @@ const styles = theme => ({
     },
   },
   demo: {
+    outline: 'none',
     margin: 'auto',
     borderRadius: theme.shape.borderRadius,
     backgroundColor:
@@ -354,6 +355,7 @@ class Demo extends React.Component {
           className={clsx(classes.demo, {
             [classes.demoHiddenHeader]: demoOptions.hideHeader,
           })}
+          tabIndex={-1}
           onMouseEnter={this.handleDemoHover}
           onMouseLeave={this.handleDemoHover}
           style={{

docs/src/modules/components/HomeUsers.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
+import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
 import Button from '@material-ui/core/Button';
@@ -42,7 +43,6 @@ const styles = theme => ({
   container: {
     paddingTop: theme.spacing(14),
     paddingBottom: theme.spacing(14),
-    borderTop: `1px solid ${theme.palette.divider}`,
   },
   grid: {
     marginTop: theme.spacing(5),
@@ -58,8 +58,9 @@ function HomeUsers(props) {
 
   return (
     <div className={classes.root}>
+      <Divider />
       <NoSsr>
-        <Container className={classes.container}>
+        <Container maxWidth="md" className={classes.container}>
           <Typography variant="h4" align="center" gutterBottom>
             {t('whosUsing')}
           </Typography>

docs/src/modules/components/backers.md

@@ -1,4 +1,4 @@
-## Supporting Material-UI
+<h2 align="center">Supporting Material-UI</h2>
 
 Material-UI is an MIT-licensed open source project.
 It's an independent project with ongoing development made possible entirely

docs/src/pages/demos/text-fields/text-fields.md

@@ -150,4 +150,3 @@ For more advanced use cases you might be able to take advantage of:
 - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form.
 - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik.
 - [final-form-material-ui](https://github.com/Deadly0/final-form-material-ui) A set of wrapper components to facilitate using Material UI with Final Form.
-- [uniforms-material](https://github.com/vazco/uniforms/tree/master/packages/uniforms-material) Material-UI wrapper components for Uniforms, a set of React libraries for building forms.

docs/src/pages/guides/interoperability/interoperability.md

@@ -58,7 +58,7 @@ Explicitly providing the class names to the component is too much effort?
 
 **GlobalCssButton.css**
 ```css
-.MuiButton {
+.MuiButton-root {
   background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
   border-radius: 3px;
   border: 0;
@@ -144,7 +144,7 @@ Another approach is to use the `&&` characters in styled-components to [bump up
 If you attempt to style a Drawer with variant permanent,
 you will likely need to affect the Drawer's child paper element.
 However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work.
-You need to use the [`classes`](/css-in-js/advanced/#classes) API of Material-UI.
+You need to use the [`classes`](/css-in-js/advanced/#overriding-styles-classes-prop) API of Material-UI.
 
 The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component.
 
@@ -178,8 +178,7 @@ export default function StyledComponentsDeep() {
 
 {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideHeader": true}}
 
-The above demo relies on the default `classes` values.
-You can provide your own class name if you prefer: `.label`.
+The above demo relies on the [default `classes` values](/css-in-js/advanced/#with-material-ui-core) but you can provide your own class name: `.label`.
 
 ```jsx
 import React from 'react';