Normalize design of search boxes in data explorers, settings UI, and tree view

[MRayermannMSFT]

Ensure consistent location of icons, size of icons, icon direction/type, padding, placeholder texts, etc. across data explorers.

Begin addressing this issue by:

1. Identify all search box UX elements
2. Propose a design that they should all be switched to, or at least the changes that need to be made to make them appear more uniform
3. Cost the work needed for each UX element
4. Share results with the team

## Tasks
- [x] Blob explorer side bar
- [x] Blob container explorer
- [x] File explorer
- [ ] Settings panel
- [ ] Tree view

[craxal]

Question

Where should the magnifying lens icon go?

Answer

The magnifying lens icon should be aligned with the left or leading edge.

Reasoning

The following applications/sites align the magnifying lens icon with the left or leading edge of either the input or placeholder text:

• Azure Portal
• GitHub
• Azure DevOps
• VS Code
• Microsoft 365

Somewhat unhelpfully, the following applications/sites align the magnifying lens icon with the right or trailing edge of either the input or placeholder text:

• Visual Studio

[craxal]

Common React component has been added to ui-components. Anywhere a search input is used can use this component instead of duplicating one.

[craxal]

All UI components using search inputs now use the component from ui-components with one exception. The tree view is still in Knockout, and its search input is a little different from other search inputs. The magnifying lens icon is actually a clickable button in this case, so slight deviations from the styling are expected.