new design

web/src/components/IntentList.js

@@ -1,34 +1,36 @@
 import React, { Component } from 'react';
-import QuestionItem from './IntentItem';
+import {Button} from 'react-md';
+import IntentItem from './IntentItem';
 import '../css/Intent.css'
 
 class IntentList extends Component {
     constructor (props){
         super(props);
 
-        this.state = {intents: props.allIntents, selected:0, onIntentClick:props.onIntentClick};
+        this.state = {intents: props.allIntents, selectedIndex:props.selectedIndex, onIntentClick:props.onIntentClick};
     }
 
     componentWillReceiveProps(props){
-        this.setState({intents: props.allIntents});
+        this.setState({intents: props.allIntents, selectedIndex: props.selectedIndex, onIntentClick: props.onIntentClick});
     }
 
     render() {
         return (
             <div className="IntentList">
                 <div className="IntentList-title">
-                    <p>Intents</p>
+                    <h3>Intents</h3>
                 </div>
                 {
                     this.state.intents.map((intent,index)=>{
-                    return <QuestionItem 
+                    return <IntentItem 
                                 key={index} intent={intent} index={index} 
+                                selectedIndex={this.props.selectedIndex} 
                                 onClick={this.state.onIntentClick}>
-                            </QuestionItem>
+                            </IntentItem>
                     })
                 }
                 <br></br>
-                <button onClick={this.props.handleAddIntentClick}>Add intent</button>
+                <Button className={"AddIntent"} flat primary swapTheming onClick={this.props.handleAddIntentClick}>Add intent</Button>
             </div>  
         );
     }