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-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    font-size: 1.5em;
+    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,
+    height: 200,
-    width: 500,
+    width: 600,
     modal: false,
     closeOnEscape: true,
     isDraggable: false,

src/routes/app/routes/forms/routes/steppers/components/VerticalNonLinear.js

@@ -406,8 +406,7 @@ class VerticalNonLinear extends React.Component {
       return_time: new Date(),
       pickupTimeHide: false,
       showValidationErrors:false,
-      validationErrors:[],
+      validationErrors:[]
-      draggableDialog: false
     };
   }
 
@@ -526,8 +525,7 @@ class VerticalNonLinear extends React.Component {
             //Unprocessable Entity (validation failed)
             self.setState(Object.assign(self.state, {
               showValidationErrors:true,
-              validationErrors:error.response.data.data,
+              validationErrors:error.response.data.data
-              draggableDialog:true,
             }));
           }
         });
@@ -898,7 +896,7 @@ class VerticalNonLinear extends React.Component {
           <div className="box-body padding-xs">
 
             <div style={{ maxWidth: 380, margin: 'auto' }}>
-            <ValidationErrorsInfoDialog title={'Errors'} open = {this.state.showValidationErrors} draggable={this.state.draggableDialog} errorMessages = {this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+            <ValidationErrorsInfoDialog title={'Errors'} open = {this.state.showValidationErrors} draggable={true} modal={false} errorMessages = {this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
               
               <Stepper
                 activeStep={this.state.stepIndex}

src/routes/app/routes/pages/routes/eligibility/components/eligibility.js

@@ -37,8 +37,7 @@ class SignUp extends React.Component {
     validated: false,
     memberType:"S",
     showValidationErrors: false,
-    validationErrors:[],
+    validationErrors:[]
-    draggableDialog: false,
   }
 
   componentDidMount = () => {
@@ -108,7 +107,7 @@ class SignUp extends React.Component {
     }).catch(function (err) {
       if (err.response.status === 422){
         //Unprocessable Entity (validation failed)
-        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data, draggableDialog:false}))
+        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data}))
       }else{
         console.log('Error to get eligibility: ', err);
         alert('NO benefits found for this member');
@@ -193,7 +192,7 @@ class SignUp extends React.Component {
     return (
       <form className="">
         <fieldset>
-          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} draggable={this.state.draggableDialog} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} draggable={false} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
           <div className="form-group">
             <TextField
               floatingLabelText="First Name"