Use colors

UTDNebula · Nov 13, 2023 · 0e32421 · 0e32421
1 parent 7fa435f
commit 0e32421
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/components/common/SplashPageSearchBar/splashPageSearchBar.tsx b/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
@@ -75,7 +75,7 @@ export const SplashPageSearchBar = (props: SearchProps) => {
         <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"
+          className="rounded-md border-gray-300 dark:border-gray-700 border-2 w-full px-3 py-2 bg-white dark:bg-haiti placeholder-gray-700 dark:placeholder-gray-300 text-sm"
           placeholder="Search course, professor, or both..."
         />
       )}

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -78,7 +78,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' &&
     typeof process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA !== 'undefined' &&
     process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA !== '';
-  const darkModeElevation = prefersDarkMode ? 3 : 1;
+  const cardElevation = prefersDarkMode ? 3 : 1;
 
   const muiTheme = createTheme({
     palette: {
@@ -101,7 +101,10 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ThemeProvider theme={muiTheme}>
         <div
           className={
-            inter.variable + ' ' + kallisto.variable + ' h-full text-dark'
+            inter.variable +
+            ' ' +
+            kallisto.variable +
+            ' h-full text-haiti dark:text-white'
           }
         >
           <Component {...pageProps} />
@@ -112,7 +115,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <>
           <Card
             className="w-fit h-fit bg-light fixed bottom-2 right-2 rounded-full"
-            elevation={darkModeElevation}
+            elevation={cardElevation}
           >
             <Tooltip title="Open GitHub commit for this instance">
               <a

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Tooltip } from '@mui/material';
+import { Card, Tooltip, useMediaQuery } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import type { NextPage } from 'next';
@@ -41,6 +41,9 @@ const Home: NextPage = () => {
     router.prefetch('/dashboard');
   }, [router]);
 
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const cardElevation = prefersDarkMode ? 3 : 1;
+
   return (
     <>
       <Head>
@@ -53,11 +56,13 @@ const Home: NextPage = () => {
       </Head>
       <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>
+          <h2 className="text-sm font-semibold mb-3 text-cornflower-600 dark:text-cornflower-400 tracking-wider">
+            POWERED BY NEBULA LABS
+          </h2>
           <h1 className="text-6xl font-extrabold font-kallisto mb-6">
             UTD TRENDS
           </h1>
-          <p className="mb-10 leading-7">
+          <p className="mb-10 text-gray-700 dark:text-gray-300 leading-7">
             Explore and compare past grades, syllabi, professor ratings and
             reviews to find the perfect class.
           </p>
@@ -67,7 +72,7 @@ const Home: NextPage = () => {
           />
           <TransparentTooltip
             title={
-              <Card className="px-3 py-2" elevation={1}>
+              <Card className="px-3 py-2" elevation={cardElevation}>
                 <p className="text-sm">
                   You can search for:
                   <ul className="list-disc list-inside my-1">
@@ -87,8 +92,9 @@ const Home: NextPage = () => {
                 </p>
               </Card>
             }
+            enterTouchDelay={0}
           >
-            <p className="text-sm text-center">
+            <p className="text-sm text-center text-gray-700 dark:text-gray-300">
               What can you enter?{' '}
               <span className="underline">Pretty much anything.</span>
             </p>