Skip to content

Commit

Permalink
make light mode not awful
Browse files Browse the repository at this point in the history
  • Loading branch information
@makinbacon21
makinbacon21 committed May 6, 2024
1 parent a65d733 commit d72430e
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 19 deletions.
4 changes: 2 additions & 2 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ body {
}

.filterwindow-wrapper {
top: calc(100% + 20px);
right: 0px;
top: 100%;
right: -1.25rem;
height: 30dvh;
}

Expand Down
14 changes: 7 additions & 7 deletions components/filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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}>
Expand All @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion components/searchbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
17 changes: 8 additions & 9 deletions components/settingsform.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit d72430e

Please sign in to comment.