Issue1225 - Reposition search button for search UI (#1474)

* Updated

* removed cache

* made changes for search button locations

* removed public

Author: strawberries73

src/frontend/gatsby/src/components/SearchBar/SearchBar.jsx

@@ -11,7 +11,6 @@ import {
   IconButton,
   Box,
   Typography,
-  Fab,
 } from '@material-ui/core';
 
 import SearchInput from '../SearchInput';
@@ -61,10 +60,9 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.primary.contrastText,
     },
     margin: 0,
-    position: 'relative',
-    bottom: theme.spacing(6),
-    float: 'right',
-    marginBottom: theme.spacing(-5.5),
+    position: 'absolute',
+    right: '10px',
+    top: '6px',
   },
   selectControl: {
     '& > *': {
@@ -104,13 +102,6 @@ function CustomizedInputBase(props) {
           </Grid>
           <SearchHelp />
         </Grid>
-        <Fab size="large" className={classes.iconButton}>
-          <FormControl>
-            <IconButton type="submit" onClick={onSubmit} aria-label="search">
-              <SearchIcon />
-            </IconButton>
-          </FormControl>
-        </Fab>
         <Grid container direction="row" spacing={2} alignItems="center" justify="flex-start">
           <Grid item xs={12} sm={2} lg={2}>
             <FormControl fullWidth>
@@ -134,6 +125,14 @@ function CustomizedInputBase(props) {
           <Grid item xs={12} sm={10} lg={10}>
             <FormControl fullWidth>
               <SearchInput filter={filter} text={text} onChange={onTextChange} />
+              <IconButton
+                className={classes.iconButton}
+                type="submit"
+                onClick={onSubmit}
+                aria-label="search"
+              >
+                <SearchIcon />
+              </IconButton>
             </FormControl>
           </Grid>
         </Grid>