From b4a1fb1a14bd8b651f5f071024396eef12beacdb Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 21 Mar 2022 13:43:42 -0400
Subject: [PATCH] feat(SearchBox): use StatusInput for SearchBox and add clear
 button

Fixes #5090
---
 .../panels/TokenSettingsModalContent.qml        |  5 +++--
 .../AppLayouts/Profile/views/ContactsView.qml   |  5 +++--
 ui/imports/shared/controls/SearchBox.qml        | 17 ++++++++++-------
 ui/imports/shared/status/StatusGifPopup.qml     |  2 +-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/panels/TokenSettingsModalContent.qml b/ui/app/AppLayouts/Profile/panels/TokenSettingsModalContent.qml
index 0910209f7e..a0ba054346 100644
--- a/ui/app/AppLayouts/Profile/panels/TokenSettingsModalContent.qml
+++ b/ui/app/AppLayouts/Profile/panels/TokenSettingsModalContent.qml
@@ -72,10 +72,11 @@ Item {
 
     SearchBox {
         id: searchBox
-        customHeight: 36
-        fontPixelSize: 12
+        input.font.pixelSize: 12
         anchors.top: modalBody.top
         anchors.topMargin: Style.current.padding
+        anchors.right: parent.right
+        anchors.left: parent.left
     }
 
 
diff --git a/ui/app/AppLayouts/Profile/views/ContactsView.qml b/ui/app/AppLayouts/Profile/views/ContactsView.qml
index 999f6ede89..b9f2d95cf4 100644
--- a/ui/app/AppLayouts/Profile/views/ContactsView.qml
+++ b/ui/app/AppLayouts/Profile/views/ContactsView.qml
@@ -66,8 +66,9 @@ Item {
             id: searchBox
             anchors.top: titleText.bottom
             anchors.topMargin: 32
-            fontPixelSize: 15
-            placeholderText: qsTr("Search by a display name or chat key")
+            width: parent.width
+            input.implicitHeight: 44
+            input.placeholderText: qsTr("Search by a display name or chat key")
         }
 
         TabBar {
diff --git a/ui/imports/shared/controls/SearchBox.qml b/ui/imports/shared/controls/SearchBox.qml
index bc366f2a07..18e99fd832 100644
--- a/ui/imports/shared/controls/SearchBox.qml
+++ b/ui/imports/shared/controls/SearchBox.qml
@@ -3,13 +3,16 @@ import QtQuick 2.13
 import utils 1.0
 import "."
 
-Input {
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+
+StatusInput {
     id: searchBox
     //% "Search"
-    placeholderText: qsTrId("search")
-    icon: Style.svg("search")
-    iconWidth: 24
-    iconHeight: 24
-    customHeight: 36
-    fontPixelSize: 15
+    input.placeholderText: qsTrId("search")
+    input.icon.name: "search"
+    input.implicitHeight: 36
+    input.clearable: true
+    leftPadding: 0
+    rightPadding: 0
 }
diff --git a/ui/imports/shared/status/StatusGifPopup.qml b/ui/imports/shared/status/StatusGifPopup.qml
index 6b35e2bd47..f913c57630 100644
--- a/ui/imports/shared/status/StatusGifPopup.qml
+++ b/ui/imports/shared/status/StatusGifPopup.qml
@@ -94,7 +94,7 @@ Popup {
 
             SearchBox {
                 id: searchBox
-                placeholderText: qsTr("Search Tenor")
+                input.placeholderText: qsTr("Search Tenor")
                 enabled: RootStore.isTenorWarningAccepted
                 anchors.right: parent.right
                 anchors.rightMargin: gifHeader.headerMargin