Userpicker: Change search to use the <umb-seach-filter> directive (#9042)

* Switch to the umb-search-filter directive

* Add css class

* Fix styling after directive changes have been merged

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html

@@ -18,18 +18,16 @@
 
             <umb-box>
                 <umb-box-content>
-                    <div class="form-search" style="margin-bottom: 15px;">
-                        <i class="icon-search" aria-hidden="true"></i>
-                        <input type="text"
-                            ng-model="vm.usersOptions.filter"
-                            ng-change="vm.searchUsers()"
-                            class="umb-search-field search-query input-block-level -full-width-input"
-                            localize="placeholder"
-                            placeholder="@placeholders_filter"
-                            umb-auto-focus
-                            revent-enter-submit
-                            no-dirty-check />
-                    </div>
+                    <umb-search-filter
+                        input-id="userpicker-search"
+                        model="vm.usersOptions.filter"
+                        label-key="placeholders_filter"
+                        text="Type to filter..."
+                        on-change="vm.searchUsers()"
+                        css-class="w-100 mb-15"
+                        auto-focus="true">
+                    </umb-search-filter>
+
                     <div class="umb-user-picker-item-list">
                         <button type="button" class="btn-reset umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
                             <div class="umb-user-picker-list-item__avatar">