message: Better, more configurable ModalDialog
diff: import React from 'react';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  +import { width, height, maxHeight, maxWidth } from 'styled-system';
  -import colors from 'react/styles/colors';
  +import { preset } from 'react/styles/functions';
  const Dialog = styled.div`
  - width: 90%;
  - max-width: 40em;
  - max-height: 90%;
  - background-color: ${colors.gray.semiLight};
  - border-radius: .25em;
  + display: flex;
  + box-sizing: border-box;
  padding: 5px;
  + overflow: hidden;
  + border-radius: 0.25em;
  + background-color: ${x => x.theme.colors.gray.semiLight};
  + ${preset(width, { width: '90%' })}
  + ${preset(height, { height: '90%' })}
  + ${preset(maxWidth, { maxWidth: '40em' })}
  + ${preset(maxHeight, { maxHeight: '60em' })}
  `;
  const Content = styled.div`
  + box-sizing: border-box;
  display: flex;
  flex-direction: column;
  - min-height: 10em;
  - height: 100%;
  + flex-grow: 1;
  + overflow-y: auto;
  + -webkit-overflow-scrolling: touch;
  background-color: white;
  - border: 1px solid ${colors.gray.regular};
  + border: 1px solid ${x => x.theme.colors.gray.regular};
  `;
  -const Component = ({ children, ...rest }) => (
  +const ModalDialog = ({ children, ...rest }) => (
  <Dialog {...rest}>
  <Content>
  {children}
  @@ -30,8 +37,8 @@ const Component = ({ children, ...rest }) => (
  </Dialog>
  );
  -Component.propTypes = {
  +ModalDialog.propTypes = {
  children: PropTypes.node.isRequired,
  };
  -export default Component;
  +export default ModalDialog;
  