From 618978d955f5d2f2c838b667854b5dce0d832801 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 22 Dec 2015 00:47:04 +0000
Subject: [PATCH] add appropriate CSS for the TabCompleteBar

---
 src/components/structures/RoomView.js        | 11 ++++++++++-
 src/components/views/rooms/TabCompleteBar.js | 10 ++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 6233986362..d34cb28dca 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1292,7 +1292,16 @@ module.exports = React.createClass({
                 else if (this.tabComplete.isTabCompleting()) {
                     var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
                     statusBar = (
-                        <TabCompleteBar entries={this.tabComplete.peek(3)} />
+                        <div className="mx_RoomView_tabCompleteBar">
+                            <div className="mx_RoomView_tabCompleteImage">...</div>
+                            <div className="mx_RoomView_tabCompleteWrapper">
+                                <TabCompleteBar entries={this.tabComplete.peek(6)} />
+                                <div className="mx_RoomView_tabCompleteEol">
+                                    <img src="img/eol.svg" width="22" height="16" alt="->|"/>
+                                    Auto-complete
+                                </div>
+                            </div>
+                        </div>
                     );
                 }
                 else if (this.state.hasUnsentMessages) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index a4c804e28f..05bf2a7901 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -28,15 +28,17 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div>
+            <div className="mx_TabCompleteBar">
             {this.props.entries.map(function(entry, i) {
                 var image = (
-                    entry.imgUrl ? <img src={entry.imgUrl} /> : null
+                    entry.imgUrl ? <img src={entry.imgUrl} width="24" height="24"/> : null
                 );
                 return (
-                    <div key={i + ""}>
+                    <div key={i + ""} className="mx_TabCompleteBar_item">
                         {image}
-                        {entry.text}
+                        <span className="mx_TabCompleteBar_text">
+                            {entry.text}
+                        </span>
                     </div>
                 );
             })}