Implemented a redesign of the SearchHelp component

* Removed HTML Tooltip, added className to elements * Cleaned up header imports * Removed old CSS and implemented new UI styling * Changed CSS values to better fit with planned design * Removed subtitle styling, no longer needed * Added state hook to hide visibility of SearchHelp * Redesign implemented * Rebased and put SearchHelp below SearchResults in layout
Seneca-CDOT · Mar 17, 2021 · dd87afe · dd87afe
1 parent 189be46
commit dd87afe
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 63 deletions.
diff --git a/src/web/src/components/SearchHelp.tsx b/src/web/src/components/SearchHelp.tsx
@@ -1,72 +1,72 @@
-import { withStyles, makeStyles } from '@material-ui/core/styles';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, Theme } from '@material-ui/core';
 
-import { Typography, Tooltip } from '@material-ui/core';
-
-const useStyles = makeStyles(() => ({
-  infoButton: {
-    marginTop: '7.5px',
-    fontSize: '3rem',
-    color: '#8BC2EB',
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    overflow: 'visible',
+    maxWidth: '785px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    paddingTop: 0,
   },
-}));
-
-const HtmlTooltip = withStyles((theme) => ({
-  tooltip: {
-    backgroundColor: '#f5f5f9',
-    color: 'rgba(0, 0, 0, 0.87)',
-    maxWidth: 500,
-    fontSize: theme.typography.pxToRem(22.5),
-    border: '1px solid #dadde9',
+  list: {
+    fontFamily: 'Times New Roman',
+    fontSize: '1.7rem',
+    lineHeight: '3rem',
+    color: theme.palette.text.disabled,
+    listStyleType: 'none',
+    [theme.breakpoints.down('xs')]: {
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4),
+      paddingTop: 0,
+      paddingBottom: theme.spacing(6),
+      lineHeight: '2.5rem',
+    },
   },
-}))(Tooltip);
+}));
 
 const SearchHelp = () => {
   const classes = useStyles();
   return (
-    <HtmlTooltip
-      title={
-        <>
-          <Typography variant="h5">How to use search</Typography>
-          <ul>
-            <li>
-              <b>&apos; + &apos;</b>
-              {' signifies AND operator'}
-            </li>
-            <li>
-              <b>&apos; | &apos;</b>
-              {' signifies OR operator'}
-            </li>
-            <li>
-              <b>&apos; - &apos;</b>
-              {' negates a single token'}
-            </li>
-            <li>
-              <b>&ldquo; &rdquo;</b>
-              {' wraps a number of tokens to signify a phrase for searching'}
-            </li>
-            <li>
-              <b>&apos; * &apos;</b>
-              {' at the end of a term signifies a prefix query'}
-            </li>
-            <li>
-              <b>&apos; ( &apos; and &apos; ) &apos;</b>
-              {' signify precendence '}
-            </li>
-            <li>
-              <b>&apos; ~N &apos;</b>
-              {' after a word signifies edit distance (fuzziness)'}
-            </li>
-            <li>
-              <b>&apos; ~N &apos;</b>
-              {' after a phrase signifies slop amount'}
-            </li>
-          </ul>
-        </>
-      }
-    >
-      <InfoOutlinedIcon className={classes.infoButton} />
-    </HtmlTooltip>
+    <div className={classes.root}>
+      <ul className={classes.list}>
+        <Typography color='textSecondary' variant="h5">
+          HOW TO USE SEARCH:
+        </Typography>
+        <li>
+          <b>&apos; + &apos;</b>
+          {' signifies AND operator'}
+        </li>
+        <li>
+          <b>&apos; | &apos;</b>
+          {' signifies OR operator'}
+        </li>
+        <li>
+          <b>&apos; - &apos;</b>
+          {' negates a single token'}
+        </li>
+        <li>
+          <b>&ldquo; &rdquo;</b>
+          {' wraps a number of tokens to signify a phrase for searching'}
+        </li>
+        <li>
+          <b>&apos; * &apos;</b>
+          {' at the end of a term signifies a prefix query'}
+        </li>
+        <li>
+          <b>&apos; ( &apos; and &apos; ) &apos;</b>
+          {' signify precendence '}
+        </li>
+        <li>
+          <b>&apos; ~N &apos;</b>
+          {' after a word signifies edit distance (fuzziness)'}
+        </li>
+        <li>
+          <b>&apos; ~N &apos;</b>
+          {' after a phrase signifies slop amount'}
+        </li>
+      </ul>
+    </div>
   );
 };
 

diff --git a/src/web/src/components/SearchPage.tsx b/src/web/src/components/SearchPage.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import SearchResults from './SearchResults';
 import SearchBar from './SearchBar';
 import BackToTopButton from './BackToTopButton';
+import SearchHelp from './SearchHelp';
 
 type FilterProp = {
   filter: 'post' | 'author';
@@ -40,11 +41,14 @@ const SearchPage = () => {
   // form submit only.  These are used in the <SearchBar>, and the user can change them.
   const [text, setText] = useState('');
   const [filter, setFilter] = useState<FilterProp['filter']>('post');
+  const [showHelp, setShowHelp] = useState(true);
 
   // Form was submitted, so go ahead and sync to URL, (re)triggering search.
   function onSubmitHandler(event: FormEvent) {
     event.preventDefault();
     router.push(`/search?text=${text}&filter=${filter}`);
+    // On form submit, hide help list
+    setShowHelp(false);
   }
 
   useEffect(() => {
@@ -63,8 +67,10 @@ const SearchPage = () => {
         onFilterChange={(value: FilterProp['filter']) => setFilter(value)}
         onSubmit={onSubmitHandler}
       />
-      <br />
       <SearchResults text={textParam} filter={filterParam} />
+      {showHelp && 
+        <SearchHelp />
+      }
       <BackToTopButton />
     </div>
   );