Merge pull request #17856 from luchillo17/fix/BCKSTG-162-broken-custom-styles-on-searc

Fix SearchBar styles & update StoryBook stories for custom styles

packages/app/src/components/home/templates/DefaultTemplate.stories.tsx

@@ -140,15 +140,16 @@ export default {
 };
 
 const useStyles = makeStyles(theme => ({
-  searchBar: {
-    display: 'flex',
+  searchBarInput: {
     maxWidth: '60vw',
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1],
-    padding: '8px 0',
-    borderRadius: '50px',
     margin: 'auto',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: '50px',
+    boxShadow: theme.shadows[1],
   },
+  searchBarOutline: {
+    borderStyle: 'none'
+  }
 }));
 
 const useLogoStyles = makeStyles(theme => ({
@@ -177,9 +178,9 @@ export const DefaultTemplate = () => {
               className={container}
               logo={<TemplateBackstageLogo classes={{ svg, path }} />}
             />
-            <Grid container item xs={12} alignItems="center" direction="row">
+            <Grid container item xs={12} justifyContent='center'>
               <HomePageSearchBar
-                classes={{ root: classes.searchBar }}
+                InputProps={{ classes: { root: classes.searchBarInput, notchedOutline: classes.searchBarOutline }}}
                 placeholder="Search"
               />
             </Grid>