JS custom UI tutorial

Summary:
- Adding tutorial for custom JS UI
- optimizing screenshots
- fixing overlapping screenshots on landing page

Reviewed By: jknoxville

Differential Revision: D15198105

fbshipit-source-id: db53403b84a2c422650a4f80e959dad6e984d274

docs/extending/search-and-filter.md

@@ -3,21 +3,18 @@ id: search-and-filter
 title: Searching and Filtering
 ---
 
-## Adding Search and Filter capabilities to your plugin
 Many plugins need the ability to make their content search and filterable. Flipper provides a component for this use-case called `Searchable`. This is a higher-order-component that can be used to wrap any table, list, generic react-component and adds Flippers search bar on top of it.
 
 We differentiate between search and filter, but both functionalities are provided by the `Searchable` component. Search is a custom string entered by the user. Filters can not be added by the user directly, but are added programmatically from within your plugin.
 
-### Filters
+## Filters
 Every filter has a key and a value. The key represents an attribute of the items you are filtering, and the value is the value that is compared with the items to see if the attribute matches. As an example, if you were filtering rows of a table, the a filter key would be the id of a column.
 
 There are two different types of filters:
+- **include/exclude filters**: An arbitrary string that must (or must not) be included in the filterable item.
+- **enum**: Allows the user to select one or more from a set of values, using a dropdown.
 
-**include/exclude filters**: An arbitrary string that must (or must not) be included in the filterable item.
-
-**enum**: Allows the user to select one or more from a set of values, using a dropdown.
-
-### Higher Order Component
+## Higher Order Component
 The `Searchable()` function adds three props to a React component:
 
 `addFilter: (filter: Filter) => void`
@@ -33,10 +30,10 @@ The search term entered into the searchbar by the user.
 The list of filters that are currently applied.
 
 
-#### Example
+### Example
 ```
-import type {SearchableProps} from 'sonar';
-import {Searchable} from 'sonar';
+import type {SearchableProps} from 'flipper';
+import {Searchable} from 'flipper';
 
 class MyPluginTable extends Component<{
   ...SearchableProps