MM-1899 - Updating UI for commands in input box

config/config.json

@@ -10,7 +10,7 @@
     "ServiceSettings": {
         "SiteName": "Mattermost",
         "Mode" : "dev",
-		"AllowTesting" : false,
+		"AllowTesting" : true,
         "UseSSL": false,
         "Port": "8065",
         "Version": "developer",

web/react/components/command_list.jsx

@@ -44,19 +44,21 @@ module.exports = React.createClass({
 
         var suggestions = [];
 
+        console.log(this.state.suggestions.length);
+
         for (var i = 0; i < this.state.suggestions.length; i++) {
             if (this.state.suggestions[i].suggestion != this.state.cmd) {
                 suggestions.push(
                     <div key={i} className="command-name" onClick={this.handleClick.bind(this, i)}>
-                        <div className="pull-left"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
+                        <div className="command__title"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
-                        <div className="command-desc pull-right">{ this.state.suggestions[i].description }</div>
+                        <div className="command__desc">{ this.state.suggestions[i].description }</div>
                     </div>
                 );
             }
         }
 
         return (
-            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*37)+2}}>
+            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*56)+2}}>
                 { suggestions }
             </div>
         );

web/sass-files/sass/partials/_command-box.scss

@@ -4,20 +4,30 @@
     width: 100%;
     border: $border-gray;
     bottom: 38px;
+    overflow: auto;
     @extend %popover-box-shadow;
+    .sidebar--right & {
+        bottom: 100px;
+    }
 }
 
 .command-name {
     position: relative;
     width: 100%;
     background-color: #fff;
-    height: 37px;
+    line-height: 24px;
-    line-height: 37px;
+    padding: 5px 10px 8px;
-    padding: 2px 10px 2px 5px;
     z-index: 101;
+    font-size: 0.95em;
+    border-bottom: 1px solid #ddd;
     &:hover {
         background-color: #e8eaed;
     }
+    .command__desc {
+        margin-left: 5px;
+        color: #999;
+        line-height: normal;
+    }
 }
 
 .command-desc {