new design

web/src/components/IntentDetails.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import {Button, SVGIcon, TextField} from 'react-md';
 import '../css/Intent.css'
 
 class IntentDetails extends Component {
@@ -18,26 +19,41 @@ class IntentDetails extends Component {
   render() {
     return (
       <div className="IntentDetails">
-        <p> Questions </p>
+        <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
         {
           this.state.intent.questions.map((question, index)=>{
             return (
               <div key={index} className="QuestionBox">
-                <input value={question}></input>
-                <button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
+                <TextField
+                  id="floating-center-title"
+                  lineDirection="center"
+                  placeholder="Question"
+                  className="md-cell md-cell--bottom"
+                  style={{width:'60%'}}
+                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  value={question}/>
               </div>
             );
           })
         }
-        <p> Answer </p>
+        <br></br>
         {
-          <input value={this.state.intent.answer}></input>
+          <div className="QuestionBox">
+            <TextField
+              id="floating-center-title"
+              lineDirection="center"
+              label="Answer"
+              placeholder="Answer"
+              style={{width:'60%'}}
+              className="md-cell md-cell--bottom"
+              value={this.state.intent.answer}/>
+          </div>
         }
         <br></br>
         <br></br>
-        <button onClick={this.addQuestion}>Add question</button>
-        <button onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
-        <button onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</button>
+        <Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
+        <Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>        
+        <Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
       </div>
     );
   }

web/src/components/IntentItem.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import {Button} from 'react-md';
 import '../css/Intent.css'
 
 class IntentItem extends Component {
@@ -10,10 +11,21 @@ class IntentItem extends Component {
     }
   
     render() {
-        return (
-            <div className={false ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent)}}>
+        /*
+        <div className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}>
+                <Button className={"IntentItem"} flat swapTheming>OK</Button>
                 <p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
             </div>
+        */
+        return (
+            <div>
+                <Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
+                        onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
+                        flat>
+                            {this.state.index+1}. {this.state.intent.questions[0]}
+                </Button>  
+                <br></br>
+            </div>
         );
     }
 }

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>  
         );
     }