X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/d6a65f155ca546aea3a777e73076c2c80f2c88cc..e9d30481d8d57a0b906364ee115e136305b7ce79:/src/components/form-dialog/form-dialog.tsx

diff --git a/src/components/form-dialog/form-dialog.tsx b/src/components/form-dialog/form-dialog.tsx
index 29c0b163..40050b76 100644
--- a/src/components/form-dialog/form-dialog.tsx
+++ b/src/components/form-dialog/form-dialog.tsx
@@ -8,7 +8,7 @@ import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
 
-type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "progressIndicator" | "dialogActions";
+type CssRules = "button" | "lastButton" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     button: {
@@ -26,63 +26,59 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     dialogTitle: {
         paddingBottom: "0"
     },
-    textField: {
-        marginTop: "32px",
-    },
-    dialog: {
-        minWidth: "600px",
-        minHeight: "320px"
-    },
     progressIndicator: {
         position: "absolute",
         minWidth: "20px",
     },
     dialogActions: {
-        marginBottom: "24px"
+        marginBottom: theme.spacing.unit * 3
     }
 });
 
-interface DialogProjectProps {
+interface DialogProjectDataProps {
     cancelLabel?: string;
     dialogTitle: string;
-    formFields: React.ComponentType<InjectedFormProps<any>>;
+    formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
     submitLabel?: string;
 }
 
-export const FormDialog = withStyles(styles)((props: DialogProjectProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>) =>
+type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
+
+export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
     <Dialog
         open={props.open}
         onClose={props.closeDialog}
         disableBackdropClick={props.submitting}
-        disableEscapeKeyDown={props.submitting}>
-        <div className={props.classes.dialog}>
-            <form>
-                <DialogTitle className={props.classes.dialogTitle}>
-                    {props.dialogTitle}
-                </DialogTitle>
-                <DialogContent className={props.classes.formContainer}>
-                    <props.formFields {...props} />
-                </DialogContent>
-                <DialogActions className={props.classes.dialogActions}>
-                    <Button
-                        onClick={props.closeDialog}
-                        className={props.classes.button}
-                        color="primary"
-                        disabled={props.submitting}>
-                        {props.cancelLabel || 'Cancel'}
-                    </Button>
-                    <Button
-                        onClick={props.handleSubmit}
-                        className={props.classes.lastButton}
-                        color="primary"
-                        disabled={props.invalid || props.submitting || props.pristine}
-                        variant="contained">
-                        {props.submitLabel || 'Submit'}
-                        {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
-                    </Button>
-                </DialogActions>
-            </form>
-        </div>
+        disableEscapeKeyDown={props.submitting}
+        fullWidth
+        maxWidth='sm'>
+        <form>
+            <DialogTitle className={props.classes.dialogTitle}>
+                {props.dialogTitle}
+            </DialogTitle>
+            <DialogContent className={props.classes.formContainer}>
+                <props.formFields {...props} />
+            </DialogContent>
+            <DialogActions className={props.classes.dialogActions}>
+                <Button
+                    onClick={props.closeDialog}
+                    className={props.classes.button}
+                    color="primary"
+                    disabled={props.submitting}>
+                    {props.cancelLabel || 'Cancel'}
+                </Button>
+                <Button
+                    type="submit"
+                    onClick={props.handleSubmit}
+                    className={props.classes.lastButton}
+                    color="primary"
+                    disabled={props.invalid || props.submitting || props.pristine}
+                    variant="contained">
+                    {props.submitLabel || 'Submit'}
+                    {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
+                </Button>
+            </DialogActions>
+        </form>
     </Dialog>
 );