adding santa`s sack

src/App.css

@@ -45,4 +45,14 @@
 
 .attendee-name {
   font-weight: 700;
+}
+
+#hugeAssImage {
+  position: fixed;
+  width: auto;
+  height: 35%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
 }

src/form.js

@@ -120,6 +120,7 @@ class TextFields extends React.Component {
     if (!response.error) {
       console.log('Success')
       this.setState({attendees: MakeAttendees(await this.fetchAttendees())})
+      addHugeAssImage()
     }
   }
 
@@ -143,7 +144,7 @@ class TextFields extends React.Component {
     const { classes } = this.props;
 
     return (
-      <div>
+      <div id='form-wrap'>
       <form className={classes.container} noValidate autoComplete="off">
       <div className='name-wrap' id='name-wrap' style={styles.fullWidth}>
           <InputLabel id='name-label' htmlFor="attendee-name">Name</InputLabel>
@@ -193,6 +194,15 @@ class TextFields extends React.Component {
   }
 }
 
+function addHugeAssImage() {
+  setTimeout(() => {
+    const image = document.createElement('img')
+    image.id ='hugeAssImage'
+    image.src = require('./santa-sack.jpg')
+    document.getElementById('form-wrap').appendChild(image)
+  }, 1200)
+}
+
 TextFields.propTypes = {
   classes: PropTypes.object.isRequired,
 };