Merge pull request #217 from acm-ucr/dev

merge to main
acm-ucr · Aug 27, 2024 · 449d7ab · 449d7ab
2 parents d39e309 + b8133bf
commit 449d7ab
Show file tree

Hide file tree

Showing 33 changed files with 243 additions and 145 deletions.
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -37,7 +37,7 @@ const Page = () => {
  })}
  </div>
  <div className="flex justify-center w-full -mt-4 mb-8">
- <Button text="Get Involved" link="/involve" />
+ <Button text="GET INVOLVED" link="/involve" />
  </div>
  </div>
  );

diff --git a/src/app/board/page.js b/src/app/board/page.js
@@ -4,21 +4,20 @@ import Title from "@/components/Title";
 
 const Page = () => {
  return (
- <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y py-[2%] items-center p-3">
- <div className="grid grid-cols-1 gap-y-10 animate-fade-down animate-delay-300">
- <Title text="Get To Know Us" color="green" />
- <div className="grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
- {BOARD.map((boardMember, index) => (
- <Board
- key={index}
- name={boardMember.name}
- role={boardMember.role}
- yearMajor={boardMember.yearMajor}
- funFact={boardMember.funFact}
- picture={boardMember.picture}
- />
- ))}
- </div>
+ <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y gap-y-8 py-[2%] items-center p-3">
+ <Title text="Get To Know Us" color="green" />
+
+ <div className="animate-fade-down animate-delay-300 grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
+ {BOARD.map((boardMember, index) => (
+ <Board
+ key={index}
+ name={boardMember.name}
+ role={boardMember.role}
+ yearMajor={boardMember.yearMajor}
+ funFact={boardMember.funFact}
+ picture={boardMember.picture}
+ />
+ ))}
  </div>
  </div>
  );

diff --git a/src/app/events/page.js b/src/app/events/page.js
@@ -2,7 +2,7 @@ import CalendarEvents from "@/components/events/CalendarEvents";
 
 const Page = () => {
  return (
- <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-peach">
+ <div className="bg-blobs1 bg-cover bg-biscuits-peach">
  <CalendarEvents />;
  </div>
  );

diff --git a/src/app/gallery/[type]/page.js b/src/app/gallery/[type]/page.js
@@ -10,9 +10,9 @@ export async function generateStaticParams() {
 
 const Page = ({ params }) => {
  const PAGES = {
- fall: "Fall 2023",
- winter: "Winter 2024",
- spring: "Spring 2024",
+ fall: "Fall '23",
+ winter: "Winter '24",
+ spring: "Spring '24",
  past: "Past",
  extra: "Extra",
  };

diff --git a/src/app/gallery/page.js b/src/app/gallery/page.js
@@ -9,13 +9,13 @@ import ExtraPhotos from "@/components/gallery/ExtraPhotos";
 const Page = () => {
  const [inView, ref] = useView();
  return (
- <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-green-100 min-h-screen p-7 w-full flex flex-col items-center">
- <div
+ <div className="bg-blobs1 lg:bg-cover bg-contain bg-biscuits-green-100 py-[2%] px-7 w-full flex flex-col items-center justify-center gap-y-8">
+ <Title
+ text="Gallery"
+ food="chip"
  ref={ref}
  className={`${inView && "animate-fade-up"} flex justify-center mb-10`}
- >
- <Title text="Gallery" food="chip" />
- </div>
+ />
 
  <TablingEvents />
  <QuarterlyEvents />

diff --git a/src/app/involve/page.js b/src/app/involve/page.js
@@ -6,7 +6,7 @@ import Title from "@/components/Title";
 
 const Page = () => {
  return (
- <div className="flex flex-col items-center bg-biscuits-peach bg-blobs1 bg-contain bg-repeat-y">
+ <div className="flex flex-col py-[2%] items-center bg-biscuits-peach bg-blobs1 bg-contain bg-repeat-y">
  <Title text="Involvement" food="swirl" color="biscuits-grey-100" />
  <Tabling />
  <FAQs />

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -45,11 +45,10 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
  return (
- <html
- lang="en"
- className={`${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable} ${fredoka.variable}`}
- >
- <body>
+ <html lang="en">
+ <body
+ className={`flex flex-col min-h-screen ${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable} ${fredoka.variable}`}
+ >
  <NavBar />
  {children}
  <Footer />

diff --git a/src/app/not-found.js b/src/app/not-found.js
@@ -1,21 +1,22 @@
 import Title from "@/components/Title";
-import Subtitle from "@/components/Subtitle";
 
 const NotFound = () => {
  return (
- <div className="flex flex-col items-center justify-center h-svh bg-biscuits-purple-200">
- <div className="w-1/2 h-1/2 shadow-2xl shadow-black">
+ <div className="flex flex-col items-center justify-center bg-biscuits-purple-200 flex-1 overscroll-none">
+ <div className="lg:w-1/2 w-11/12 h-[450px] shadow-2xl shadow-black">
  <div className="bg-biscuits-brown-100 w-full h-14 rounded-t-lg flex justify-end items-center px-4 space-x-5">
- <div className="bg-green-500 rounded-full w-5 h-5"></div>
- <div className="bg-yellow-500 rounded-full w-5 h-5"></div>
- <div className="bg-red-500 rounded-full w-5 h-5"></div>
+ <div className="bg-green-500 rounded-full w-5 h-5" />
+ <div className="bg-yellow-500 rounded-full w-5 h-5" />
+ <div className="bg-red-500 rounded-full w-5 h-5" />
  </div>
  <div className="bg-biscuits-peach rounded-b-lg pb-7 h-full flex flex-col items-center justify-center">
- <div className=" flex justify-center">
+ <div className="flex flex-col justify-center">
  <Title text="Error" color="red" />
- <Title text="4O4" />
+ <Title text="4O4" color="red" />
+ </div>
+ <div className="text-biscuits-red-200 font-shrikhand md:text-6xl self-center text-2xl">
+ Page Not Found
  </div>
- <Subtitle text="Page not found" color="text-biscuits-red-200" />
  </div>
  </div>
  </div>

diff --git a/src/app/support/page.js b/src/app/support/page.js
@@ -1,7 +1,7 @@
 import Support from "@/components/support/Support";
 const Page = () => {
  return (
- <div className="bg-biscuits-orange-300">
+ <div className="bg-biscuits-orange-300 flex flex-col py-[2%]">
  <Support />
  </div>
  );

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -1,16 +1,25 @@
 import Link from "next/link";
+import useView from "./useView";
 
 const Button = ({ text, link }) => {
+ const [inView, ref] = useView();
  return (
- <>
+ <div
+ className={`${
+ inView
+ ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
+ : ""
+ }`}
+ >
  <Link
  href={link}
  target="_blank"
- className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-2 px-10 md:py-3 md:px-12 rounded-full font-bold text-3xl duration-300 hover:opacity-80"
+ className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-1.5 px-8 md:py-2 md:px-12 rounded-full font-bold text-xl md:text-3xl hover:opacity-75 duration-100"
+ ref={ref}
  >
  {text}
  </Link>
- </>
+ </div>
  );
 };
 export default Button;
diff --git a/src/components/Subtitle.jsx b/src/components/Subtitle.jsx
@@ -7,7 +7,7 @@ const Subtitle = ({ color, text }) => {
  return (
  <div
  ref={ref}
- className={`my-2 font-bold font-shrikhand text-center text-4xl md:text-7xl ${color} ${
+ className={`font-bold font-shrikhand text-center text-4xl lg:text-6xl ${color} ${
  inView
  ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
  : ""

diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -11,23 +11,19 @@ const Title = ({ text, food, color }) => {
  }
 
  return (
- <div className="flex flex-row justify-center">
- <div className="inset-0 flex justify-center items-top p-3">
- <div
- className={`md:text-shadow text-shadow-sm ${darkColor} font-omc text-5xl md:text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
- >
- {text}
- </div>
+ <div className="flex flex-row w-fit justify-center self-center">
+ <div
+ className={`md:text-shadow text-shadow-sm ${darkColor} font-omc text-5xl lg:text-8xl sm:text-6xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
+ >
+ {text}
  </div>
 
  {food && COOKIES[food] && (
  <div className="ml-2 md:flex items-center hidden">
  <Image
  src={COOKIES[food]}
  alt={`${food} cookies`}
- width={100}
- height={100}
- className="w-12 h-12"
+ className="w-16 h-16"
  />
  </div>
  )}

diff --git a/src/components/board/Board.jsx b/src/components/board/Board.jsx
@@ -4,7 +4,10 @@ import Image from "next/image";
 const Board = ({ name, role, yearMajor, funFact, picture }) => {
  const [inView, ref] = useView();
  return (
- <div className="flex-col text-center justify-center w-64 h-96 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
+ <div
+ ref={ref}
+ className="flex-col text-center justify-center w-64 h-96 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]"
+ >
  <Image
  src={picture}
  alt="picture"
@@ -14,7 +17,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
  />
 
  <div
- ref={ref}
  className={`text-biscuits-green-200 font-shrikhand text-3xl ${
  inView && "animate-fade-left animate-delay-400"
  }`}
@@ -23,7 +25,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
  </div>
 
  <div
- ref={ref}
  className={`text-biscuits-green-200 font-omc text-xl ${
  inView && "animate-fade-right animate-delay-400"
  }`}
@@ -32,7 +33,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
  </div>
 
  <div
- ref={ref}
  className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
  inView && "animate-fade-left animate-delay-400"
  }`}
@@ -41,7 +41,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
  </div>
 
  <div
- ref={ref}
  className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
  inView && "animate-fade-left animate-delay-400"
  }`}

diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx
@@ -54,13 +54,13 @@ const CalendarEvents = () => {
  }, []);
 
  return (
- <div className="flex flex-col py-[2%]">
+ <div className="flex flex-col py-[2%] animate-delay-100 animate-fade-up">
  {/* Calendar Section */}
  <span className="-rotate-90 text-biscuits-purple-200 font-shrikhand text-6xl items-center w-[120px] absolute lg:bottom-1/4 xl:block hidden">
  {isClient ? date.toLocaleString("default", { month: "long" }) : ""}
  </span>
- <section className="w-full flex-grow flex justify-center items-center gap-x-4 ">
- <div className="w-5/6 h-[95vh] relative">
+ <section className="w-full flex-grow flex justify-center items-center gap-x-4">
+ <div className="md:w-5/6 w-11/12 h-[95vh] relative">
  <Calendar
  className="w-full m-0 p-0 2xl:text-3xl !border-biscuits-purple-200 !text-lg !font-fredoka"
  date={date}
@@ -108,7 +108,6 @@ const CalendarEvents = () => {
  endTime={selectedEvent.end}
  />
  )}
- {console.log(selectedEvent)}
  </div>
  </section>
  </div>

diff --git a/src/components/events/CustomEvents.jsx b/src/components/events/CustomEvents.jsx
@@ -12,8 +12,10 @@ const CustomEvent = ({ event }) => {
  };
 
  return (
- <div className={`rounded-lg p-2 mb-2 ${getStyle()}`}>
- <p className="truncate text-center text-md font-fredoka font-semibold text-black">
+ <div
+ className={`rounded-lg p-2 mb-2 ${getStyle()} md:h-full h-8 items-center`}
+ >
+ <p className="truncate text-center md:text-xl text-sm font-fredoka font-semibold text-black">
  {event.summary}
  </p>
  </div>

diff --git a/src/components/events/CustomHeader.jsx b/src/components/events/CustomHeader.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomHeader = ({ label }) => {
  return (
- <div className="font-bold font-shrikhand text-2xl 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-200 bg-transparent">
+ <div className="font-bold font-shrikhand text-center text-sm 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-200 bg-transparent">
  {label}
  </div>
  );

diff --git a/src/components/events/CustomToolbar.jsx b/src/components/events/CustomToolbar.jsx
@@ -76,7 +76,7 @@ const CustomToolbar = (event) => {
  {filters.map((filter, index) => (
  <div key={index} xs={9} sm={3} className="p-1">
  <p
- className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center text-sm`}
+ className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center md:text-lg text-sm`}
  >
  {filter.topic}
  </p>

diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx
@@ -19,7 +19,7 @@ const Modal = ({
  };
  return (
  <div
- className={`flex-col p-6 fixed rounded-3xl border-8 w-1/3 bg-white ${getStyle()} z-50 top-[45%] translate-x-2/3`}
+ className={`flex-col p-6 fixed rounded-3xl border-8 md:w-1/3 w-11/12 bg-white ${getStyle()} z-50 top-[45%] md:translate-x-2/3 -translate-x-5`}
  >
  <button
  onClick={() => setEvents(null)}

diff --git a/src/components/gallery/ExtraPhotos.jsx b/src/components/gallery/ExtraPhotos.jsx
@@ -8,12 +8,12 @@ import useView from "@/components/useView";
 const ExtraPhotos = () => {
  const [inView, ref] = useView();
  return (
- <div className="mb-14">
+ <div className="flex flex-col gap-y-8">
  <div
  ref={ref}
  className={`${
  inView && "animate-flip-up animate-once"
- } mb-10 flex justify-center`}
+ } flex justify-center`}
  >
  <Subtitle text="Extras" color="text-biscuits-green-200" />
  </div>

diff --git a/src/components/gallery/GalleryImage.jsx b/src/components/gallery/GalleryImage.jsx
@@ -10,7 +10,7 @@ const GalleryImage = ({ src, alt }) => {
  <div
  ref={ref}
  className={`${
- inView && "animate-fade-down"
+ inView && "animate-fade-down animate-once"
  } transition-transform duration-100 ease-in-out`}
  >
  <Image src={src} alt={alt} />

diff --git a/src/components/gallery/Hoverable.jsx b/src/components/gallery/Hoverable.jsx
@@ -3,19 +3,21 @@ import Link from "next/link";
 
 const Hoverable = ({ text, link, image }) => {
  return (
- <Link href={link} target="_blank">
- <div className="group relative flex justify-center items-center justify-self-center">
- <div className="absolute opacity-0 group-hover:opacity-100 text-white z-10 font-semibold text-2xl md:text-4xl duration-150">
- {text}
+ <div className="relative z-0">
+ <Link href={link} target="_blank">
+ <div className="group relative flex justify-center items-center justify-self-center">
+ <div className="absolute opacity-0 group-hover:opacity-100 text-white z-10 font-semibold text-2xl md:text-4xl duration-150">
+ {text}
+ </div>
+ <div className="opacity-0 group-hover:opacity-50 bg-gray-900 w-full h-full absolute duration-150" />
+ <Image
+ src={image}
+ alt="gallery image"
+ className="aspect-[3/2] object-cover"
+ />
  </div>
- <div className="opacity-0 group-hover:opacity-50 bg-gray-900 w-full h-full absolute duration-150" />
- <Image
- src={image}
- alt="gallery image"
- className="aspect-[3/2] object-cover"
- />
- </div>
- </Link>
+ </Link>
+ </div>
  );
 };