[UI > Components] Move Search to our styled wrapper

src/ui/components/Search.tsx

@@ -0,0 +1,17 @@
+import { SearchProps } from "@types";
+import { stylesheet } from "@metro/common";
+import { findByName } from "@metro/filters";
+
+const Search = findByName("StaticSearchBarContainer");
+
+const styles = stylesheet.createThemedStyleSheet({
+    search: {
+        margin: 0,
+        padding: 0,
+        borderBottomWidth: 0,
+        background: "none",
+        backgroundColor: "none",
+    }
+});
+
+export default ({ onChangeText, placeholder, style }: SearchProps) => <Search style={[styles.search, style]} placeholder={placeholder} onChangeText={onChangeText} />

src/ui/components/index.ts

@@ -4,7 +4,6 @@ import { findByName, findByProps } from "@metro/filters";
 // Discord
 export const Forms = findByProps("Form", "FormSection");
 export const General = findByProps("Button", "Text", "View");
-export const Search = findByName("StaticSearchBarContainer");
 export const Alert = findByProps("alertDarkStyles", "alertLightStyles").default;
 export const Button = findByProps("Looks", "Colors", "Sizes") as React.ComponentType<any> & { Looks: any, Colors: any, Sizes: any };
 export const HelpMessage = findByName("HelpMessage");
@@ -14,4 +13,5 @@ export const SafeAreaView = findByProps("useSafeAreaInsets").SafeAreaView as typ
 // Vendetta
 export { default as Summary } from "@ui/components/Summary";
 export { default as ErrorBoundary } from "@ui/components/ErrorBoundary";
-export { default as Codeblock } from "@ui/components/Codeblock";
+export { default as Codeblock } from "@ui/components/Codeblock";
+export { default as Search } from "@ui/components/Search";

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,4 +1,4 @@
-import { ReactNative as RN, stylesheet } from "@metro/common";
+import { ReactNative as RN } from "@metro/common";
 import { all } from "@ui/assets";
 import { Forms, Search } from "@ui/components";
 import ErrorBoundary from "@ui/components/ErrorBoundary";
@@ -6,15 +6,6 @@ import AssetDisplay from "@ui/settings/components/AssetDisplay";
 
 const { FormDivider } = Forms;
 
-const styles = stylesheet.createThemedStyleSheet({
-    search: {
-        margin: 0,
-        padding: 15,
-        borderBottomWidth: 0,
-        background: "none",
-        backgroundColor: "none",
-    }
-});
 
 export default function AssetBrowser() {
     const [search, setSearch] = React.useState("");
@@ -23,7 +14,6 @@ export default function AssetBrowser() {
         <ErrorBoundary>
             <RN.View style={{ flex: 1 }}>
                 <Search
-                    style={styles.search}
                     onChangeText={(v: string) => setSearch(v)}
                     placeholder="Search"
                 />