// @flow

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Button from 'material-ui/Button';

// We can inject some CSS into the DOM.
const styleSheet = createStyleSheet('OverridesClassNames', {
  bouton: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
});

function OverridesClassNames(props) {
  return (
    <Button className={props.classes.bouton}>
      {props.children ? props.children : 'class names'}
    </Button>
  );
}

OverridesClassNames.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(OverridesClassNames);

@@ -279,18 +279,18 @@
 ', %7B%0A  b
-o
 u
+t
 ton: %7B%0A 
@@ -605,18 +605,18 @@
 lasses.b
-o
 u
+t
 ton%7D%3E%0A  

Fix typo in class name (#7192)