Update styling for Workspace Add / Manifest Form components (#2271)

* Update .mirador-workspace-add styles.

* Add some jss styling to the WorkspaceAdd List

* Add some jss styling fo the WorkspaceAdd form

src/components/ManifestForm.js

@@ -70,7 +70,7 @@ export class ManifestForm extends Component {
     return (
       <form onSubmit={this.formSubmit}>
         <Grid container spacing={24}>
-          <Grid item sm={9}>
+          <Grid item xs={12} sm={8} md={9}>
             <TextField
               fullWidth
               value={formValue}
@@ -88,7 +88,7 @@ export class ManifestForm extends Component {
               }}
             />
           </Grid>
-          <Grid item sm={3}>
+          <Grid item xs={12} sm={4} md={3} className={classes.buttons}>
             { onCancel && (
               <Button onClick={this.handleCancel}>
                 {t('cancel')}

src/components/WorkspaceAdd.js

@@ -56,10 +56,12 @@ export class WorkspaceAdd extends React.Component {
 
     return (
       <div className={ns('workspace-add')}>
+        <Paper className={classes.list}>
           <Typography variant="srOnly" component="h1">{t('miradorResources')}</Typography>
           <List>
             {manifestList}
           </List>
+        </Paper>
 
         <Fab
           variant="extended"
@@ -76,10 +78,10 @@ export class WorkspaceAdd extends React.Component {
           className={classNames({
             [classes.displayNone]: !addResourcesOpen,
           })}
+          classes={{ paper: classes.paper }}
           variant="persistent"
           anchor="bottom"
           open={addResourcesOpen}
-          PaperProps={{ style: { position: 'absolute', left: 100 } }}
           ModalProps={{
             disablePortal: true,
             hideBackdrop: true,
@@ -90,7 +92,7 @@ export class WorkspaceAdd extends React.Component {
             className={classes.form}
           >
             <AppBar position="absolute" color="secondary" onClick={() => (this.setAddResourcesVisibility(false))}>
-              <Toolbar>
+              <Toolbar variant="dense">
                 <MiradorMenuButton
                   aria-label={t('closeAddResourceMenu')}
                   className={classes.menuButton}

src/containers/ManifestForm.js

@@ -17,6 +17,12 @@ const mapDispatchToProps = { fetchManifest: actions.fetchManifest };
  * @param theme
  */
 const styles = theme => ({
+  buttons: {
+    textAlign: 'right',
+    [theme.breakpoints.up('sm')]: {
+      textAlign: 'inherit',
+    },
+  },
   input: {
     ...theme.typography.body1,
   },

src/containers/WorkspaceAdd.js

@@ -31,9 +31,11 @@ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddV
 const styles = theme => ({
   form: {
     ...theme.mixins.gutters(),
+    left: '0',
     paddingTop: theme.spacing.unit * 2,
     paddingBottom: theme.spacing.unit * 2,
-    marginTop: 64,
+    right: '0',
+    marginTop: 48,
   },
   fab: {
     position: 'absolute',
@@ -43,6 +45,16 @@ const styles = theme => ({
   displayNone: {
     display: 'none',
   },
+  list: {
+    margin: '16px',
+  },
+  paper: {
+    borderTop: '0',
+    left: '0',
+    [theme.breakpoints.up('sm')]: {
+      left: '65px',
+    },
+  },
   typographyBody: {
     flexGrow: 1,
   },

src/styles/index.scss

@@ -77,10 +77,8 @@
 
   &-workspace-add {
     height: 100%;
-    overflow: auto;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 92px;
+    overflow: hidden auto;
+    padding-top: 68px;
   }
 
   @media (min-width: 600px) {
@@ -91,7 +89,7 @@
 
     &-workspace-add {
       padding-left: 68px;
-      padding-top: 18px;
+      padding-top: 0;
     }
   }