move default styles into components instead of searchpage

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

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

@@ -30,9 +30,6 @@ import { DocsResultListItem } from '@backstage/plugin-techdocs';
 import { SearchResultSet } from '@backstage/search-common';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  bar: {
-    padding: theme.spacing(1, 0),
-  },
   filters: {
     padding: theme.spacing(2),
   },
@@ -100,9 +97,7 @@ const SearchPage = () => {
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
-            <Paper className={classes.bar}>
-              <SearchBar debounceTime={100} />
-            </Paper>
+            <SearchBar debounceTime={100} />
           </Grid>
           <Grid item xs={3}>
             <Paper className={classes.filters}>
@@ -112,12 +107,10 @@ const SearchPage = () => {
                 defaultValue="software-catalog"
               />
               <SearchFilter.Select
-                className={classes.filter}
                 name="kind"
                 values={['Component', 'Template']}
               />
               <SearchFilter.Checkbox
-                className={classes.filter}
                 name="lifecycle"
                 values={['experimental', 'production']}
               />

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -16,7 +16,14 @@
 
 import React, { ChangeEvent, useState } from 'react';
 import { useDebounce } from 'react-use';
-import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
+import {
+  Paper,
+  InputBase,
+  InputAdornment,
+  IconButton,
+  Theme,
+  makeStyles,
+} from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
@@ -27,7 +34,14 @@ type Props = {
   debounceTime?: number;
 };
 
+const useStyles = makeStyles((theme: Theme) => ({
+  searchBar: {
+    padding: theme.spacing(1, 0),
+  },
+}));
+
 export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
+  const classes = useStyles();
   const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
 
@@ -40,28 +54,30 @@ export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
   const handleClear = () => setValue('');
 
   return (
-    <InputBase
-      className={className}
-      data-testid="search-bar-next"
-      fullWidth
-      placeholder="Search in Backstage"
-      value={value}
-      onChange={handleQuery}
-      inputProps={{ 'aria-label': 'Search term' }}
-      startAdornment={
-        <InputAdornment position="start">
-          <IconButton aria-label="Query term" disabled>
-            <SearchIcon />
-          </IconButton>
-        </InputAdornment>
-      }
-      endAdornment={
-        <InputAdornment position="end">
-          <IconButton aria-label="Clear term" onClick={handleClear}>
-            <ClearButton />
-          </IconButton>
-        </InputAdornment>
-      }
-    />
+    <Paper className={classes.searchBar}>
+      <InputBase
+        className={className}
+        data-testid="search-bar-next"
+        fullWidth
+        placeholder="Search in Backstage"
+        value={value}
+        onChange={handleQuery}
+        inputProps={{ 'aria-label': 'Search term' }}
+        startAdornment={
+          <InputAdornment position="start">
+            <IconButton aria-label="Query term" disabled>
+              <SearchIcon />
+            </IconButton>
+          </InputAdornment>
+        }
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton aria-label="Clear term" onClick={handleClear}>
+              <ClearButton />
+            </IconButton>
+          </InputAdornment>
+        }
+      />
+    </Paper>
   );
 };

plugins/search/src/components/SearchFilter/SearchFilter.tsx

@@ -24,15 +24,21 @@ import {
   Select,
   MenuItem,
   FormLabel,
+  Theme,
 } from '@material-ui/core';
 
 import { useSearch } from '../SearchContext';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme: Theme) => ({
   label: {
     textTransform: 'capitalize',
   },
-});
+  filter: {
+    '& + &': {
+      marginTop: theme.spacing(2.5),
+    },
+  },
+}));
 
 export type Component = {
   className?: string;
@@ -80,7 +86,7 @@ const CheckboxFilter = ({
 
   return (
     <FormControl
-      className={className}
+      className={className || classes.filter}
       fullWidth
       data-testid="search-checkboxfilter-next"
     >
@@ -138,7 +144,7 @@ const SelectFilter = ({
 
   return (
     <FormControl
-      className={className}
+      className={className || classes.filter}
       variant="filled"
       fullWidth
       data-testid="search-selectfilter-next"