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