From 918a1d5f529f8b1b8e1bce39b2221e83c122d0e4 Mon Sep 17 00:00:00 2001
From: Steve Green <stevenpkg@au1.ibm.com>
Date: Tue, 25 Sep 2018 00:04:51 +1000
Subject: [PATCH] feat: options as clickable and buttons as buttons (#202)

---
 public/css/app.css        | 15 ++++++++++++++-
 public/js/conversation.js | 10 +++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 915e250d..f837fe2c 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -444,7 +444,20 @@ html{
   font-style: normal;
 }
 
-.button-options {
+.options-list {
   color: #8d25e8;
   cursor: pointer;
 }
+
+.options-button {
+  color: white;
+  background-color: #8d25e8;
+  border-radius: 6px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 3px;
+  cursor: pointer;
+  display: inline-block;
+}
diff --git a/public/js/conversation.js b/public/js/conversation.js
index 43fe989c..2796c52b 100644
--- a/public/js/conversation.js
+++ b/public/js/conversation.js
@@ -206,20 +206,20 @@ var ConversationPanel = (function () {
         list = '<ul>';
         for (i = 0; i < optionsList.length; i++) {
           if (optionsList[i].value) {
-            list += '<li>' + optionsList[i].label + '</li>';
+            list += '<li><div class="options-list" onclick="ConversationPanel.sendMessage(\'' +
+            optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div></li>';
           }
         }
         list += '</ul>';
       } else if (preference === 'button') {
-        list = '<ul>';
+        list = '<br>';
         for (i = 0; i < optionsList.length; i++) {
           if (optionsList[i].value) {
-            var item = '<li><div class="button-options" onclick="ConversationPanel.sendMessage(\'' +
-              optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div></li>';
+            var item = '<div class="options-button" onclick="ConversationPanel.sendMessage(\'' +
+              optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div>';
             list += item;
           }
         }
-        list += '</ul>';
       }
     }
     return list;