Refinement

UTDNebula · Nov 13, 2023 · 704db65 · 704db65
1 parent 07f94ec
commit 704db65
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 75 deletions.
diff --git a/components/common/SplashPageSearchBar/splashPageSearchBar.tsx b/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, InputAdornment, InputBase } from '@mui/material';
+import { Autocomplete, InputBase } from '@mui/material';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import React, { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel
  */
 type SearchProps = {
   selectSearchValue: (chosenOption: SearchQuery | null) => void;
+  className: string;
 };
 
 /**
@@ -55,69 +56,63 @@ export const SplashPageSearchBar = (props: SearchProps) => {
   }, [inputValue]);
 
   return (
-    <>
-      <div className="text-primary m-auto">
-        <Autocomplete
-          autoHighlight={true}
-          className="w-full h-12"
-          getOptionLabel={(option) => searchQueryLabel(option)}
-          options={options}
-          filterOptions={(options) => options}
-          // When a new option is selected return it to the parent
-          // component using selectSearchValue prop
-          onChange={(
-            event: React.SyntheticEvent,
-            newValue: SearchQuery | null,
-          ) => props.selectSearchValue(newValue)}
-          inputValue={inputValue}
-          onInputChange={(event, newInputValue) => {
-            setInputValue(newInputValue);
-          }}
-          renderInput={(params) => (
-            <InputBase
-              ref={params.InputProps.ref}
-              inputProps={params.inputProps}
-              className="rounded-md border-surface border-2 w-full px-3 py-2 bg-light text-primary-dark placeholder-primary-dark text-sm"
-              placeholder="Search course, professor, or both...."
-            />
-          )}
-          renderOption={(props, option, { inputValue }) => {
-            const text = searchQueryLabel(option);
-            //add spaces between prefix and course number
-            const matches = match(
-              text,
-              inputValue
-                .replace(
-                  //CS1200 -> CS 1200
-                  /([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/,
-                  '$1 $2',
-                )
-                .replace(
-                  //1200CS -> 1200 CS
-                  /([0-9][0-9V][0-9]{2})([a-zA-Z]{1,4})/,
-                  '$1 $2',
-                ),
-            );
-            const parts = parse(text, matches);
-            return (
-              <li {...props}>
-                {parts.map((part, index) => (
-                  <span
-                    key={index}
-                    className={
-                      'whitespace-pre-wrap' +
-                      (part.highlight ? ' font-bold' : '')
-                    }
-                  >
-                    {part.text}
-                  </span>
-                ))}
-              </li>
-            );
-          }}
+    <Autocomplete
+      autoHighlight={true}
+      className={props.className}
+      getOptionLabel={(option) => searchQueryLabel(option)}
+      options={options}
+      filterOptions={(options) => options}
+      // When a new option is selected return it to the parent
+      // component using selectSearchValue prop
+      onChange={(event: React.SyntheticEvent, newValue: SearchQuery | null) =>
+        props.selectSearchValue(newValue)
+      }
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      renderInput={(params) => (
+        <InputBase
+          ref={params.InputProps.ref}
+          inputProps={params.inputProps}
+          className="rounded-md border-surface border-2 w-full px-3 py-2 bg-light text-primary-dark placeholder-primary-dark text-sm"
+          placeholder="Search course, professor, or both..."
         />
-      </div>
-    </>
+      )}
+      renderOption={(props, option, { inputValue }) => {
+        const text = searchQueryLabel(option);
+        //add spaces between prefix and course number
+        const matches = match(
+          text,
+          inputValue
+            .replace(
+              //CS1200 -> CS 1200
+              /([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/,
+              '$1 $2',
+            )
+            .replace(
+              //1200CS -> 1200 CS
+              /([0-9][0-9V][0-9]{2})([a-zA-Z]{1,4})/,
+              '$1 $2',
+            ),
+        );
+        const parts = parse(text, matches);
+        return (
+          <li {...props}>
+            {parts.map((part, index) => (
+              <span
+                key={index}
+                className={
+                  'whitespace-pre-wrap' + (part.highlight ? ' font-bold' : '')
+                }
+              >
+                {part.text}
+              </span>
+            ))}
+          </li>
+        );
+      }}
+    />
   );
 };
 

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -99,9 +99,13 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="icon" href="/Project_Nebula_Logo.svg" />
       </Head>
       <ThemeProvider theme={muiTheme}>
-        <main className={inter.variable + ' ' + kallisto.variable}>
+        <div
+          className={
+            inter.variable + ' ' + kallisto.variable + ' h-full text-dark'
+          }
+        >
           <Component {...pageProps} />
-        </main>
+        </div>
       </ThemeProvider>
       <Analytics />
       {showGitInfo ? (

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,4 @@
-import { Tooltip, Typography } from '@mui/material';
-import Card from '@mui/material/Card';
+import { Card, Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import type { NextPage } from 'next';
@@ -8,7 +7,6 @@ import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
 
 import { SplashPageSearchBar } from '../components/common/SplashPageSearchBar/splashPageSearchBar';
-import { LogoIcon } from '../components/icons/LogoIcon/logoIcon';
 import SearchQuery from '../modules/SearchQuery/SearchQuery';
 import searchQueryLabel from '../modules/searchQueryLabel/searchQueryLabel';
 
@@ -53,20 +51,48 @@ const Home: NextPage = () => {
         />
         <meta property="og:url" content="https://trends.utdnebula.com" />
       </Head>
-      <div className="bg-[url('/background.png')] bg-cover h-full w-full flex justify-center items-center">
-        <div>
-          <h2 className="text-sm font-semibold mb-3">
-            POWERED BY NEBULA LABS
-          </h2>
+      <div className="bg-[linear-gradient(rgba(211,211,211,0.5),rgba(211,211,211,0.5)),url('/background.png')] dark:bg-[linear-gradient(rgba(45,45,45,0.5),rgba(45,45,45,0.5)),url('/background.png')] bg-cover h-full w-full flex justify-center items-center p-8">
+        <div className="max-w-xl">
+          <h2 className="text-sm font-semibold mb-3">POWERED BY NEBULA LABS</h2>
           <h1 className="text-6xl font-extrabold font-kallisto mb-6">
             UTD TRENDS
           </h1>
-          <p className="mb-10">
-            Explore and compare past grades, syllabi, professor ratings and reviews to find the perfect class. 
+          <p className="mb-10 leading-7">
+            Explore and compare past grades, syllabi, professor ratings and
+            reviews to find the perfect class.
           </p>
           <SplashPageSearchBar
             selectSearchValue={searchOptionChosen}
+            className="mb-3"
           />
+          <TransparentTooltip
+            title={
+              <Card className="px-3 py-2" elevation={1}>
+                <p className="text-sm">
+                  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>
+                  then we&apos;ll aggregate grades across every section
+                </p>
+              </Card>
+            }
+          >
+            <p className="text-sm text-center">
+              What can you enter?{' '}
+              <span className="underline">Pretty much anything.</span>
+            </p>
+          </TransparentTooltip>
         </div>
       </div>
     </>