feat(SearchBox): use StatusInput for SearchBox and add clear button

Fixes #5090

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
     }
 
 

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 {

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
 }

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