misc: fixups to the smartlist search bar

- fix the svg rendering
- fix margins and padding
- fix the clear text icon

Change-Id: I88d709577697136377c6e405abab885c6aa54135
Gitlab: #241

images/icons/ic_clear_24px.svg

@@ -1,12 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Cross</title>
-    <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Cross" fill-rule="nonzero" stroke="#000000">
-            <g id="Ico_X" transform="translate(3.000000, 3.000000)">
-                <path d="M9.12475134,0.270017196 C4.07644218,0.270017196 0,4.37345569 0,9.39476854 C0,14.4430777 4.10343849,18.5195199 9.12475134,18.5195199 C14.1730605,18.5195199 18.2495027,14.4160814 18.2495027,9.39476854 C18.2495027,4.34645937 14.1730605,0.270017196 9.12475134,0.270017196" id="Fill-1-path" stroke-width="1.75"></path>
-                <path d="M12.3102614,11.5813612 C12.5532282,11.8513242 12.5532282,12.2562688 12.3102614,12.4992356 C12.1752799,12.6342171 12.0133021,12.6882097 11.8513242,12.6882097 C11.6893464,12.6882097 11.5276385,12.6342171 11.392657,12.4992356 L9.20568627,10.3125348 L7.01898551,12.4992356 C6.88400396,12.6342171 6.72202613,12.6882097 6.5600483,12.6882097 C6.39807047,12.6882097 6.23609264,12.6342171 6.10111112,12.4992356 C5.83114806,12.2292725 5.83114806,11.8243279 6.10111112,11.5813612 L8.28781188,9.39466042 L6.10111112,7.20795966 C5.83114806,6.9379966 5.83114806,6.53305202 6.10111112,6.29008524 C6.34407787,6.04711849 6.77601877,6.04711849 7.01898551,6.29008524 L9.20568627,8.47678603 L11.392657,6.29008524 C11.6353538,6.02012221 12.0675647,6.02012221 12.3102614,6.29008524 C12.5532282,6.53305202 12.5532282,6.96499288 12.3102614,7.20795966 L10.1235607,9.39466042 L12.3102614,11.5813612 Z" id="Fill-4" stroke-width="0.5" fill="#000000"></path>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

src/mainview/components/ContactSearchBar.qml

@@ -29,8 +29,6 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    property int itemMargin: 8
-
     signal contactSearchBarTextChanged(string text)
     signal returnPressedWhileSearching
 
@@ -50,25 +48,22 @@ Rectangle {
         id: lineEditContextMenu
     }
 
-    Image {
+    ResponsiveImage {
         id: searchIconImage
 
         anchors.verticalCenter: root.verticalCenter
         anchors.left: root.left
-        anchors.leftMargin: itemMargin
+        anchors.leftMargin: 10
 
-        width: 16
-        height: 16
+        width: 20
+        height: 20
 
-        fillMode: Image.PreserveAspectFit
-        mipmap: true
         source: "qrc:/images/icons/ic_baseline-search-24px.svg"
-    }
 
-    ColorOverlay {
-        anchors.fill: searchIconImage
-        source: searchIconImage
-        color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+        layer.enabled: true
+        layer.effect: ColorOverlay {
+            color: JamiTheme.primaryForegroundColor
+        }
     }
 
     TextField {
@@ -76,8 +71,10 @@ Rectangle {
 
         anchors.verticalCenter: root.verticalCenter
         anchors.left: searchIconImage.right
+        anchors.right: contactSearchBar.text.length ?
+                           clearTextButton.left :
+                           root.right
 
-        width: root.width - searchIconImage.width - clearTextButton.width - itemMargin * 2
         height: root.height - 5
 
         color: JamiTheme.textColor
@@ -108,9 +105,11 @@ Rectangle {
         id: clearTextButton
 
         anchors.verticalCenter: root.verticalCenter
-        anchors.left: contactSearchBar.right
+        anchors.right: root.right
+        anchors.rightMargin: 10
 
-        preferredSize: 16
+        preferredSize: 20
+        radius: JamiTheme.lineEditRadius
 
         visible: contactSearchBar.text.length
 

src/mainview/components/SidePanel.qml

@@ -88,12 +88,14 @@ Rectangle {
     // Search bar container to embed search label
     ContactSearchBar {
         id: contactSearchBar
-        width: sidePanelRect.width - 26
-        height: 35
+
+        height: 40
         anchors.top: sidePanelRect.top
         anchors.topMargin: 10
         anchors.left: sidePanelRect.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: 15
+        anchors.right: sidePanelRect.right
+        anchors.rightMargin: 15
 
         onContactSearchBarTextChanged: {
             UtilsAdapter.setConversationFilter(text)