From 034c045b372d801db6d5b95108aadd672cbdc09f Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Mon, 20 Jun 2016 13:53:18 +0530
Subject: [PATCH] Styling for autocomplete

---
 .../views/rooms/Autocomplete.css              | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
index 1fa88f20..d6fcd083 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
@@ -7,6 +7,8 @@
     background: rgba(255, 255, 255, 0.9);
     border-bottom: none;
     border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
 }
 
 .mx_Autocomplete_ProviderSection {
@@ -15,12 +17,31 @@
 }
 
 .mx_Autocomplete_ProviderSection * {
-    padding: 4px;
+    padding: 2px;
     border-radius: 4px;
 }
 
+.mx_Autocomplete_Completion {
+    user-select: none;
+    cursor: pointer;
+    transition: 0.3s all ease;
+    display: flex;
+    align-items: center;
+}
+
+.mx_Autocomplete_Completion:focus {
+    background: #76cfa6;
+    color: white;
+    outline: none;
+}
+
+.mx_Autocomplete_Completion:focus * {
+    color: white !important;
+}
+
 .mx_Autocomplete_provider_name {
     color: #76cfa6;
+    font-weight: 600;
 }
 
 .autocomplete-enter {