apply material design ; make whole dialog draggable

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -4,6 +4,9 @@ import Dialog from './draggable-dialog';
 
 import './draggable-dialog/css/index.css';
 
+const defaultDialogHeight = 100; //px
+const dialogHeightPerLine = 25; //px
+
 export class ValidationErrorsInfoDialog extends React.Component {
 
     state = {
@@ -29,7 +32,6 @@ export class ValidationErrorsInfoDialog extends React.Component {
         <FlatButton
           label="Dismiss"
           primary={true}
-          keyboardFocused={true}
           onClick={this.handleClose}
         />,
       ];
@@ -43,6 +45,8 @@ export class ValidationErrorsInfoDialog extends React.Component {
                     isDraggable={this.props.draggable ? this.props.draggable : false}
                     buttons={actions}
                     hasCloseIcon={false}
+                    modal={this.props.modal ? this.props.modal : false}
+                    height={defaultDialogHeight + this.props.errorMessages.length * dialogHeightPerLine}
                 >
                     {this.props.errorMessages.map(errorMessage => {
                       return (

src/components/Shared/draggable-dialog/css/index.css

@@ -51,13 +51,17 @@ a {
     border-radius: 3px;
     padding: 0.5em;
     height: 35px;
-    border-bottom: 1px solid #f6f6f6;
+    /*border-bottom: 1px solid #f6f6f6;*/
 }
 
 .ui-dialog.react-draggable .ui-dialog-titlebar {
     cursor: move;
 }
 
+.ui-dialog.react-draggable .ui-dialog-content {
+    cursor: move;
+}
+
 .ui-dialog .ui-dialog-titlebar .action-items {
     float: right;
     position: relative;
@@ -66,8 +70,11 @@ a {
 .ui-dialog .ui-dialog-titlebar .title {
     float: left;
     margin-right: .5em;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 1.5em;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 1.3125em;
+    font-weight: 500;
+    line-height: 0.2em;
+    padding : 24px 0px 0px 19px;
 }
 
 .icon {
@@ -103,7 +110,12 @@ a {
     border: 0 none;
     overflow: auto;
     position: relative;
-    padding: 0.5em;
+    font-size: 1rem;
+    font-weight: 400;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    line-height: 1.5em;
+    color:rgba(0, 0, 0, 0.54);
+    padding : 24px 24px 24px 24px;
 }
 
 .ui-dialog .ui-dialog-buttonpane {
@@ -112,7 +124,7 @@ a {
     bottom: 0;
     text-align: right;
     border-width: 1px 0 0 0;
-    border-top: 1px solid #f6f6f6;
+    /*border-top: 1px solid #f6f6f6;*/
 }
 
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{

src/components/Shared/draggable-dialog/index.js

@@ -111,7 +111,7 @@ class Dialog extends React.Component {
 
         if (!isMinimized && !isMaximized && isDraggable !== false) {
             dialog = (
-                <Draggable handle=".ui-dialog-titlebar" bounds="body" defaultPosition={{ x, y }}>
+                <Draggable handle=".ui-dialog" bounds="body" defaultPosition={{ x, y }}>
                     {dialog}
                 </Draggable>
             );
@@ -153,8 +153,8 @@ Dialog.propTypes = {
 };
 
 Dialog.defaultProps = {
-    height: 300,
-    width: 500,
+    height: 200,
+    width: 600,
     modal: false,
     closeOnEscape: true,
     isDraggable: false,