From c4b9a3276cf92d7fc53518b81e53b0f32b941633 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 6 Dec 2017 22:56:12 +0100
Subject: [PATCH] [docs] Remove extra spacing

---
 docs/src/pages/demos/app-bar/ButtonAppBar.js                 | 5 ++---
 docs/src/pages/demos/app-bar/MenuAppBar.js                   | 5 ++---
 docs/src/pages/demos/app-bar/SimpleAppBar.js                 | 5 ++---
 docs/src/pages/demos/buttons/ButtonBases.js                  | 1 -
 .../demos/expansion-panels/ControlledExpansionPanels.js      | 1 -
 .../pages/demos/expansion-panels/DetailedExpansionPanel.js   | 1 -
 .../src/pages/demos/expansion-panels/SimpleExpansionPanel.js | 1 -
 docs/src/pages/demos/snackbars/LongTextSnackbar.js           | 5 +----
 docs/src/pages/style/Color.js                                | 4 ++--
 9 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.js b/docs/src/pages/demos/app-bar/ButtonAppBar.js
index a3f0195faa41ef..522f5bd8b702d6 100644
--- a/docs/src/pages/demos/app-bar/ButtonAppBar.js
+++ b/docs/src/pages/demos/app-bar/ButtonAppBar.js
@@ -10,9 +10,8 @@ import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
 
-const styles = theme => ({
+const styles = {
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
   flex: {
@@ -22,7 +21,7 @@ const styles = theme => ({
     marginLeft: -12,
     marginRight: 20,
   },
-});
+};
 
 function ButtonAppBar(props) {
   const { classes } = props;
diff --git a/docs/src/pages/demos/app-bar/MenuAppBar.js b/docs/src/pages/demos/app-bar/MenuAppBar.js
index 813185b5ff120a..92126aaafa0d55 100644
--- a/docs/src/pages/demos/app-bar/MenuAppBar.js
+++ b/docs/src/pages/demos/app-bar/MenuAppBar.js
@@ -13,9 +13,8 @@ import Switch from 'material-ui/Switch';
 import { FormControlLabel, FormGroup } from 'material-ui/Form';
 import Menu, { MenuItem } from 'material-ui/Menu';
 
-const styles = theme => ({
+const styles = {
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
   flex: {
@@ -25,7 +24,7 @@ const styles = theme => ({
     marginLeft: -12,
     marginRight: 20,
   },
-});
+};
 
 class MenuAppBar extends React.Component {
   state = {
diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar.js b/docs/src/pages/demos/app-bar/SimpleAppBar.js
index d6da8cbf213d69..a1677d6217668d 100644
--- a/docs/src/pages/demos/app-bar/SimpleAppBar.js
+++ b/docs/src/pages/demos/app-bar/SimpleAppBar.js
@@ -7,12 +7,11 @@ import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
 
-const styles = theme => ({
+const styles = {
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
-});
+};
 
 function SimpleAppBar(props) {
   const { classes } = props;
diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js
index 7a178567775ee9..310f5ad4a4b512 100644
--- a/docs/src/pages/demos/buttons/ButtonBases.js
+++ b/docs/src/pages/demos/buttons/ButtonBases.js
@@ -8,7 +8,6 @@ import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 3,
     display: 'flex',
     flexWrap: 'wrap',
     minWidth: 300,
diff --git a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js
index eafa2dd1b0b3e0..94d33ef62f7d69 100644
--- a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js
+++ b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js
@@ -12,7 +12,6 @@ import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
   heading: {
diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
index 26e337b2a3e4de..9a1f6bc15a4f63 100644
--- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -17,7 +17,6 @@ import Divider from 'material-ui/Divider';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
   heading: {
diff --git a/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js b/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js
index 37983f17bb56bc..6d7db2a9bfd599 100644
--- a/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js
@@ -12,7 +12,6 @@ import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 3,
     width: '100%',
   },
   heading: {
diff --git a/docs/src/pages/demos/snackbars/LongTextSnackbar.js b/docs/src/pages/demos/snackbars/LongTextSnackbar.js
index 6720082297ffac..91392a84f810f3 100644
--- a/docs/src/pages/demos/snackbars/LongTextSnackbar.js
+++ b/docs/src/pages/demos/snackbars/LongTextSnackbar.js
@@ -13,9 +13,6 @@ const action = (
 );
 
 const styles = theme => ({
-  root: {
-    marginTop: theme.spacing.unit * 3,
-  },
   snackbar: {
     margin: theme.spacing.unit,
   },
@@ -25,7 +22,7 @@ function LongTextSnackbar(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.root}>
+    <div>
       <SnackbarContent className={classes.snackbar} message="I love snacks." action={action} />
       <SnackbarContent
         className={classes.snackbar}
diff --git a/docs/src/pages/style/Color.js b/docs/src/pages/style/Color.js
index 2379db218a1953..cd8c88d7665822 100644
--- a/docs/src/pages/style/Color.js
+++ b/docs/src/pages/style/Color.js
@@ -45,8 +45,8 @@ export const styles = theme => ({
     alignItems: 'center',
   },
   colorGroup: {
-    padding: '16px 0',
-    margin: '0 15px 0 0',
+    padding: 0,
+    margin: `0 ${theme.spacing.unit * 2}px 0 0`,
     flexGrow: 1,
     [theme.breakpoints.up('sm')]: {
       flexGrow: 0,