cygnet: misc qol updates

- bump packs - clean configs etc a bit - minor layout fixes - minor ui improvements
swat-sccs · Jul 25, 2024 · deb30ac · deb30ac
1 parent d72430e
commit deb30ac
Show file tree

Hide file tree

Showing 9 changed files with 988 additions and 463 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -21,15 +21,13 @@ body {
 
 /*footer.tsx*/
 .most-height {
-    min-height: 90dvh;
+    min-height: 80dvh;
 }
 
-.footer-height {
+.header-height {
     height: 10dvh;
 }
 
-
-
 /* nav.tsx */
 .grad {
     background: linear-gradient(139.78deg, #46408A 22.6%, #7670BA 29.58%, #27A4AC 45.92%, #355CC0 63.81%);
@@ -129,22 +127,6 @@ body {
     font-weight: 400;
 }
 
-.enlarge-properties {
-    position: absolute;
-    z-index: 1;
-    top: 20px;
-    left: 20px;
-    width: 20px;
-    height: 20px;
-}
-
-.enlarge-properties: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;
-}
-
 .cursor-pointer {
     cursor: pointer;
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,7 +7,12 @@ import { mont } from './fonts';
 
 export const metadata = {
     title: 'Cygnet',
-    description: 'Generated by create next app',
+    description: 'The Swarthmore student directory | by SCCS',
+    generator: 'Cygnet',
+    applicationName: 'Cygnet',
+    keywords: ['Cygnet', 'Swarthmore', 'student', 'directory'],
+    authors: [{ name: "SCCS", url: "https://sccs.swarthmore.edu"}],
+    creator: "Swarthmore College Computer Society",
 }
 
 export default function RootLayout({
@@ -19,11 +24,9 @@ export default function RootLayout({
         <NextAuthProvider>
             <html lang="en" className={`${mont.className} font-medium`}>
                 <body className="bg-page-bg-light dark:bg-page-bg-dark">
+                    <Nav />
                     <div className="most-height">
-                        <Nav />
-                        <div className="">
-                            {children}
-                        </div>
+                        {children}
                     </div>
                     <Footer/>
                 </body>

diff --git a/components/filter.tsx b/components/filter.tsx
@@ -45,7 +45,7 @@ export default function Filter(props: FilterProps) {
         setGradYear("");
     }
     return (
-        <div className="absolute filterwindow-wrapper z-50">
+        <div className="absolute filterwindow-wrapper z-30">
             <AnimateHeight
                 id="filter-panel"
                 duration={500}

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,11 +1,15 @@
+import packageInfo from '../package.json';
+
 export default function Footer() {
     return (
-        <footer className="py-2 bg-white dark:bg-dark-blue footer-height flex justify-center items-center shadow">
+        <footer className="py-2 bg-white dark:bg-dark-blue header-height flex justify-center items-center shadow">
             <div className="max-w-screen-lg h-full content-center px-2">
                 <p
                     className="text-black dark:text-white text-center mb-0 text-xs md:text-sm"
                 >
                     © 2024 Swarthmore College Computer Society |&nbsp;
+                    v{packageInfo.version}&nbsp;
+                    |&nbsp;
                     <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 hover:brightness-150 dark:brightness-150 dark:hover:brightness-100" href="mailto:[email protected]">[email protected]</a>.

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -12,14 +12,14 @@ export default function Nav() {
 
     const { data: session } = useSession();
 
-    return (
-        <nav className="bg-white dark:bg-dark-blue shadow flex-col">
-            <div className="max-w-screen-lg md:mx-auto flex flex-wrap items-center justify-between p-4">
+    return ( 
+        <nav className="bg-white dark:bg-dark-blue shadow flex-col header-height">
+            <div className="h-full max-w-screen-lg md:mx-auto flex flex-wrap items-center justify-between content-center px-4 py-2">
                 <p className={`${play.className} cursor-pointer`}>
-                    <Link className="text-decoration-none nav-item transition transition-colors text-black dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white text-4xl" href="/">
+                    <Link className="text-decoration-none nav-item transition text-black dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white text-4xl" href="/">
                         CYGNET
                     </Link>
-                    <span className="grad transition transition-colors hover:brightness-150 dark:brightness-150 dark:hover:brightness-100">
+                    <span className="grad transition-colors hover:brightness-150 dark:brightness-150 dark:hover:brightness-100">
                         <Link href="https://www.sccs.swarthmore.edu/" className="text-decoration-none">
                             by SCCS
                         </Link>
@@ -32,57 +32,56 @@ export default function Nav() {
                     {...getToggleProps()}>
                     <span className="sr-only">Open main menu</span>
                     <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
                     </svg>
                 </button>
                 <div className="w-full hidden md:visible md:block md:w-auto">
-                    <ul className="font-medium flex items-center p-4 p-0 flex-row space-x-8 rtl:space-x-reverse mt-0">
+                    <ul className="font-medium flex items-center p-0 flex-row space-x-8 rtl:space-x-reverse mt-0">
                         <li>
-                            <Link href="/settings" className="block py-2 px-3 text-decoration-none text-lg text-black transition transition-colors dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white" aria-current="page">
+                            <Link href="/settings" className="block py-2 px-3 text-decoration-none text-lg text-black transition dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white" aria-current="page">
                                 <p className={pathName == "/settings" ? "text-selected" : ""}>
                                     Settings
                                 </p>
                             </Link>
                         </li>
                         <li>
-                            <p onClick={() => session?.user ? signOut() : signIn("keycloak")} className="block py-2 px-3 cursor-pointer transition transition-colors text-lg text-decoration-none text-black dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white">
+                            <p onClick={() => session?.user ? signOut() : signIn("keycloak")} className="block py-2 px-3 cursor-pointer transition text-lg text-decoration-none text-black dark:md:hover:text-primary-800 md:hover:text-primary-500 md:p-0 dark:text-white">
                                 {session?.user ? "Sign Out" : "Sign In"}
                             </p>
                         </li>
                         <li>
                             <Link href="https://www.instagram.com/swatsccs/" className="block py-2 px-3 text-decoration-none md:p-0">
-                                <svg className="stroke-black dark:stroke-white dark:md:hover:stroke-primary-800 md:hover:stroke-primary-500 transition transition-colors" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M19.8333 2.33301H8.16658C4.94492 2.33301 2.33325 4.94468 2.33325 8.16634V19.833C2.33325 23.0547 4.94492 25.6663 8.16658 25.6663H19.8333C23.0549 25.6663 25.6666 23.0547 25.6666 19.833V8.16634C25.6666 4.94468 23.0549 2.33301 19.8333 2.33301Z" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                <svg className="stroke-black dark:stroke-white dark:md:hover:stroke-primary-800 md:hover:stroke-primary-500 transition" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M19.8333 2.33301H8.16658C4.94492 2.33301 2.33325 4.94468 2.33325 8.16634V19.833C2.33325 23.0547 4.94492 25.6663 8.16658 25.6663H19.8333C23.0549 25.6663 25.6666 23.0547 25.6666 19.833V8.16634C25.6666 4.94468 23.0549 2.33301 19.8333 2.33301Z" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
                                     <path d="M18.6667 13.2654C18.8106 14.2363 18.6448 15.2279 18.1927 16.0992C17.7406 16.9705 17.0253 17.677 16.1485 18.1183C15.2718 18.5596 14.2782 18.7132 13.3091 18.5573C12.34 18.4013 11.4447 17.9438 10.7506 17.2497C10.0566 16.5556 9.599 15.6604 9.44306 14.6913C9.28712 13.7222 9.44073 12.7286 9.88203 11.8518C10.3233 10.975 11.0299 10.2597 11.9011 9.80763C12.7724 9.35555 13.764 9.1897 14.735 9.33369C15.7254 9.48055 16.6423 9.94206 17.3503 10.65C18.0583 11.358 18.5198 12.2749 18.6667 13.2654Z" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M20.4167 7.58301H20.4284" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    <path d="M20.4167 7.58301H20.4284" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
                                 </svg>
-
                             </Link>
                         </li>
                     </ul>
                 </div>
             </div>
             <section {...getCollapseProps()}>
-                <div className="w-full md:hidden" id="navbar-default">
+                <div className="w-full md:hidden bg-white dark:bg-dark-blue z-50 relative" id="navbar-default">
                     <ul className="font-medium flex flex-col items-center px-4 pb-4 md:p-0 rounded-lg">
                         <li className="grow w-full">
-                            <Link href="/settings" className="flex flex-row justify-end py-2 px-3 text-decoration-none text-lg text-black transition transition-colors dark:text-white" aria-current="page">
+                            <Link href="/settings" className="flex flex-row justify-end py-2 px-3 text-decoration-none text-lg text-black transition dark:text-white" aria-current="page">
                                 <p className={pathName == "/settings" ? "text-selected" : ""}>
                                     Settings
                                 </p>
                             </Link>
                         </li>
                         <li className="grow w-full">
-                            <p onClick={() => session?.user ? signOut() : signIn("keycloak")} className="flex flex-row justify-end py-2 px-3 cursor-pointer transition transition-colors text-lg text-decoration-none text-black dark:text-white">
+                            <p onClick={() => session?.user ? signOut() : signIn("keycloak")} className="flex flex-row justify-end py-2 px-3 cursor-pointer transition text-lg text-decoration-none text-black dark:text-white">
                                 {session?.user ? "Sign Out" : "Sign In"}
                             </p>
                         </li>
                         <li className="grow w-full">
                             <Link href="https://www.instagram.com/swatsccs/" className="flex flex-row justify-end py-2 px-3 text-decoration-none md:p-0">
-                                <svg className="stroke-black dark:stroke-white transition transition-colors" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M19.8333 2.33301H8.16658C4.94492 2.33301 2.33325 4.94468 2.33325 8.16634V19.833C2.33325 23.0547 4.94492 25.6663 8.16658 25.6663H19.8333C23.0549 25.6663 25.6666 23.0547 25.6666 19.833V8.16634C25.6666 4.94468 23.0549 2.33301 19.8333 2.33301Z" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                <svg className="stroke-black dark:stroke-white transition-colors" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M19.8333 2.33301H8.16658C4.94492 2.33301 2.33325 4.94468 2.33325 8.16634V19.833C2.33325 23.0547 4.94492 25.6663 8.16658 25.6663H19.8333C23.0549 25.6663 25.6666 23.0547 25.6666 19.833V8.16634C25.6666 4.94468 23.0549 2.33301 19.8333 2.33301Z" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
                                     <path d="M18.6667 13.2654C18.8106 14.2363 18.6448 15.2279 18.1927 16.0992C17.7406 16.9705 17.0253 17.677 16.1485 18.1183C15.2718 18.5596 14.2782 18.7132 13.3091 18.5573C12.34 18.4013 11.4447 17.9438 10.7506 17.2497C10.0566 16.5556 9.599 15.6604 9.44306 14.6913C9.28712 13.7222 9.44073 12.7286 9.88203 11.8518C10.3233 10.975 11.0299 10.2597 11.9011 9.80763C12.7724 9.35555 13.764 9.1897 14.735 9.33369C15.7254 9.48055 16.6423 9.94206 17.3503 10.65C18.0583 11.358 18.5198 12.2749 18.6667 13.2654Z" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M20.4167 7.58301H20.4284" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    <path d="M20.4167 7.58301H20.4284" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
                                 </svg>
 
                             </Link>

diff --git a/components/signin.tsx b/components/signin.tsx
@@ -14,7 +14,7 @@ export default function SignIn() {
         )
     }
     return (
-        <div className="flex mt-16 items-center justify-center flex-col w-full text-lg text-black dark:text-white">
+        <div className="flex pt-16 items-center justify-center flex-col w-full text-lg text-black dark:text-white">
             <div className="flex-row justify-center">
                 <p
                     className="text-center"
@@ -31,7 +31,7 @@ export default function SignIn() {
                 </p>
             </div>
             <div className="flex-row justify-center">
-                <button className="filterButton shadow mt-5" onClick={() => signIn("keycloak")}>Sign in</button>
+                <button className="shadow px-6 py-2 mt-5 rounded-full bg-primary-600 hover:bg-primary-800 dark:bg-dark-blue text-white transition-colors border-0" onClick={() => signIn("keycloak")}>Sign in</button>
             </div>
         </div>
     )