From 9a7f5388d9efe074ee65136eccd8a9b9208d6cfd Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Wed, 17 Aug 2016 17:27:01 +0530
Subject: [PATCH 1/2] Update autocomplete design

---
 .../views/rooms/Autocomplete.css              | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

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 40a08ee2d35..2deded9c5e6 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
@@ -4,7 +4,7 @@
     z-index: 1000;
     width: 100%;
     border: 1px solid #e5e5e5;
-    background: rgba(255, 255, 255, 0.9);
+    background: white;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
@@ -12,56 +12,58 @@
 }
 
 .mx_Autocomplete_ProviderSection {
-    padding: 12px;
     border-bottom: 1px solid #e5e5e5;
 }
 
-.mx_Autocomplete_ProviderSection * {
-    padding: 2px;
-    border-radius: 4px;
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
 }
 
-.mx_Autocomplete_Completion {
+/* a "block" completion takes up a whole line */
+.mx_Autocomplete_Completion_block {
+    height: 34px;
+    display: flex;
+    padding: 0 12px;
     user-select: none;
     cursor: pointer;
-    transition: 0.3s all ease;
-    display: flex;
     align-items: center;
+    color: #4a4a4a;
 }
 
-.mx_Autocomplete_Completion.selected * {
-    transition: 0.3s all ease;
-}
-
-.mx_Autocomplete_Completion.selected {
-    background: #76cfa6;
-    color: white;
-    outline: none;
-}
-
-.mx_Autocomplete_Completion.selected * {
-    color: white !important;
+.mx_Autocomplete_Completion_block * {
+     margin: 0 3px;
 }
 
-.mx_Autocomplete_provider_name {
-    color: #76cfa6;
-    font-weight: 600;
+.mx_Autocomplete_Completion_pill {
+    border-radius: 17px;
+    height: 34px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
 }
 
-.autocomplete-enter {
-    opacity: 0.01;
+.mx_Autocomplete_Completion_pill * {
+    margin: 0 3px;
 }
 
-.autocomplete-enter.autocomplete-enter-active {
-    opacity: 1;
-    transition: opacity 300ms ease-in;
+/* container for pill-style completions */
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
 }
 
-.autocomplete-leave {
-    opacity: 1;
+.mx_Autocomplete_Completion.selected {
+    background: #f6f6f6;
+    outline: none;
 }
 
-.autocomplete-leave.autocomplete-leave-active {
-    opacity: 0.01;
-    transition: opacity 300ms ease-in;
+.mx_Autocomplete_provider_name {
+    margin: 12px;
+    color: #454545;
+    font-weight: 400;
+    opacity: 0.4;
 }

From 554c33a883418fdcc5295351c81e6178e7d2f7d1 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 23 Aug 2016 00:36:01 +0530
Subject: [PATCH 2/2] Extract autocomplete styling to CSS

---
 .../css/matrix-react-sdk/views/rooms/Autocomplete.css  | 10 ++++++++++
 1 file changed, 10 insertions(+)

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 2deded9c5e6..6d611b5ef3b 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
@@ -67,3 +67,13 @@
     font-weight: 400;
     opacity: 0.4;
 }
+
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}