Feature/what you can enter popup (#108)

* Add what you can enter box * Prettier * Removed unused import Popper --------- Co-authored-by: William Skaggs <[email protected]>
UTDNebula · Oct 12, 2023 · 50458b3 · 50458b3
1 parent a3c30e9
commit 50458b3
Showing 1 changed file with 48 additions and 1 deletion.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,7 @@
+import { Tooltip, Typography } from '@mui/material';
 import Card from '@mui/material/Card';
+import { styled } from '@mui/material/styles';
+import { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -11,6 +14,15 @@ import { Wave2SVG } from '../components/icons/Wave2/wave2SVG';
 import SearchQuery from '../modules/SearchQuery/SearchQuery';
 import searchQueryLabel from '../modules/searchQueryLabel/searchQueryLabel';
 
+const TransparentTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'transparent',
+    maxWidth: 'none',
+  },
+}));
+
 /**
  * Returns the home page with Nebula Branding, waved background, and SearchBar Components
  */
@@ -51,11 +63,46 @@ const Home: NextPage = () => {
         <div className="flex justify-center content-center h-screen translate-y-">
           <div className="h-1/4 w-full relative m-auto">
             <Card className="bg-light relative sm:w-5/12 overflow-visible drop-shadow-lg rounded-xl bg-opacity-50 m-auto xs:w-11/12">
-              <div className="bottom-0 absolute text-dark w-full h-1/4 m-auto pb-12 mt-4 mb-4">
+              <div className="bottom-0 absolute text-dark w-full h-1/4 m-auto pb-12 mt-4 mb-6">
                 <SplashPageSearchBar
                   selectSearchValue={searchOptionChosen}
                   disabled={false}
                 />
+                <TransparentTooltip
+                  title={
+                    <Card className="px-3 py-2" elevation={1}>
+                      <Typography variant="body2">
+                        You can search for:
+                        <ul className="list-disc list-inside my-1">
+                          <li>
+                            A whole course:{' '}
+                            <span className="italic">CS 1337</span>
+                          </li>
+                          <li>
+                            A professor&apos;s name:{' '}
+                            <span className="italic">Jason Smith</span>
+                          </li>
+                          <li>
+                            A course and professor:{' '}
+                            <span className="italic">CS 1337 Jason Smith</span>
+                          </li>
+                        </ul>
+                        <p>
+                          then we&apos;ll aggregate grades across every section
+                        </p>
+                      </Typography>
+                    </Card>
+                  }
+                >
+                  <Typography
+                    className="text-gray-600"
+                    align="center"
+                    variant="subtitle2"
+                  >
+                    What you can enter?{' '}
+                    <span className="underline">Pretty much anything.</span>
+                  </Typography>
+                </TransparentTooltip>
               </div>
               <div className="w-11/12 h-3/4 m-auto -translate-y-1/2 relative">
                 <Card className="bg-primary rounded-xl drop-shadow-lg text-light p-8 relative h-full">