From 43fa87c0b81b77f7c688357611b2b647d2700d0f Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Mon, 19 Apr 2021 22:37:04 -0400 Subject: [PATCH 1/4] updated --- src/web/src/components/SearchBar.tsx | 147 ++++++++++++--------------- 1 file changed, 64 insertions(+), 83 deletions(-) diff --git a/src/web/src/components/SearchBar.tsx b/src/web/src/components/SearchBar.tsx index ea3ce1e037..faa34f3662 100644 --- a/src/web/src/components/SearchBar.tsx +++ b/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 ( - - - - - onFilterChange(event.target.value)} - > - {searchOptions.map((option) => ( - - {option} - - ))} - - - - - - - - - - - + + +
onSubmitHandler(e)}> + onTextChange(e.target.value)} + /> + + { + if (text) onSubmitHandler(e); + }} + className={classes.iconButton} + aria-label="search" + > + + + + onTextChange('')} + aria-label="search" + > + + +
- + ); }; From d5785def89ffbe0c07ff49eed67820520e9f4822 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Mon, 19 Apr 2021 22:40:42 -0400 Subject: [PATCH 2/4] deleted files --- .../SearchInput/AuthorSearchInput.tsx | 49 ------------------- .../SearchInput/PostSearchInput.tsx | 48 ------------------ .../components/SearchInput/SearchInput.tsx | 11 ----- 3 files changed, 108 deletions(-) delete mode 100644 src/web/src/components/SearchInput/AuthorSearchInput.tsx delete mode 100644 src/web/src/components/SearchInput/PostSearchInput.tsx delete mode 100644 src/web/src/components/SearchInput/SearchInput.tsx diff --git a/src/web/src/components/SearchInput/AuthorSearchInput.tsx b/src/web/src/components/SearchInput/AuthorSearchInput.tsx deleted file mode 100644 index 424354c8f4..0000000000 --- a/src/web/src/components/SearchInput/AuthorSearchInput.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; -import useSearchValue from '../../hooks/use-search-value'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - input: { - fontSize: '1.6rem', - '&:hover': { - borderColor: theme.palette.primary.main, - }, - '&:focus': { - borderColor: theme.palette.primary.main, - }, - '& > *': { - fontSize: '1.6rem !important', - color: theme.palette.text.primary, - }, - height: '55px', - backgroundColor: 'transparent', - paddingLeft: '10px', - paddingRight: '60px', - border: 'none', - outline: 'none', - color: theme.palette.text.primary, - }, - }) -); - -const AuthorSearchInput = () => { - const classes = useStyles(); - const { text, onTextChange } = useSearchValue(); - - return ( - <> - onTextChange(event.target.value)} - /> - - - - ); -}; - -export default AuthorSearchInput; diff --git a/src/web/src/components/SearchInput/PostSearchInput.tsx b/src/web/src/components/SearchInput/PostSearchInput.tsx deleted file mode 100644 index 51a2a4a37d..0000000000 --- a/src/web/src/components/SearchInput/PostSearchInput.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; -import useSearchValue from '../../hooks/use-search-value'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - input: { - fontSize: '1.6rem', - '&:hover': { - borderColor: theme.palette.primary.main, - }, - '&:focus': { - borderColor: theme.palette.primary.main, - }, - '& > *': { - fontSize: '1.6rem !important', - color: theme.palette.text.primary, - }, - height: '55px', - backgroundColor: 'transparent', - paddingLeft: '10px', - paddingRight: '60px', - border: 'none', - borderRadius: '7px', - outline: 'none', - color: theme.palette.text.primary, - }, - }) -); - -const PostSearchInput = () => { - const classes = useStyles(); - - const { text, onTextChange } = useSearchValue(); - - return ( - <> - onTextChange(event.target.value)} - /> - - ); -}; - -export default PostSearchInput; diff --git a/src/web/src/components/SearchInput/SearchInput.tsx b/src/web/src/components/SearchInput/SearchInput.tsx deleted file mode 100644 index 696dc5861f..0000000000 --- a/src/web/src/components/SearchInput/SearchInput.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import PostSearchInput from './PostSearchInput'; -import AuthorSearchInput from './AuthorSearchInput'; -import useSearchValue from '../../hooks/use-search-value'; - -const SearchInput = () => { - const { filter } = useSearchValue(); - - return filter === 'author' ? : ; -}; - -export default SearchInput; From f013330ab0205656387040a634060f74fc37b858 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Tue, 20 Apr 2021 16:22:09 -0400 Subject: [PATCH 3/4] minor change, remove hover effect, only focus effect --- src/web/src/components/SearchBar.tsx | 26 ++++---------------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/src/web/src/components/SearchBar.tsx b/src/web/src/components/SearchBar.tsx index faa34f3662..73269393eb 100644 --- a/src/web/src/components/SearchBar.tsx +++ b/src/web/src/components/SearchBar.tsx @@ -14,24 +14,6 @@ const useStyles = makeStyles((theme: Theme) => padding: theme.spacing(2, 2, 0, 2), marginBottom: theme.spacing(10), }, - card: { - padding: theme.spacing(0, 0, 0, 2), - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - borderRadius: '50px', - background: theme.palette.background.paper, - border: 'solid 1px transparent', - transition: 'background-color .5s', - '&:hover': { - backgroundColor: theme.palette.type === 'light' ? '#ffffff' : '#000000', - border: 'solid 1px #999999', - }, - [theme.breakpoints.down('xs')]: { - borderRadius: '15px', - padding: theme.spacing(0, 0, 0, 2), - }, - }, input: { fontSize: '1.8rem', width: '100%', @@ -44,12 +26,12 @@ const useStyles = makeStyles((theme: Theme) => background: '#EEEEEE', position: 'absolute', transition: 'border .2s', - '&:hover, &:focus': { - border: 'solid 1px #999999', + '&:focus': { + boxShadow: '0 0 5px 2px #CCCCCC', }, }, iconButton: { - backgroundColor: '#EEEEEE', + backgroundColor: 'transparent', color: '#999999', '&:hover': { backgroundColor: '#EEEEEE', @@ -65,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => clearIcon: { color: '#999999', '&:hover': { - backgroundColor: '#EEEEEE', + backgroundColor: 'transparent', }, '& * > .MuiSvgIcon-root': { fontSize: '3rem', From 9676cdda31c9b432e55bdd91d528f87eef5145c6 Mon Sep 17 00:00:00 2001 From: Huy Nguyen Date: Tue, 20 Apr 2021 16:33:48 -0400 Subject: [PATCH 4/4] better on both lightNdark mode --- src/web/src/components/SearchBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/web/src/components/SearchBar.tsx b/src/web/src/components/SearchBar.tsx index 73269393eb..39a9341dc8 100644 --- a/src/web/src/components/SearchBar.tsx +++ b/src/web/src/components/SearchBar.tsx @@ -25,9 +25,10 @@ const useStyles = makeStyles((theme: Theme) => paddingLeft: '55px', background: '#EEEEEE', position: 'absolute', - transition: 'border .2s', + transition: 'box-shadow .3s, background .3s', '&:focus': { boxShadow: '0 0 5px 2px #CCCCCC', + background: '#FFFFFF', }, }, iconButton: {