From 35a98a06d395070639899c93491edf8a078db65d Mon Sep 17 00:00:00 2001 From: Claudio Sciotto Date: Tue, 25 Mar 2025 14:13:23 -0400 Subject: [PATCH 01/15] Updated overflow bugs in landing page * gbms card * monitor component is removed in smaller screens --- package-lock.json | 18 +++++++-------- src/app/page.tsx | 7 +++--- src/components/landing/Events.tsx | 17 +++++++------- src/components/landing/Faq.tsx | 29 +++++++++++++++++------- src/components/projects/ProjectsPage.tsx | 3 +-- 5 files changed, 43 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 395786c..a9e2926 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,9 +75,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz", - "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==", + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz", + "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2227,9 +2227,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -4840,9 +4840,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "funding": [ { "type": "github", diff --git a/src/app/page.tsx b/src/app/page.tsx index 13708ca..4b40498 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,14 +5,13 @@ import Events from "@/components/landing/Events"; import Faq from "@/components/landing/Faq"; import Hero from "@/components/landing/Hero"; - const Website = () => { return (
- - - + + +
); diff --git a/src/components/landing/Events.tsx b/src/components/landing/Events.tsx index e7a2c2d..8ae0cc5 100644 --- a/src/components/landing/Events.tsx +++ b/src/components/landing/Events.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"; import { motion } from "framer-motion"; import GlowingLine from "../decorations/GlowingLine"; - const Events: React.FC = () => { const [isDesktop, setIsDesktop] = useState(false); @@ -17,10 +16,12 @@ const Events: React.FC = () => { }, []); return ( -
+
{/* Background Gradients */} -

Popular Events

+

+ Popular Events +

{/* Activities Section */}
@@ -90,7 +91,7 @@ const Events: React.FC = () => { /> {/* Content Cards */} -
+
{/* Socials Card */} { transition={{ duration: 0.7, ease: "easeOut" }} viewport={{ once: true, amount: 0.2 }} > -
+
{ {/* GBMs Card */} -
+
{ viewport={{ once: true, amount: 0.2 }} > -
+
{ + const checkIfMobile = () => { + setIsMobile(window.innerWidth < 620); + }; + checkIfMobile(); + window.addEventListener("resize", checkIfMobile); + return () => window.removeEventListener("resize", checkIfMobile); + }, []); + return ( -
-

+
+

Frequently Asked Questions

-
+
{faqs.map((faq, i) => ( ))}
-
-
- + {!isMobile && ( +
+
+ +
-
+ )}
); diff --git a/src/components/projects/ProjectsPage.tsx b/src/components/projects/ProjectsPage.tsx index 2cfa0ca..47d1704 100644 --- a/src/components/projects/ProjectsPage.tsx +++ b/src/components/projects/ProjectsPage.tsx @@ -53,7 +53,6 @@ export default function ProjectsPage() { return (
{/* Applied noise background for consistency */} -
{/* Hero Section with Title */}
@@ -109,7 +108,7 @@ export default function ProjectsPage() {
{loading ? (
-
+
) : (
From 4ff3bebb6fd59aba7312ca97bd3d1df931e562ac Mon Sep 17 00:00:00 2001 From: Claudio Sciotto Date: Tue, 25 Mar 2025 15:33:03 -0400 Subject: [PATCH 02/15] Updated Modals in project page --- src/app/globals.css | 36 ++++- src/components/projects/ProjectModal.tsx | 177 +++++++++++++++-------- src/components/projects/ProjectsPage.tsx | 18 ++- 3 files changed, 160 insertions(+), 71 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 1a67f4b..b57725b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @tailwind base; @tailwind components; @@ -76,25 +76,47 @@ body { filter: blur(20px); } - /* monospace font - will update later */ .m { - font-family: "Space Mono", serif; + font-family: "Space Mono", serif; } /* fade background of hero */ - .hero-btn:hover { /* Apply a full (all-around) shadow with #79C7FD */ box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7); } .hero-fade { - background: linear-gradient(180deg,#080d1400 0%, #080d14 100%); + background: linear-gradient(180deg, #080d1400 0%, #080d14 100%); } .about-fade { - background: linear-gradient(0deg,#080d1400 0%, #080d14 100%); -} \ No newline at end of file + background: linear-gradient(0deg, #080d1400 0%, #080d14 100%); +} + +/* Custom minimalist scrollbar */ +.custom-scrollbar::-webkit-scrollbar { + width: 4px; +} + +.custom-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background: rgba(59, 130, 246, 0.2); + border-radius: 4px; +} + +.custom-scrollbar::-webkit-scrollbar-thumb:hover { + background: rgba(59, 130, 246, 0.5); +} + +/* Firefox */ +.custom-scrollbar { + scrollbar-width: thin; + scrollbar-color: rgba(59, 130, 246, 0.2) transparent; +} diff --git a/src/components/projects/ProjectModal.tsx b/src/components/projects/ProjectModal.tsx index e72d565..ee170b4 100644 --- a/src/components/projects/ProjectModal.tsx +++ b/src/components/projects/ProjectModal.tsx @@ -1,6 +1,15 @@ import { useState, useRef, useEffect } from "react"; import { Project } from "@/types/project"; -import { X } from "lucide-react"; +import { + X, + MonitorPlay, + Camera, + Info, + Cpu, + Users, + Calendar, +} from "lucide-react"; +import { Timestamp } from "firebase/firestore"; interface ProjectModalProps { project: Project; @@ -30,77 +39,132 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) { }; }, [onClose]); + const formatDate = (date: Timestamp) => { + return new Date( + date.toDate().getTime() - date.toDate().getTimezoneOffset() * 60000, + ).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + }); + }; + + // Define tab icons + const tabIcons = { + description: , + specs: , + builders: , + }; + return (
onClose()} >
e.stopPropagation()} > - {/* Noise background */} -
- {/* Close button */}
- {/* Left side - Image */} -
+ {/* Left side - Image with title overlay and buttons at bottom */} +
{project.Title} - {/* Gradient overlay */} -
-
-
- {/* Right side - Content */} -
-

- {project.Title} -

-
-

- {project.semester.term} {project.semester.year} -

-

- Built on{" "} - {new Date( - project.buildDate.toDate().getTime() - - project.buildDate.toDate().getTimezoneOffset() * 60000, - ).toLocaleDateString()} -

+ {/* Gradient overlays for text readability */} +
+ + {/* Title and info at the top */} +
+

+ {project.Title} +

+ +
+
+ + + {project.semester.term} {project.semester.year} + +
+ +
+ Built on {formatDate(project.buildDate)} +
+
+
+ + {/* Action buttons at bottom */} +
+
- {/* Tabs */} -
+ {/* Right side - Only tabs and their content - NOW SCROLLABLE */} +
+ {/* Tabs with fixed mobile layout - sticky */} +
{(["description", "specs", "builders"] as const).map((tab) => ( ))}
- {/* Tab Content */} -
+ {/* Tab Content with custom modern scrollbar - FULL HEIGHT SCROLLABLE CONTAINER */} + diff --git a/src/components/projects/ProjectsPage.tsx b/src/components/projects/ProjectsPage.tsx index 47d1704..8aebddd 100644 --- a/src/components/projects/ProjectsPage.tsx +++ b/src/components/projects/ProjectsPage.tsx @@ -50,6 +50,22 @@ export default function ProjectsPage() { fetchProjects(); }, []); + useEffect(() => { + // When selectedProject changes (modal opens/closes) + if (selectedProject) { + // Prevent scrolling on the main page when modal is open + document.body.style.overflow = "hidden"; + } else { + // Re-enable scrolling when modal is closed + document.body.style.overflow = ""; + } + + // Cleanup function to ensure scrolling is re-enabled if component unmounts + return () => { + document.body.style.overflow = ""; + }; + }, [selectedProject]); + return (
{/* Applied noise background for consistency */} @@ -123,7 +139,7 @@ export default function ProjectsPage() { {project.Title}
From cdc9f20cfeeef05158dcd4c88c5f2fe5b9a827f4 Mon Sep 17 00:00:00 2001 From: Claudio Sciotto Date: Tue, 25 Mar 2025 16:13:20 -0400 Subject: [PATCH 03/15] Updated Styling across the page Including * overall font * font colors in across several admin sites --- src/app/dashboard/page.tsx | 8 ++--- src/app/globals.css | 9 ++---- src/components/Buttons/BackButton.tsx | 4 +-- src/components/Navbar/Sidebar.tsx | 8 +++-- .../admin/events/EditEventsForm.tsx | 12 ++++---- src/components/admin/events/Event.tsx | 12 ++++---- src/components/admin/events/EventForm.tsx | 19 ++++++------ src/components/admin/projects/EditForm.tsx | 2 +- src/components/landing/Hero.tsx | 30 +++++++++++-------- src/components/projects/ProjectModal.tsx | 4 +-- 10 files changed, 54 insertions(+), 54 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 29056ca..d02db44 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -21,7 +21,7 @@ export default function Dashboard() { className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6" >

Events

- +

@@ -33,7 +33,7 @@ export default function Dashboard() { className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6" >

Projects

- +

@@ -45,7 +45,7 @@ export default function Dashboard() { className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6" >

Inventory

- +

@@ -57,7 +57,7 @@ export default function Dashboard() { className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6" >

Analytics

- +

diff --git a/src/app/globals.css b/src/app/globals.css index b57725b..e29e79b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16,7 +16,8 @@ textarea { } body { - font-family: "Space Grotesk", serif !important; + /* font-family: "Space Grotesk", serif !important; */ + font-family: "Space Mono", serif; background-color: #ffffff; overflow-x: hidden; } @@ -76,12 +77,6 @@ body { filter: blur(20px); } -/* monospace font - will update later */ - -.m { - font-family: "Space Mono", serif; -} - /* fade background of hero */ .hero-btn:hover { diff --git a/src/components/Buttons/BackButton.tsx b/src/components/Buttons/BackButton.tsx index a20c583..4dfc440 100644 --- a/src/components/Buttons/BackButton.tsx +++ b/src/components/Buttons/BackButton.tsx @@ -13,12 +13,12 @@ const BackButton: React.FC = () => { return ( ); }; diff --git a/src/components/Navbar/Sidebar.tsx b/src/components/Navbar/Sidebar.tsx index f314e2e..44635ca 100644 --- a/src/components/Navbar/Sidebar.tsx +++ b/src/components/Navbar/Sidebar.tsx @@ -10,6 +10,7 @@ import { ChevronLeft, Calendar, PackageOpen, + ChartLine, } from "lucide-react"; interface SidebarProps { @@ -30,8 +31,9 @@ const Sidebar: React.FC = ({ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Events", href: "/dashboard/events", icon: Calendar }, { name: "Projects", href: "/dashboard/projects", icon: FileText }, - { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen }, - { name: "Settings", href: "/dashboard/settings", icon: Settings }, + // { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen }, + // { name: "Settings", href: "/dashboard/settings", icon: Settings }, + { name: "Analytics", href: "/dashboard/analytics", icon: ChartLine }, ]; const isLinkActive = (href: string) => pathname === href; @@ -42,7 +44,7 @@ const Sidebar: React.FC = ({ {!isMobileMenuOpen && ( diff --git a/src/components/admin/events/EditEventsForm.tsx b/src/components/admin/events/EditEventsForm.tsx index 9c31b73..fd8abe6 100644 --- a/src/components/admin/events/EditEventsForm.tsx +++ b/src/components/admin/events/EditEventsForm.tsx @@ -10,11 +10,11 @@ import toast from "react-hot-toast"; import { LuLoader2, LuX } from "react-icons/lu"; import EventForm from "./EventForm"; -type EditEventFormProps = { - month: Date -} +type EditEventFormProps = { + month: Date; +}; -export default function EditEventsForm({month} : EditEventFormProps) { +export default function EditEventsForm({ month }: EditEventFormProps) { const { data: events, isLoading, isError, error } = useCachedEvents(month); const [selectedEvent, setSelectedEvent] = useState( null, @@ -85,7 +85,7 @@ export default function EditEventsForm({month} : EditEventFormProps) { if (isLoading) { return ( -

+
@@ -150,7 +150,7 @@ export default function EditEventsForm({month} : EditEventFormProps) { )} {showEditForm && (
-
+

Edit Event

= ({ event, onDeleteClick, onEditClick }) => { const { date, time } = formatTimestampToDateTime(event.time); return ( -
+
-

{event.title}

-

{date}

-

{time}

+

{event.title}

+

{date}

+

{time}

diff --git a/src/components/admin/projects/EditForm.tsx b/src/components/admin/projects/EditForm.tsx index a35fb5f..91e3b83 100644 --- a/src/components/admin/projects/EditForm.tsx +++ b/src/components/admin/projects/EditForm.tsx @@ -206,7 +206,7 @@ export default function EditForm() {
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx index 6ce4c17..175c4ef 100644 --- a/src/components/landing/Hero.tsx +++ b/src/components/landing/Hero.tsx @@ -11,7 +11,7 @@ export default function Hero() { const [contentVisible, setContentVisible] = useState(false); const discordCount = useDiscordCount(); return ( -
+
Lights Background
-
+
- + )} @@ -129,13 +133,13 @@ const HeroImages: React.FC = ({ contentVisible }) => { {contentVisible && ( -
+
= ({ contentVisible }) => { transition={{ duration: 0.5, delay: 0.3 }} />
-
+
= ({ contentVisible }) => { transition={{ duration: 0.5, delay: 0.4 }} />
-
+
= ({ contentVisible }) => { {contentVisible && ( {/* Title and info at the top */} -
+

{project.Title}

@@ -139,7 +139,7 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) { {/* Right side - Only tabs and their content - NOW SCROLLABLE */}
{/* Tabs with fixed mobile layout - sticky */} -
+
{(["description", "specs", "builders"] as const).map((tab) => (

-
    - {listItems.map((info) => ( - + + {/* Desktop Main Lines - Only show on desktop */} + {isDesktop ? ( + <> + + + + + {/* Main line decorators - Desktop only */} + + + + + + + {/* Blue decorative lines Group1 - Desktop only */} + + + + + {/* Blue decorative lines Group2 - Desktop only */} + + + + {/* Blue decorative lines Group3 - Desktop only */} + + + + + ) : ( + // Mobile Main Line - Vertical line through the middle + <> + + + + + {/* Mobile Main Line decorations */} + + + + )} + +
      + {listItems.map((info, index) => ( + ))}
@@ -67,25 +255,48 @@ const About: React.FC = () => { interface AboutItemProps { info: ListItem; + index: number; } -const AboutItem: React.FC = ({ info }) => { +const AboutItem: React.FC = ({ info, index }) => { + const isEven = index % 2 === 0; return ( -
  • -
    -

    - {info.title} -

    -

    - {info.desc} -

    -
    +
  • + {isEven ? ( + <> +
    +

    + {info.title} +

    +

    + {info.desc} +

    +
    -
    -
    - {info.children} -
    -
    +
    +
    + {info.children} +
    +
    + + ) : ( + <> +
    +
    + {info.children} +
    +
    + +
    +

    + {info.title} +

    +

    + {info.desc} +

    +
    + + )}
    • ); }; From 906c65fd816ca66c75a9df52e53dfeb2c22aaa13 Mon Sep 17 00:00:00 2001 From: Claudio Sciotto Date: Wed, 26 Mar 2025 15:13:52 -0400 Subject: [PATCH 06/15] fixed overflow in tube.png image --- src/components/landing/About.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/landing/About.tsx b/src/components/landing/About.tsx index a20e2ec..8fed833 100644 --- a/src/components/landing/About.tsx +++ b/src/components/landing/About.tsx @@ -50,7 +50,8 @@ const About: React.FC = () => { }, []); return ( -
    + // DO OVER FLOW CHANGE HERE +
    Date: Wed, 26 Mar 2025 17:43:49 -0400 Subject: [PATCH 07/15] feat: implemented events views --- src/app/events/page.tsx | 69 ++++++++++-- src/app/globals.css | 3 +- src/components/events/CalendarEvent.tsx | 93 --------------- .../{ => CalendarListView}/MonthlyEvent.tsx | 0 .../{ => CalendarListView}/MonthlyEvents.tsx | 0 .../{ => CalendarMonthView}/Calendar.tsx | 12 +- .../{ => CalendarMonthView}/CalendarDay.tsx | 8 +- .../{ => CalendarMonthView}/CalendarDays.tsx | 0 .../CalendarMonthView/CalendarEvent.tsx | 53 +++++++++ .../CalendarSkeleton.tsx | 0 .../MobileCalendarEvent.tsx | 2 +- .../CalendarWeekView/WeekViewCalendar.tsx | 63 +++++++++++ .../events/CalendarWeekView/WeekViewDay.tsx | 106 ++++++++++++++++++ .../events/CalendarWeekView/WeekViewEvent.tsx | 55 +++++++++ src/components/events/EventModal.tsx | 67 +++++++++++ src/hooks/useCalendarEvents.ts | 64 +++++++++++ src/hooks/useResponsiveDayCount.ts | 27 +++++ 17 files changed, 509 insertions(+), 113 deletions(-) delete mode 100644 src/components/events/CalendarEvent.tsx rename src/components/events/{ => CalendarListView}/MonthlyEvent.tsx (100%) rename src/components/events/{ => CalendarListView}/MonthlyEvents.tsx (100%) rename src/components/events/{ => CalendarMonthView}/Calendar.tsx (87%) rename src/components/events/{ => CalendarMonthView}/CalendarDay.tsx (88%) rename src/components/events/{ => CalendarMonthView}/CalendarDays.tsx (100%) create mode 100644 src/components/events/CalendarMonthView/CalendarEvent.tsx rename src/components/events/{ => CalendarMonthView}/CalendarSkeleton.tsx (100%) rename src/components/events/{ => CalendarMonthView}/MobileCalendarEvent.tsx (96%) create mode 100644 src/components/events/CalendarWeekView/WeekViewCalendar.tsx create mode 100644 src/components/events/CalendarWeekView/WeekViewDay.tsx create mode 100644 src/components/events/CalendarWeekView/WeekViewEvent.tsx create mode 100644 src/components/events/EventModal.tsx create mode 100644 src/hooks/useCalendarEvents.ts create mode 100644 src/hooks/useResponsiveDayCount.ts diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx index e743475..66540a7 100644 --- a/src/app/events/page.tsx +++ b/src/app/events/page.tsx @@ -1,19 +1,74 @@ "use client"; -import Calendar from "@/components/events/Calendar"; -import MonthlyEvents from "@/components/events/MonthlyEvents"; +import Calendar from "@/components/events/CalendarMonthView/Calendar"; +import FiveDayCalendar from "@/components/events/CalendarWeekView/WeekViewCalendar"; +import MonthlyEvents from "@/components/events/CalendarListView/MonthlyEvents"; +import { FaRegCalendarAlt, FaList } from "react-icons/fa"; import Footer from "@/components/Footer"; +import { Clock, Calendar as CalendarIcon, List } from "lucide-react"; +import { useState } from "react"; export default function Events() { + const [calendarView, setCalendarView] = useState<"month" | "day" | "list">( + "month", + ); + return ( <>
    -
    -
    - - +
    +

    Events

    +

    + Discover everything you need to know about upcoming{" "} + club events and{" "} + exclusive opportunities. +

    +

    Views:

    + + {/* buttons to change view */} +
    + + + +
    + {/* end buttons */} + + {/* Views */} + {calendarView === "day" && } + {calendarView === "month" && } + {calendarView === "list" && } +
    -