Add some basic styling around the anno creation form

src/AnnotationCreation.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
 import PolygonIcon from '@material-ui/icons/Timeline';
 import { v4 as uuid } from 'uuid';
+import { withStyles } from '@material-ui/core/styles';
 import AnnotationDrawing from './AnnotationDrawing';
 import TextEditor from './TextEditor';
 import WebAnnotation from './WebAnnotation';
@@ -71,10 +75,10 @@ class AnnotationCreation extends Component {
 
   /** */
   render() {
-    const { parentactions, windowId } = this.props;
+    const { classes, parentactions, windowId } = this.props;
     const { activeTool } = this.state;
     return (
-      <div>
+      <Paper className={classes.root}>
         { activeTool && (
           <AnnotationDrawing
             activeTool={activeTool}
@@ -83,6 +87,13 @@ class AnnotationCreation extends Component {
           />
         )}
         <form onSubmit={this.submitForm}>
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="overline">
+                Target
+              </Typography>
+            </Grid>
+            <Grid item xs={12}>
               <ToggleButtonGroup
                 value={activeTool}
                 exclusive
@@ -100,9 +111,27 @@ class AnnotationCreation extends Component {
                   <PolygonIcon />
                 </ToggleButton>
               </ToggleButtonGroup>
+            </Grid>
+          </Grid>
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="overline">
+                Style
+              </Typography>
+            </Grid>
+          </Grid>
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="overline">
+                Content
+              </Typography>
+            </Grid>
+            <Grid item xs={12}>
               <TextEditor
                 updateAnnotationBody={this.updateBody}
               />
+            </Grid>
+          </Grid>
           <Button onClick={parentactions.closeCompanionWindow}>
             Cancel
           </Button>
@@ -110,15 +139,25 @@ class AnnotationCreation extends Component {
             Save
           </Button>
         </form>
-      </div>
+      </Paper>
     );
   }
 }
 
+/** */
+const styles = (theme) => ({
+  root: {
+    padding: theme.spacing(1),
+  },
+});
+
 AnnotationCreation.propTypes = {
   canvases: PropTypes.arrayOf(
     PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
   ),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+  }).isRequired,
   config: PropTypes.shape({
     annotation: PropTypes.shape({
       adapter: PropTypes.func,
@@ -137,4 +176,4 @@ AnnotationCreation.defaultProps = {
 };
 
 
-export default AnnotationCreation;
+export default withStyles(styles)(AnnotationCreation);

src/TextEditor.js

@@ -5,6 +5,7 @@ import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import BoldIcon from '@material-ui/icons/FormatBold';
 import ItalicIcon from '@material-ui/icons/FormatItalic';
+import { withStyles } from '@material-ui/core/styles';
 import { stateToHTML } from 'draft-js-export-html';
 
 /** */
@@ -22,7 +23,6 @@ class TextEditor extends Component {
   onChange(editorState) {
     const { updateAnnotationBody } = this.props;
     this.setState({ editorState });
-    console.log(this.props);
     if (updateAnnotationBody) {
       const options = {
         inlineStyles: {
@@ -52,6 +52,7 @@ class TextEditor extends Component {
 
   /** */
   render() {
+    const { classes } = this.props;
     const { editorState } = this.state;
     const currentStyle = editorState.getCurrentInlineStyle();
     return (
@@ -73,17 +74,37 @@ class TextEditor extends Component {
             <ItalicIcon />
           </ToggleButton>
         </ToggleButtonGroup>
+        <div className={classes.editorRoot}>
           <Editor
             editorState={editorState}
             handleKeyCommand={this.handleKeyCommand}
             onChange={this.onChange}
           />
         </div>
+      </div>
     );
   }
 }
 
+/** */
+const styles = (theme) => ({
+  editorRoot: {
+    borderColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)',
+    borderRadius: theme.shape.borderRadius,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontFamily: theme.typography.fontFamily,
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    minHeight: theme.typography.fontSize * 6,
+    padding: theme.spacing(1),
+  },
+});
+
 TextEditor.propTypes = {
+  classes: PropTypes.shape({
+    editorRoot: PropTypes.string,
+  }).isRequired,
   updateAnnotationBody: PropTypes.func,
 };
 
@@ -91,4 +112,4 @@ TextEditor.defaultProps = {
   updateAnnotationBody: () => {},
 };
 
-export default TextEditor;
+export default withStyles(styles)(TextEditor);