From 4f5f39a0a2aae28978c2a9781a7620f435dddc2b Mon Sep 17 00:00:00 2001 From: Colin Wu <45516888+CollinWoo@users.noreply.github.com> Date: Tue, 19 Mar 2024 16:28:51 -0400 Subject: [PATCH 1/4] implement smooth scrolling partially --- src/components/Events.tsx | 2 +- src/components/NavBar.tsx | 6 +++--- src/components/NavBarButton.tsx | 11 ++++++----- src/components/SponsorsList.tsx | 6 +++--- src/index.css | 1 + src/pages/faq.tsx | 2 +- src/pages/home.tsx | 4 ++-- src/pages/sponsors.tsx | 11 ++++++++--- 8 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/components/Events.tsx b/src/components/Events.tsx index 30f3f85..eff65c4 100644 --- a/src/components/Events.tsx +++ b/src/components/Events.tsx @@ -12,7 +12,7 @@ export default function Events() { // const cardStyle = isMobile; const typographyStyle = isMobile ? { mt: 3 } : {}; return ( - + - - - + + + - - {props.text} - + + {props.text} + + ); } diff --git a/src/components/SponsorsList.tsx b/src/components/SponsorsList.tsx index 2865802..0ae19d8 100644 --- a/src/components/SponsorsList.tsx +++ b/src/components/SponsorsList.tsx @@ -14,9 +14,9 @@ export default function SponsorsList({ numColumns = 3 }: SponsorsListProps) { display: 'grid', gridTemplateColumns: `repeat(${numColumns}, 1fr)`, gridTemplateRows: 'auto', - justifyItems: 'center', - alignItems: 'center', - gridRowGap: 32, + justifyItems: 'center', + alignItems: 'center', + gridRowGap: 32, }}> {sponsorArray.map((sponsor: SponsorsMemberProps, index: number) => ( diff --git a/src/index.css b/src/index.css index 99b8fdc..2dca59d 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,7 @@ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; + scroll-behavior: smooth; color-scheme: light dark; /* color: rgba(255, 255, 255, 0.87); */ diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx index aaa1c05..321beaf 100644 --- a/src/pages/faq.tsx +++ b/src/pages/faq.tsx @@ -107,7 +107,7 @@ function FAQAccordion({ question, answer }: FAQAccordionPropTypes) { function FAQ() { return ( - + - + - + diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx index 44e63e9..b086be3 100644 --- a/src/pages/sponsors.tsx +++ b/src/pages/sponsors.tsx @@ -1,7 +1,7 @@ -import { Typography, Box, Link } from "@mui/material"; -import SponsorsList from "../components/SponsorsList"; import "@fontsource/inter"; import "@fontsource/museomoderno"; +import { Box, Link, Typography } from "@mui/material"; +import SponsorsList from "../components/SponsorsList"; export default function SponsorsPage() { const rainbowColors = [ @@ -17,6 +17,7 @@ export default function SponsorsPage() { return ( - Email us at bigredhacks@cornell.edu! + Email us at{" "} + + bigredhacks@cornell.edu + + ! ); From 9642c5f03c1de6b4106f990004d4848ce65fc268 Mon Sep 17 00:00:00 2001 From: Colin Wu <45516888+CollinWoo@users.noreply.github.com> Date: Tue, 19 Mar 2024 16:48:05 -0400 Subject: [PATCH 2/4] implement smooth scrolling correctly --- package.json | 4 +++- src/App.tsx | 6 ------ src/components/NavBar.tsx | 6 +++--- src/components/NavBarButton.tsx | 7 ++++--- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 9b67c17..4bcfc5f 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "@fontsource/museomoderno": "^5.0.18", "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.7", + "@types/react-router-hash-link": "^2.4.9", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.0" + "react-router-dom": "^6.22.0", + "react-router-hash-link": "^2.4.3" }, "devDependencies": { "@types/react": "^18.2.43", diff --git a/src/App.tsx b/src/App.tsx index 50938c6..3050ed7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,10 +5,7 @@ import { TopBorder } from "./components/Borders"; import Footer from "./components/Footer"; import NavBar from "./components/NavBar"; import ApplyPage from "./pages/apply"; -import EventsPage from "./pages/events"; -import FAQPage from "./pages/faq"; import HomePage from "./pages/home"; -import SponsorsPage from "./pages/sponsors"; import TeamsPage from "./pages/teams"; function App() { @@ -19,9 +16,6 @@ function App() { } /> } /> - } /> - } /> - } /> } /> diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 97eab72..a0f7816 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -25,9 +25,9 @@ export default function NavBar() { }} > - - - + + + - {props.text} - + ); } From e81de970e53a1b2c6d9f4f5767d1ceb124155e3e Mon Sep 17 00:00:00 2001 From: Colin Wu <45516888+CollinWoo@users.noreply.github.com> Date: Sat, 23 Mar 2024 16:08:21 -0400 Subject: [PATCH 3/4] add drop shadows and reformat images on teams page --- src/components/TeamsDropdown.tsx | 14 ++++++++++---- src/components/TeamsMember.tsx | 18 ++++++++++-------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/TeamsDropdown.tsx b/src/components/TeamsDropdown.tsx index 4bd638a..98c4160 100644 --- a/src/components/TeamsDropdown.tsx +++ b/src/components/TeamsDropdown.tsx @@ -1,9 +1,9 @@ import { Box, Button, Typography } from "@mui/material"; -import InfoCard, { InfoCardProps, BorderSpec } from "./InfoCard"; -import TeamMemberList from "../components/TeamMemberList.tsx"; import { useState } from "react"; +import TeamMemberList from "../components/TeamMemberList.tsx"; +import InfoCard, { BorderSpec, InfoCardProps } from "./InfoCard"; -import "./TeamMemberList.css" +import "./TeamMemberList.css"; export interface TeamsDropdownProps extends InfoCardProps { imgSrc: string; @@ -33,7 +33,13 @@ export default function TeamsDropdown(props: TeamsDropdownProps) { > {/* TODO: Mobile responsiveness is wack */} - +