SearchBar (new PR)

src/web/src/components/SearchBar.tsx

@@ -1,9 +1,8 @@
+import useSearchValue from '../hooks/use-search-value';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
-import { Grid, MenuItem, TextField, FormControl, Paper, IconButton, Box } from '@material-ui/core';
-
-import SearchInput from './SearchInput/SearchInput';
-import useSearchValue from '../hooks/use-search-value';
+import { Grid, FormControl, IconButton, Box } from '@material-ui/core';
+import ClearIcon from '@material-ui/icons/Clear';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -13,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
       marginLeft: 'auto',
       marginRight: 'auto',
       padding: theme.spacing(2, 2, 0, 2),
-      marginBottom: theme.spacing(6),
+      marginBottom: theme.spacing(10),
     },
     card: {
       padding: theme.spacing(0, 0, 0, 2),
@@ -33,107 +32,89 @@ const useStyles = makeStyles((theme: Theme) =>
         padding: theme.spacing(0, 0, 0, 2),
       },
     },
-    header: {
-      padding: 0,
-      marginBottom: theme.spacing(2),
-      backgroundColor: theme.palette.background.default,
-    },
-    h1: {
-      display: 'block',
-      transition: 'all linear 350ms',
-      fontWeight: 600,
-      color: theme.palette.text.secondary,
-      [theme.breakpoints.between('xs', 'sm')]: {
-        fontSize: '3rem',
-      },
-      [theme.breakpoints.between('md', 'lg')]: {
-        fontSize: '4rem',
-      },
-      [theme.breakpoints.up('xl')]: {
-        fontSize: '5rem',
+    input: {
+      fontSize: '1.8rem',
+      width: '100%',
+      boxSizing: 'border-box',
+      height: '56px',
+      outline: 'none',
+      border: 'solid 1px transparent',
+      borderRadius: '50px',
+      paddingLeft: '55px',
+      background: '#EEEEEE',
+      position: 'absolute',
+      transition: 'border .2s',
+      '&:hover, &:focus': {
+        border: 'solid 1px #999999',
       },
     },
     iconButton: {
-      backgroundColor: '#999999',
+      backgroundColor: '#EEEEEE',
+      color: '#999999',
       '&:hover': {
-        backgroundColor: theme.palette.secondary.dark,
+        backgroundColor: '#EEEEEE',
       },
       '& * > .MuiSvgIcon-root': {
         fontSize: '2rem',
-        color: theme.palette.primary.contrastText,
       },
       margin: 0,
       position: 'absolute',
-      right: '10px',
+      left: '10px',
       top: '6px',
     },
-    selectControl: {
-      '& > *': {
-        width: 'auto',
-        transform: 'translateY(2px)',
-        fontSize: '1.5rem',
-        textTransform: 'capitalize',
-        color: theme.palette.primary.main,
-        paddingLeft: '2rem',
-        [theme.breakpoints.down('xs')]: {
-          paddingLeft: '1rem',
-          width: '10rem',
-          transform: 'translateY(15px)',
-        },
+    clearIcon: {
+      color: '#999999',
+      '&:hover': {
+        backgroundColor: '#EEEEEE',
       },
-    },
-    selectItem: {
-      fontSize: '1.4rem',
-      textTransform: 'capitalize',
-      color: theme.palette.primary.main,
+      '& * > .MuiSvgIcon-root': {
+        fontSize: '3rem',
+      },
+      margin: 0,
+      position: 'absolute',
+      right: '5px',
+      top: '1px',
     },
   })
 );
 
 const SearchBar = () => {
   const classes = useStyles();
-
-  const { filter, onFilterChange, onSubmitHandler } = useSearchValue();
-
-  const searchOptions = ['post', 'author'];
+  const { text, onTextChange, onSubmitHandler } = useSearchValue();
 
   return (
     <Box className={classes.root}>
-      <Paper component="form" className={classes.card} elevation={0}>
-        <Grid container direction="row" spacing={2} alignItems="center" justify="flex-start">
-          <Grid item xs={12} sm={2} lg={2}>
-            <FormControl fullWidth>
-              <TextField
-                id="standard-select-search-type"
-                select
-                value={filter}
-                InputProps={{ disableUnderline: true }}
-                className={classes.selectControl}
-                onChange={(event) => onFilterChange(event.target.value)}
-              >
-                {searchOptions.map((option) => (
-                  <MenuItem key={option} value={option} className={classes.selectItem}>
-                    {option}
-                  </MenuItem>
-                ))}
-              </TextField>
-            </FormControl>
-          </Grid>
-          <Grid item xs={12} sm={10} lg={10}>
-            <FormControl fullWidth>
-              <SearchInput />
-              <IconButton
-                className={classes.iconButton}
-                type="submit"
-                onClick={onSubmitHandler}
-                aria-label="search"
-              >
-                <SearchIcon />
-              </IconButton>
-            </FormControl>
-          </Grid>
+      <FormControl fullWidth>
+        <Grid item xs={12} sm={10} lg={10}>
+          <form onSubmit={(e) => onSubmitHandler(e)}>
+            <input
+              autoFocus
+              className={classes.input}
+              value={text}
+              placeholder="Search..."
+              onChange={(e) => onTextChange(e.target.value)}
+            />
+
+            <IconButton
+              onClick={(e) => {
+                if (text) onSubmitHandler(e);
+              }}
+              className={classes.iconButton}
+              aria-label="search"
+            >
+              <SearchIcon />
+            </IconButton>
+
+            <IconButton
+              className={classes.clearIcon}
+              onClick={() => onTextChange('')}
+              aria-label="search"
+            >
+              <ClearIcon />
+            </IconButton>
+          </form>
         </Grid>
-      </Paper>
+      </FormControl>
     </Box>
   );
 };