styles

src/App.css

@@ -8,7 +8,7 @@
 }
 
 .App-header {
-  /* background-color: #ff0000; */
+  background-color: #46a747!important;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -37,4 +37,8 @@
 
 #name-label {
   line-height: 4;
+}
+
+.attendee-name {
+  font-weight: 700;
 }

src/form.js

@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import { Button } from '@material-ui/core'
 import { FormControl, Input, InputLabel, FormHelperText } from '@material-ui/core'
+import { black } from 'ansi-colors';
 
 
 const styles = theme => ({
@@ -52,9 +53,9 @@ const cats = [
 const MakeAttendees = (attendees) => {
   const items = []
   for (let i = 0; i < attendees.length; i++) {
-    items.push(<div style={{flex: 1}}key={i}>{i+1}: <div><bold>Name:</bold> {attendees[i].name}</div><div><bold>Type: </bold>{attendees[i].cat ? attendees[i].cat : 'Incel, for sure'}</div><div><bold>Lonely: </bold>{attendees[i].guest ? 'Probably' : 'Very!'}</div><br /><br /></div>)
+    items.push(<div style={{flex: 1}}key={i}>{i+1}. <div>Name: <span className='attendee-name'>{attendees[i].name}</span></div><div>Type: <span className='attendee-name'>{attendees[i].cat ? attendees[i].cat : 'Incel, for sure'}</span></div><div>Lonely: <span className='attendee-name'>{attendees[i].guest ? 'Probably' : 'Very!'}</span></div><br /><br /></div>)
   }
-  return (<div style={{display: 'block', color: 'black', fontSize: '50%'}}>{items}</div>)
+  return (<div style={{display: 'block', color: 'black', fontSize: '50%', textAlign: 'left'}}>{items}</div>)
 }
 
 
@@ -182,9 +183,9 @@ class TextFields extends React.Component {
           </FormControl>
           <br />
           <Button style={{marginTop: '1.25em'}}onClick={this.submitForm}> Click to Confirm Attendance </Button>
-          <br />-
+          <br />
       </form>
-      <h3>Such lovely people, these:</h3>
+      <h5 style={{color: '#901a23', marginTop: '8px', marginBottom: '8px', padding: '4px'}}>Such lovely people, these:</h5>
         {this.state.attendees}
       </div>
     );