fix: Add close button & better padding on search input

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

packages/app/src/components/search/SearchModal.tsx

@@ -13,26 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import React, { KeyboardEvent, useRef, useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  makeStyles,
-  Paper,
-} from '@material-ui/core';
-import Typography from '@material-ui/core/Typography';
-import BuildIcon from '@material-ui/icons/Build';
-import LaunchIcon from '@material-ui/icons/Launch';
 import { CatalogIcon, DocsIcon, Link } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
-import { CatalogSearchResultListItem } from '@internal/plugin-catalog-customized';
 import {
-  catalogApiRef,
   CATALOG_FILTER_EXISTS,
+  catalogApiRef,
 } from '@backstage/plugin-catalog-react';
 import { ToolSearchResultListItem } from '@backstage/plugin-explore';
 import { searchPlugin, SearchType } from '@backstage/plugin-search';
@@ -44,12 +29,34 @@ import {
   useSearch,
 } from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
+import { CatalogSearchResultListItem } from '@internal/plugin-catalog-customized';
+import {
+  Box,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  makeStyles,
+  Paper,
+} from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import BuildIcon from '@material-ui/icons/Build';
+import CloseIcon from '@material-ui/icons/Close';
+import LaunchIcon from '@material-ui/icons/Launch';
+import React, { KeyboardEvent, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
+  dialogTitle: {
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
+  },
   container: {
     borderRadius: 30,
     display: 'flex',
     height: '2.4em',
+    padding: theme.spacing(1),
   },
   filter: {
     '& + &': {
@@ -95,13 +102,19 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
   return (
     <>
       <DialogTitle>
-        <Paper className={classes.container}>
-          <SearchBar
-            className={classes.input}
-            inputProps={{ ref: searchBarRef }}
-            onKeyDown={handleSearchBarKeyDown}
-          />
-        </Paper>
+        <Box className={classes.dialogTitle}>
+          <Paper className={classes.container}>
+            <SearchBar
+              className={classes.input}
+              inputProps={{ ref: searchBarRef }}
+              onKeyDown={handleSearchBarKeyDown}
+            />
+          </Paper>
+
+          <IconButton aria-label="close" onClick={() => toggleModal()}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
       </DialogTitle>
       <DialogContent>
         <Grid container direction="column">

packages/app/src/components/search/SearchPage.tsx

@@ -45,7 +45,7 @@ import BuildIcon from '@material-ui/icons/Build';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
-    padding: theme.spacing(1, 0),
+    padding: theme.spacing(1),
   },
   filter: {
     '& + &': {