From d72430e8cecb76990e0f33646d94e26ef0e29d84 Mon Sep 17 00:00:00 2001
From: Thomas Makin <halorocker89@gmail.com>
Date: Mon, 6 May 2024 00:02:42 -0400
Subject: [PATCH] make light mode not awful

---
 app/globals.css             |  4 ++--
 components/filter.tsx       | 14 +++++++-------
 components/searchbar.tsx    |  7 ++++++-
 components/settingsform.tsx | 17 ++++++++---------
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index e6699d5..77c00ed 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,8 +48,8 @@ body {
 }
 
 .filterwindow-wrapper {
-    top: calc(100% + 20px);
-    right: 0px;
+    top: 100%;
+    right: -1.25rem;
     height: 30dvh;
 }
 
diff --git a/components/filter.tsx b/components/filter.tsx
index b54cce9..1c365ae 100644
--- a/components/filter.tsx
+++ b/components/filter.tsx
@@ -51,13 +51,13 @@ export default function Filter(props: FilterProps) {
                 duration={500}
                 height={props.filterHeight} // see props documentation below
             >
-                <div className="filterwindow bg-gray-50/25 dark:bg-primary-800/25 grid gap-4 grid-cols-3 grid-rows-2">
+                <div className="filterwindow bg-gray-50/25 dark:bg-primary-800/25 grid gap-4 grid-cols-3 grid-rows-2 m-5">
                     <div className="grow flex-col w-full col-span-3">
                         <p className="font-semibold text-2xl dark:text-white ml-1">Filters</p>
                     </div>
                     <div className="grow flex-col w-full col-span-1">
-                        <div className="filterSelect shadow w-full g-0 rounded-full bg-white dark:bg-primary-800 dark:text-white border-0">
-                            <select className="w-full" value={dorm} onChange={handleDormChange} title="Dorm">
+                        <div className="filterSelect shadow w-full g-0 rounded-full bg-primary-400 hover:bg-primary-500 dark:bg-primary-800 text-white dark:hover:bg-primary-900 border-0">
+                            <select className="w-full text-black" value={dorm} onChange={handleDormChange} title="Dorm">
                                 <option>Dorms</option>
                                 {dormsList.map((dormName) => (
                                     <option key={dormName} value={dormName}>
@@ -68,8 +68,8 @@ export default function Filter(props: FilterProps) {
                         </div>
                     </div>
                     <div className="grow flex-col w-full col-span-1">
-                        <div className="filterSelect shadow w-full g-0 rounded-full bg-white dark:bg-primary-800 dark:text-white border-0">
-                            <select className="w-full" value={gradYear} onChange={handleYearChange} title="Year">
+                        <div className="filterSelect shadow w-full g-0 rounded-full bg-primary-400 hover:bg-primary-500 dark:bg-primary-800 text-white dark:hover:bg-primary-900 border-0">
+                            <select className="w-full text-black" value={gradYear} onChange={handleYearChange} title="Year">
                                 <option >Class Year</option>
                                 {yearsList.map((year) => (
                                     <option key={year} value={year}>
@@ -79,8 +79,8 @@ export default function Filter(props: FilterProps) {
                             </select>
                         </div>
                     </div>
-                    <div className="grow flex-col w-full col-span-1 rounded-full bg-white dark:bg-primary-600 dark:text-white border-0">
-                        <button className="filterButton shadow w-full" onClick={handleReset}>Reset</button>
+                    <div className="grow flex-col w-full col-span-1 rounded-full bg-primary-600 text-white border-0">
+                        <button className="filterButton rounded-full shadow w-full bg-transparent" onClick={handleReset}>Reset</button>
                     </div>
                 </div>
             </AnimateHeight>
diff --git a/components/searchbar.tsx b/components/searchbar.tsx
index efccd8f..2167314 100644
--- a/components/searchbar.tsx
+++ b/components/searchbar.tsx
@@ -36,6 +36,11 @@ export default function SearchBar() {
 
     const [filterHeight, setFilterHeight] = useState<Height>(0);
 
+    const style = {
+        transform: filterHeight ? 'rotate(180deg)' : '',
+        transition: 'transform 150ms ease-in-out', // smooth transition
+    }
+
     return (
         <div className="flex justify-center">
             <div className="max-w-screen-lg mx-2 mt-4 grow min-w-0">
@@ -57,7 +62,7 @@ export default function SearchBar() {
                         <line x1="1.18359" y1="0.314453" x2="1.18359" y2="51.2774" stroke-width="2" />
                     </svg>
 
-                    <svg className="stroke-gray-500 dark:stroke-white" aria-expanded={filterHeight !== 0}
+                    <svg className="stroke-gray-500 dark:stroke-white cursor-pointer" style={style} aria-expanded={filterHeight !== 0}
                         aria-controls="filter-panel"
                         onClick={() => setFilterHeight(filterHeight === 0 ? '100%' : 0)}
                         width="30" height="30" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/components/settingsform.tsx b/components/settingsform.tsx
index c673997..60b3bee 100644
--- a/components/settingsform.tsx
+++ b/components/settingsform.tsx
@@ -43,13 +43,12 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
             </div>
             <div className="flex-col grow col-span-1 md:col-span-3">
                 <div className="bg-white h-full grow dark:bg-dark-blue py-3 px-4 shadow rounded-lg grow text-black dark:text-white">
-                    <h1 className="text-2xl text-center mb-4">Edit Profile</h1>
-                    <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
+                    <h1 className="text-2xl text-center mb-4">Edit Profile</h1>                    <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
                         <div className="flex-col col-span-1">
                             <label className="h6 d-block">First Name</label>
                             <input
                                 name="fName"
-                                className="py-1 px-2 w-full d-block rounded bg-primary-600 dark:bg-primary-800 border-0"
+                                className="py-1 px-2 w-full d-block rounded text-white bg-primary-400 dark:bg-primary-800 border-0"
                                 value={userData.first}
                                 onChange={(e) => {
                                     setUserData(
@@ -63,7 +62,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                             <label className="h6 d-block">Last Name</label>
                             <input
                                 name="lName"
-                                className="py-1 px-2 w-full d-block rounded bg-primary-600 dark:bg-primary-800 border-0"
+                                className="py-1 px-2 w-full d-block rounded text-white bg-primary-400 dark:bg-primary-800 border-0"
                                 value={userData.last}
                                 onChange={(e) => {
                                     setUserData(
@@ -77,7 +76,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                             <label className="h6 d-block">Pronouns</label>
                             <input
                                 name="pNouns"
-                                className="py-1 px-2 w-full d-block rounded bg-primary-600 dark:bg-primary-800 border-0"
+                                className="py-1 px-2 w-full d-block rounded text-white bg-primary-400 dark:bg-primary-800 border-0"
                                 value={userData.pronouns}
                                 onChange={(e) => {
                                     setUserData(
@@ -91,7 +90,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                     <div className="grid gap-4 grid-cols-3 mt-4">
                         <div className="flex-col col-span-1 justify-center">
                             <input
-                                className="w-5 h-5 mb-px cursor-pointer text-primary-600 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
+                                className="w-5 h-5 mb-px cursor-pointer text-primary-400 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
                                 type="checkbox"
                                 name="showDorm"
                                 id="showDorm"
@@ -107,7 +106,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                         </div>
                         <div className="flex-col col-span-1 justify-center">
                             <input
-                                className="w-5 h-5 mb-px cursor-pointer text-primary-600 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
+                                className="w-5 h-5 mb-px cursor-pointer text-primary-400 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
                                 type="checkbox"
                                 name="showPicture"
                                 id="showPicture"
@@ -123,7 +122,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                         </div>
                         <div className="flex-col col-span-1 justify-center">
                             <input
-                                className="w-5 h-5 mb-px cursor-pointer text-primary-600 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
+                                className="w-5 h-5 mb-px cursor-pointer text-primary-400 dark:text-primary-800 hover:brightness-75 transition transition-filters border-0 rounded mx-1"
                                 type="checkbox"
                                 name="showProfile"
                                 id="showProfile"
@@ -139,7 +138,7 @@ export default function SettingsForm(props: { inData: StudentInfo, pending: bool
                         </div>
                     </div>
                     <div className="flex flex-row justify-center">
-                        <input type="submit" value="Submit" aria-disabled={props.pending} className="cursor-pointer mt-8 mx-auto w-full bg-primary-600 dark:bg-primary-800 hover:brightness-75 transition transition-filters rounded h-8 max-w-2xl" />
+                        <input type="submit" value="Submit" aria-disabled={props.pending} className="cursor-pointer mt-8 mx-auto w-full text-white bg-primary-400 dark:bg-primary-800 hover:brightness-75 transition transition-filters rounded h-8 max-w-2xl" />
                     </div>
                 </div>
             </div>