From fd4b3d238fefaf98882841a405737e8fa897218c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 8 Oct 2020 10:13:05 +0200
Subject: [PATCH] increase click area of clear filter button, add search icon

---
 .../web/css/themes/element/icons/search.svg   |  3 +++
 src/ui/web/css/themes/element/theme.css       | 23 +++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 src/ui/web/css/themes/element/icons/search.svg

diff --git a/src/ui/web/css/themes/element/icons/search.svg b/src/ui/web/css/themes/element/icons/search.svg
new file mode 100644
index 00000000..1531c7ac
--- /dev/null
+++ b/src/ui/web/css/themes/element/icons/search.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
+</svg>
diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css
index 41a9b82f..f1109baa 100644
--- a/src/ui/web/css/themes/element/theme.css
+++ b/src/ui/web/css/themes/element/theme.css
@@ -136,22 +136,26 @@ button.utility.grid.on {
 }
 
 .FilterField {
+    background-image: url('icons/search.svg');
+    background-repeat: no-repeat;
+    background-position: 8px center;
     background-color: #e1e3e6;
+    /* to prevent jumps when adding a border on focus */
+    border: 1px solid transparent;
     border-radius: 16px;
     height: 32px;
     align-items: center;
-    padding: 0 8px;
+    padding-left: 30px; /* 8 + 14 (icon) + 8*/
     box-sizing: border-box;
 }
 
-.FilterField :not(:first-child) {
-    margin-left: 8px;
-}
-
 .FilterField:focus-within {
     border: 1px #e1e3e6 solid;
     background-color: white;
 }
+.FilterField:focus-within button {
+    border-color: white;
+}
 
 /*.FilterField:not(:focus-within) button {
     display: none;
@@ -169,14 +173,15 @@ button.utility.grid.on {
 }
 
 .FilterField button {
-    width: 16px;
-    height: 16px;
+    width: 30px; /* 32 - 1 (top) - 1 (bottom) */
+    height: 30px; /* 32 - 1 (top) - 1 (bottom) */
     background-position: center;
     background-color: #e1e3e6;
     background-repeat: no-repeat;
     background-image: url('icons/clear.svg');
-    border: none;
+    border: 7px solid transparent; /* 8 - 1 */
     border-radius: 100%;
+    box-sizing: border-box;
 }
 
 .PreSessionScreen {
@@ -210,7 +215,7 @@ button.utility.grid.on {
     margin-right: 8px;
 }
 
-.LeftPanel .utilities :not(:first-child) {
+.LeftPanel .utilities > :not(:first-child) {
     margin-left: 8px;
 }