v1.6.0/cleanup, create expander, peacock msg

app/src/Create.js

@@ -77,6 +77,7 @@ export default class Create extends Component {
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
       allowChatNotification:
         LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
+      expanded: 'alerts',
     };
     this.createCall = this.createCall.bind(this);
     this.joinCall = this.joinCall.bind(this);
@@ -242,6 +243,11 @@ export default class Create extends Component {
     if (alertStep + direction >= this.props.status.alerts.length) return;
     this.setState({ alertStep: alertStep + direction });
   }
+  handleExpanders(e) {
+    const { expanded } = this.state;
+    if (e === expanded) this.setState({ expanded: '' });
+    else this.setState({ expanded: e });
+  }
   render() {
     const {
       mode,
@@ -253,6 +259,7 @@ export default class Create extends Component {
       allowAutoRejoin,
       allowChatNotification,
       alertStep,
+      expanded,
     } = this.state;
     const { status } = this.props;
     return (
@@ -365,8 +372,11 @@ export default class Create extends Component {
             <span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
           </Button>
         </Paper>
-        <ExpansionPanel defaultExpanded className="create-settings-card">
-          <ExpansionPanelSummary expandIcon={<ExpandLess />}>
+        <ExpansionPanel expanded={expanded === 'alerts'} className="create-settings-card">
+          <ExpansionPanelSummary
+            onClick={() => this.handleExpanders('alerts')}
+            expandIcon={<ExpandLess />}
+          >
             <Notifications />
             <Typography className="create-settings-title" variant="button">
               Alerts
@@ -399,8 +409,7 @@ export default class Create extends Component {
                   activeStep={alertStep}
                   backButton={
                     <IconButton disabled={alertStep === 0} onClick={() => this.handleSteps(-1)}>
-                      {' '}
-                      <KeyboardArrowLeft />{' '}
+                      <KeyboardArrowLeft />
                     </IconButton>
                   }
                   nextButton={
@@ -408,8 +417,7 @@ export default class Create extends Component {
                       disabled={alertStep === status.alerts.length - 1}
                       onClick={() => this.handleSteps(1)}
                     >
-                      {' '}
-                      <KeyboardArrowRight />{' '}
+                      <KeyboardArrowRight />
                     </IconButton>
                   }
                   steps={status.alerts ? status.alerts.length : 0}
@@ -422,8 +430,11 @@ export default class Create extends Component {
             )}
           </ExpansionPanelDetails>
         </ExpansionPanel>
-        <ExpansionPanel className="create-settings-card">
-          <ExpansionPanelSummary expandIcon={<ExpandLess />}>
+        <ExpansionPanel expanded={expanded === 'settings'} className="create-settings-card">
+          <ExpansionPanelSummary
+            onClick={() => this.handleExpanders('settings')}
+            expandIcon={<ExpandLess />}
+          >
             <Settings />
             <Typography className="create-settings-title" variant="button">
               Settings