switch to tailwind (cyg v2.1)

This is a massive overhaul!

Firstly, we are switching to tailwind. Bootstrap sucks and was a poor decision
originally. Tailwind makes developement easier with better helper classes and
better deduplication, especially when combined with postcss etc..

Secondly, we are introducing dark mode. Tailwind has great dark mode
support. Right now it is browser-based, but we may swap to a selector at
some point depending on feedback.

Thirdly, we are now using next/font, which is vastly superior to importing fonts
manually. It seems to be working as expected. No more pop-in!

Finally, there was some assorted cleanup done and a couple bugfixes added.
These probably shouldn't be in this commit but such is life.

app/fonts.ts

@@ -0,0 +1,16 @@
+import { Montserrat, Play } from 'next/font/google'
+
+export const mont = Montserrat({
+    subsets: ['latin', 'latin-ext'],
+    display: 'swap',
+    weight: ['300', '400', '500', '700'],
+    variable: '--font-mont',
+});
+
+export const play = Play({
+    subsets: ['latin', 'latin-ext'],
+    display: 'swap',
+    style: 'normal',
+    weight: ['400', '700'],
+    variable: '--font-play',
+});

app/globals.css

@@ -1,10 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Play:wght@400;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /*global*/
-html {
-    background: white;
-}
-
 body {
     overflow: none;
     background: #F1F1F1;
@@ -15,22 +13,13 @@ body {
     background: #F1F1F1;
 }
 
-.mont {
-    font-family: 'Montserrat', sans-serif;
-    color: black;
-}
-
 .icon::before {
     display: inline-block;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
 }
 
 /*footer.tsx*/
-.bg-blue {
-    background: #31425f;
-}
-
 .most-height {
     min-height: 92dvh;
 }
@@ -39,16 +28,7 @@ body {
     height: 8dvh;
 }
 
-.tiny-font {
-    font-size: small;
-}
-
 /* nav.tsx */
-.play {
-    font-family: 'Play', sans-serif;
-    color: #44608F;
-}
-
 .grad {
     background: linear-gradient(139.78deg, #46408A 22.6%, #7670BA 29.58%, #27A4AC 45.92%, #355CC0 63.81%);
     -webkit-background-clip: text;
@@ -58,47 +38,7 @@ body {
     font-weight: 600;
 }
 
-.ml-a {
-    margin-left: auto;
-}
-
-.insta-size {
-    width: 25px;
-    height: 25px;
-}
-
-.nav-item {
-    font-weight: 400;
-}
-
-.grad-hover:hover {
-    filter: brightness(130%);
-    cursor: pointer;
-    transition: filter 0.1s;
-    transition-timing-function: ease-in-out;
-}
-
-.nav-item:hover {
-    filter: invert(37%) sepia(15%) saturate(1655%) hue-rotate(179deg) brightness(91%) contrast(86%);
-    cursor: pointer;
-    transition: filter 0.1s;
-    transition-timing-function: ease-in-out;
-}
-
-.z-max {
-    z-index: 9;
-}
-
 /* searchbar.tsx, filter.tsx */
-.search-size-g {
-    width: 30px;
-    height: 30px;
-}
-
-.w-full {
-    width: 100%;
-}
-
 .searchbar {
     outline: none;
     font-size: 1.2rem;
@@ -109,7 +49,6 @@ body {
     top: calc(100% + 20px);
     right: 0px;
     z-index: 1000;
-    background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(10px);
     border-radius: 25px;
     padding: 15px;
@@ -185,8 +124,6 @@ body {
         linear-gradient(to top, #27A4AC, #355CC0);
     background-clip: padding-box, border-box;
     background-origin: padding-box, border-box;
-    width: 45%;
-    height: auto;
 }
 
 .font-light {
@@ -244,33 +181,13 @@ body {
     cursor: pointer;
 }
 
-.cyg-img-container {
-    height: 75px;
-    width: 75px;
-    overflow: clip;
-}
-
 .cyg-img-container:hover .cyg-img-overlay {
     opacity: 1;
     background-color: rgba(53, 92, 192, 0.4);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 }
 
-@media (min-width: 768px) {
-    .cyg-img-container {
-        height: 100px;
-        width: 100px;
-    }
-}
-
-@media (min-width: 992px) {
-    .cyg-img-container {
-        height: 150px;
-        width: 150px;
-    }
-}
-
 .cyg-img {
     overflow: clip;
     object-fit: cover;

app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css'
 import Script from 'next/script'
 import { NextAuthProvider } from './NextAuthProvider';
 import Footer from '@/components/footer';
+import { mont } from './fonts';
 
 export const metadata = {
     title: 'Cygnet',
@@ -16,8 +17,8 @@ export default function RootLayout({
 }) {
     return (
         <NextAuthProvider>
-            <html lang="en">
-                <body className="bg">
+            <html lang="en" className={`${mont.className} font-medium`}>
+                <body className="bg-page-bg-light dark:bg-page-bg-dark">
                     <div className="most-height">
                         <Nav />
                         <div className="">
@@ -26,8 +27,6 @@ export default function RootLayout({
                     </div>
                     <Footer/>
                 </body>
-                {/*@ts-ignore*/}
-                <Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossOrigin="anonymous" />
                 <Script src="https://kit.fontawesome.com/3d9fad96a7.js" crossOrigin="anonymous" />
             </html>
         </NextAuthProvider>

app/page.tsx

@@ -1,5 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import './globals.css';
 import { Suspense } from 'react';
 import { headers } from 'next/headers';
 import SearchBar from '@/components/searchbar';
@@ -30,7 +28,7 @@ export default async function Home({ searchParams }: {
     if((clientIPArr[0].includes('130') && clientIPArr[1] === '58') ||
             (clientIPArr[0].includes('172')) || await auth()) {
         return (
-            <div className="">
+            <div className="px-4">
                 <Suspense>
                     <SearchBar />
                 </Suspense>

app/settings/page.tsx

@@ -1,6 +1,5 @@
 import { StudentInfo } from "@/components/pagebody";
 import { auth } from "@/lib/auth";
-import "bootstrap/dist/css/bootstrap.css";
 import SignIn from "@/components/signin";
 import prisma from "../../lib/prisma";
 

components/card.tsx

@@ -7,13 +7,11 @@ export default function Card(props: StudentInfo | any) {
   //probably can just use props -abhi
   if (props.id && props.showProfile) {
     return (
-      <div className="align-items-center bg-white rounded-lg py-3 px-2 cont shadow-sm flex-fill flex-grow-1 h-100">
+      <div className="items-center bg-white dark:bg-dark-blue rounded-lg py-6 px-3 cont shadow grow h-full">
         <UserImage
           photo_path={props.showPicture ? props.photo_path : "/placeholder.jpg"}
           button={(props.button && props.showPicture) ? props.button : false}
-          //NEWPHOTO = {NEWPHOTO}
         />{" "}
-        {/*sourced from where?*/}
         <UserInfo
           first={props.first}
           last={props.last}
@@ -23,13 +21,12 @@ export default function Card(props: StudentInfo | any) {
           id={props.id}
           photo_path={props.showPicture ? props.photo_path : "/placeholder.jpg"}
           pronouns={props.pronouns}
-          //NEWPHOTO = {NEWPHOTO}
         />
       </div>
     );
   } else {
     return (
-      <div className="align-items-center bg-white rounded-lg py-3 px-2 cont shadow-sm">
+      <div className="items-center bg-white dark:bg-dark-blue rounded-lg py-6 px-3 cont shadow grow h-full">
         <UserImage />
         <UserInfo />
       </div>

components/cardbody.tsx

@@ -10,11 +10,11 @@ export default function CardBody(props: CardBodyProps) {
     const { filteredData } = props;
     if (filteredData) {
         return (
-            <div className="container mb-4">
-                <div className="row flex align-items-stretch">
+            <div className="max-w-screen-lg md:mx-auto mt-4 mb-4 justify-center">
+                <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                     {
                         use(filteredData).map((item, index) => (
-                            <div className="col-6 col-md-4 col-lg-3 gy-4">
+                            <div className="flex-col">
                                 <Card key={index} {...item} />
                             </div>
                         ))
@@ -24,30 +24,30 @@ export default function CardBody(props: CardBodyProps) {
         )
     } else {
         return (
-            <div className="container mb-4">
-                <div className="row">
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+            <div className="max-w-screen-lg md:mx-auto mt-4 mb-4 justify-center">
+                <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
-                    <div className="col-6 col-md-4 col-lg-3 gy-4">
+                    <div className="flex-col gy-4">
                         <Card />
                     </div>
                 </div>

components/filter.tsx

@@ -43,11 +43,13 @@ export default function Filter(props: FilterProps) {
         setGradYear("");
     }
     return (
-        <div className={props.filterOn ? "position-absolute filterwindow d-flex row mx-2 mont" : "position-absolute opacity-0 invisible"}>
-            <p className="h4 font-semibold col-12 gx-2 gy-2">Filters</p>
-            <div className="col-12 col-md-4 gx-2 gy-2">
-                <div className="filterSelect shadow-md w-100 g-0">
-                    <select className="w-100" value={dorm} onChange={handleDormChange} title="Dorm">
+        <div className={props.filterOn ? "absolute filterwindow bg-gray-50/25 dark:bg-gray-800/25 grid gap-4 grid-cols-3 grid-rows-2 mx-2" : "absolute opacity-0 invisible"}>
+            <div className="grow flex-col w-full col-span-3">
+                <p className="h4 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">
+                    <select className="w-full" value={dorm} onChange={handleDormChange} title="Dorm">
                         <option>Dorms</option>
                         {dormsList.map((dormName) => (
                             <option key={dormName} value={dormName}>
@@ -57,9 +59,9 @@ export default function Filter(props: FilterProps) {
                     </select>
                 </div>
             </div>
-            <div className="col-12 col-md-4 gx-2 gy-2">
-                <div className="filterSelect shadow-md w-100 g-0">
-                    <select className="w-100" value={gradYear} onChange={handleYearChange} title="Year">
+            <div className="grow flex-col w-full col-span-1">
+                <div className="filterSelect shadow w-full g-0">
+                    <select className="w-full" value={gradYear} onChange={handleYearChange} title="Year">
                         <option >Class Year</option>
                         {yearsList.map((year) => (
                             <option key={year} value={year}>
@@ -69,8 +71,8 @@ export default function Filter(props: FilterProps) {
                     </select>
                 </div>
             </div>
-            <div className="col-12 col-md-4 gx-2 gy-2">
-                <button className="filterButton shadow-md w-100" onClick={handleReset}>Reset</button>
+            <div className="grow flex-col w-full col-span-1">
+                <button className="filterButton shadow w-full" onClick={handleReset}>Reset</button>
             </div>
         </div>
     )

components/footer.tsx

@@ -1,14 +1,14 @@
 export default function Footer() {
     return (
-        <footer className="py-2 bg-white footer-height shadow-sm">
-            <div className="container h-100 d-flex justify-content-center align-items-center">
+        <footer className="py-2 bg-white dark:bg-dark-blue footer-height flex justify-center items-center shadow">
+            <div className="max-w-screen-lg h-full content-center px-2">
                 <p
-                    className="mont text-black mb-0 tiny-font"
+                    className="text-black dark:text-white text-center mb-0 text-sm"
                 >
                     © 2024 Swarthmore College Computer Society |&nbsp;
-                    <a className="grad" href="https://www.sccs.swarthmore.edu/docs/policy">Usage & Data Policy</a>
+                    <a className="grad hover:brightness-150 dark:brightness-150 dark:hover:brightness-100" href="https://www.sccs.swarthmore.edu/docs/policy">Usage & Data Policy</a>
                     &nbsp;| Problems with this website? Email&nbsp;
-                    <a className="grad" href="mailto:[email protected]">[email protected]</a>.
+                    <a className="grad hover:brightness-150 dark:brightness-150 dark:hover:brightness-100" href="mailto:[email protected]">[email protected]</a>.
                 </p>
             </div>
         </footer>