From d969e6fac07658ae868f5411fb3843ef400828c5 Mon Sep 17 00:00:00 2001 From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:24:03 -0800 Subject: [PATCH 1/6] feat: update companies styling --- public/images/icons/close-icon.svg | 15 +- src/app/about/About.scss | 162 ++++++---- src/app/about/page.tsx | 41 +-- src/app/register/Register.scss | 2 +- src/app/register/page.tsx | 7 +- src/app/styles/global.scss | 3 + src/components/About/Agenda/Agenda.scss | 1 - src/components/About/Agenda/Agenda.tsx | 12 +- src/components/About/Companies/Companies.scss | 32 +- src/components/About/Companies/Companies.tsx | 294 +----------------- .../Companies/CompaniesSVG/CompaniesSVG.scss | 146 +++++++++ .../Companies/CompaniesSVG/CompaniesSVG.tsx | 155 +++++++++ .../Companies/CompanyModal/CompanyModal.scss | 136 +++++--- .../Companies/CompanyModal/CompanyModal.tsx | 97 +++--- .../CompanyPolaroid/CompanyPolaroid.scss | 0 .../CompanyPolaroid/CompanyPolaroid.tsx | 50 +++ .../About/Companies/MascotTopFolder.tsx | 54 ++++ src/components/About/Companies/constants.ts | 99 +++--- src/components/About/FAQ/FAQ.scss | 13 + src/components/About/FAQ/FAQ.tsx | 5 +- .../About/Opportunities/Opportunities.tsx | 4 - src/components/Navbar/Navbar.scss | 10 +- 22 files changed, 797 insertions(+), 541 deletions(-) create mode 100644 src/components/About/Companies/CompaniesSVG/CompaniesSVG.scss create mode 100644 src/components/About/Companies/CompaniesSVG/CompaniesSVG.tsx create mode 100644 src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.scss create mode 100644 src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.tsx create mode 100644 src/components/About/Companies/MascotTopFolder.tsx diff --git a/public/images/icons/close-icon.svg b/public/images/icons/close-icon.svg index 07f13b9..0dbdb39 100644 --- a/public/images/icons/close-icon.svg +++ b/public/images/icons/close-icon.svg @@ -1,5 +1,12 @@ - - - - + + + + + + + + + + + diff --git a/src/app/about/About.scss b/src/app/about/About.scss index 4d4d798..83154c6 100644 --- a/src/app/about/About.scss +++ b/src/app/about/About.scss @@ -1,92 +1,133 @@ -@media only screen and (min-width: 768px) { - .about-container { - max-width: fit-content; - margin-left: auto; - margin-right: auto; - } -} - -.about-container { +#about-container { margin-top: var(--nav-height); padding-inline: var(--main-padding); - display: grid; - gap: 1rem; + display: flex; + flex-direction: column; + gap: 2.5rem; + overflow-x: hidden; + position: relative; - h2 { + h1 { font-style: italic; - font-size: 1.5rem; - line-height: 1.2; - - @media (min-width: 320px) { - font-size: 2rem; - } - - @media (min-width: 400px) { - max-width: 80%; - } + font-size: 4rem; + margin-bottom: 2rem; @media (min-width: 580px) { - max-width: 65%; + font-size: 5rem; } + } + h2 { + font-size: 2rem; + font-style: italic; + margin-bottom: 2rem; @media (min-width: $tablet-breakpoint) { font-size: 4rem; } } .about-section { - p { - margin-top: 2rem; + @media (min-width: $desktop-breakpoint) { + max-width: 780px; + margin-inline: auto; } - @media only screen and (max-width: 469px) { - .about-images { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + #about-description { + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + + h3 { + font-size: 1.5rem; + font-weight: 600; + font-style: italic; + line-height: 1.2; } - } - - @media only screen and (max-width: 768px) { - .about-images { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - img { - width: 200px; - height: auto; + p { + @media (min-width: $tablet-breakpoint) { + font-size: 1.5rem; } } + + #about-description-note { + margin-top: 1rem; + } } - .about-images { + #about-images { position: relative; - display: flex; - justify-content: space-between; - gap: 1.5rem; - padding-top: 5rem; + margin-top: 3rem; + + @media (min-width: $tablet-breakpoint) { + margin-top: 4rem; + margin-bottom: 2rem; + } + + @media (min-width: $desktop-breakpoint) { + position: static; + } img { position: relative; - width: 400px; + min-width: 200px; + width: 50%; + max-width: 450px; height: auto; border: 2px solid white; transform-origin: center center; } - .image1 { - transform: rotate(-15deg) translateX(-100px); - } - - .image2 { - transform: rotate(1deg) translateX(-45px) translateY(-5px); - } - - .image3 { - transform: rotate(10deg) translateX(20px) translateY(50px); + #about-image { + &-1 { + left: 0; + transform: translate(calc(-70% + 5vw), 10%) rotate(-15deg); + + @media (min-width: $desktop-breakpoint) { + position: absolute; + top: 0; + left: 0; + transform: translate(-30%, 80%) rotate(-15deg); + } + } + &-2 { + position: absolute; + right: 0; + top: 3rem; + transform: translateX(calc(40% - 10vw)) translateY(-10%); + rotate: 9deg; + + @media (min-width: 580px) { + transform: translateX(calc(20% - 10vw)) translateY(30%); + } + + @media (min-width: $tablet-breakpoint) { + transform: translateX(calc(40% - 10vw)) translateY(30%); + } + + @media (min-width: $desktop-breakpoint) { + transform: translate(calc(30%), 120%); + } + } + &-3 { + position: absolute; + right: 0; + top: 0; + transform: translateX(calc(75% - 10vw)) translateY(-20%); + rotate: -3deg; + + @media (min-width: 580px) { + transform: translateX(calc(50% - 10vw)) translateY(0%); + } + @media (min-width: $tablet-breakpoint) { + rotate: 3deg; + transform: translateX(calc(70% - 10vw)) translateY(-20%); + } + @media (min-width: $desktop-breakpoint) { + transform: translate(calc(50%), 65%); + } + } } } } @@ -94,9 +135,4 @@ section { padding-block: 2rem; } - - .info, - .section-title { - margin-bottom: 2rem; - } } diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index cffb166..45bf67e 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -14,33 +14,38 @@ import Stride3 from '@/../public/images/past-photos/stride-3.webp'; export default function About() { return ( -
+
-

About

-

Learn, Connect, and Grow at Stride!

-

- Stride is a uniquely design-forward career fair connecting designers - with company representatives. Students get the opportunity to showcase - their work and experience, so we recommend that you bring a physical - copy of your resume! -

-

Note: There will be a $7 registration fee

-
+

About

+
+

Learn, Connect, and Grow at Stride!

+

+ Stride is a uniquely design-forward career fair connecting designers + with company representatives. Students get the opportunity to + showcase their work and experience, so we recommend that you bring a + physical copy of your resume! +

+

+ Note: There will be a $5 registration fee. Late registration will be + a $7 fee. +

+
+
Students at career fair speaking with Apple employee who worked on Apple Vision Pro - Two students sitting at table showing career fair postcard while smiling Multiple Google employees sitting on stage giving a talk + Two students sitting at table showing career fair postcard while smiling
diff --git a/src/app/register/Register.scss b/src/app/register/Register.scss index a03c7ab..c3d5794 100644 --- a/src/app/register/Register.scss +++ b/src/app/register/Register.scss @@ -164,7 +164,7 @@ } } -.react-aria-Modal { +.register-modal { background-color: black; border-radius: 32px; width: max(35rem, 55%); diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index e8e2fb9..97a5d4a 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -14,7 +14,12 @@ export default function RegisterPage() { return (
- + {({ close }) => (
diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss index f9c2f3f..716a4ff 100644 --- a/src/app/styles/global.scss +++ b/src/app/styles/global.scss @@ -50,6 +50,7 @@ button, input, label { line-height: 100%; + font-family: $p-font; } h1, @@ -77,6 +78,8 @@ h3 { p { font-family: $p-font; font-size: $p-size; + font-weight: 400; + line-height: 1.2; } a:not([class]) { diff --git a/src/components/About/Agenda/Agenda.scss b/src/components/About/Agenda/Agenda.scss index 91740db..483c718 100644 --- a/src/components/About/Agenda/Agenda.scss +++ b/src/components/About/Agenda/Agenda.scss @@ -11,7 +11,6 @@ @media only screen and (max-width: 468px) { .mobile-agenda-card { display: block; - margin-left: 1rem; } .mobile-title { diff --git a/src/components/About/Agenda/Agenda.tsx b/src/components/About/Agenda/Agenda.tsx index 8ac9856..a069d0b 100644 --- a/src/components/About/Agenda/Agenda.tsx +++ b/src/components/About/Agenda/Agenda.tsx @@ -42,8 +42,8 @@ export default function Agenda() { height="547" > @@ -54,8 +54,8 @@ export default function Agenda() { fill="white" /> @@ -115,8 +115,8 @@ export default function Agenda() { className="mobile-agenda-card" > (null); - const handleButtonClick = (company: string | null) => { - setSelectedButton(company); + // const handleButtonClick = (company: string | null) => { + // setSelectedButton(company); - if (window.innerWidth <= 468) { - setIsModalOpen(true); - } + // if (window.innerWidth <= 468) { + // setIsModalOpen(true); + // } - const foundCompany = companies.find(obj => obj.company === company); + // const foundCompany = companies.find(obj => obj.company === company); - if (foundCompany) { - setCompanyData(foundCompany); - } else { - console.error(`Company with name "${company}" not found.`); - } - }; + // if (foundCompany) { + // setCompanyData(foundCompany); + // } else { + // console.error(`Company with name "${company}" not found.`); + // } + // }; const closeModal = () => { setIsModalOpen(false); @@ -37,270 +38,9 @@ export default function Companies() { }; return ( -
-

Companies and Organizations

- - - - - - - - - - - -
-

Recruiting

-
- - - {companies - .filter(obj => obj.org_type === 'Recruiting') - .map((obj, index) => ( - -
- -
- - ))} - - -
-

Networking Only

-
- - - {companies - .filter(obj => obj.org_type === 'Networking Only') - .map((obj, index) => ( - -
- -
- - ))} - - - -
-

{companyData &&

{companyData.company}

} -

- {companyData &&

{companyData.description}

} -

-
- - - - - - - - - - - - - - - - - - - {companyData?.companyImage && ( - -
- {companyData?.company -
- - )} - - {isModalOpen && ( - - - closeModal()}> - {companyData && ( -
-

{companyData &&

{companyData.company}

} -

- {companyData &&

{companyData.description}

} -

-
- )} - - - - - - - - {companyData?.companyImage && ( - -
- {companyData?.company -
- - )} - - )} - -
+
+

Companies & Organizations

+ +
); } diff --git a/src/components/About/Companies/CompaniesSVG/CompaniesSVG.scss b/src/components/About/Companies/CompaniesSVG/CompaniesSVG.scss new file mode 100644 index 0000000..1470ede --- /dev/null +++ b/src/components/About/Companies/CompaniesSVG/CompaniesSVG.scss @@ -0,0 +1,146 @@ +#companies-svg-container { + position: relative; + width: 100%; + height: 100%; + + @media (min-width: 480px) { + max-width: 450px; + } + + @media (min-width: $tablet-breakpoint) { + max-width: none; + width: 100%; + } + + margin-inline: auto; + + #about-companies-svg { + overflow: visible; + + @media (min-width: $tablet-breakpoint) { + max-width: 1000px; + margin-inline: auto; + } + #about-companies-content-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 1rem; + gap: 1.5rem; + + @media (min-width: $tablet-breakpoint) { + justify-content: flex-start; + padding-top: 1.5rem; + gap: 1rem; + } + + h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + + @media (min-width: $tablet-breakpoint) { + font-size: 0.8rem; + } + } + + .about-company-pill-container { + display: flex; + flex-wrap: wrap; + column-gap: 12px; + row-gap: 10px; + + @media (min-width: $tablet-breakpoint) { + column-gap: 6px; + row-gap: 5px; + } + + .about-company-pill { + cursor: pointer; + font-size: 1rem; + border-radius: 30px; + border: 2px solid $white; + background-color: transparent; + color: $white; + padding: 0.2rem 0.3rem; + transition: + color 0.15s, + background-color 0.15s, + border-color 0.15s; + + @media (min-width: $tablet-breakpoint) { + &.active { + background-color: $light-green; + border-color: $light-green; + color: black; + } + } + + &:is(:hover, .focus-visible) { + background-color: black; + border-color: $light-green; + color: $light-green; + } + + @media (min-width: $tablet-breakpoint) { + border: 1px solid $white; + font-size: 0.45rem; + } + } + } + + #about-company-info { + display: none; + @media (min-width: $tablet-breakpoint) { + display: block; + padding-block: 1rem; + padding-inline: 0.5rem; + height: 100%; + max-height: 100%; + border: 1px solid $white; + + h3 { + margin-bottom: 0.5rem; + } + + p { + font-size: 0.45rem; + } + } + } + } + } + + #about-companies-mascot { + position: absolute; + top: 0; + right: 30%; + transform: translateY(-53%); + width: 20%; + + @media (min-width: 400px) { + top: 38%; + right: 0; + transform: translateY(-40%); + rotate: 90deg; + } + } + + #company-logo-polaroid { + display: none; + @media (min-width: $tablet-breakpoint) { + display: block; + position: absolute; + width: 30%; + bottom: -10%; + right: 15%; + max-width: 300px; + + img { + padding: 2rem; + rotate: 4.5deg; + } + } + } +} diff --git a/src/components/About/Companies/CompaniesSVG/CompaniesSVG.tsx b/src/components/About/Companies/CompaniesSVG/CompaniesSVG.tsx new file mode 100644 index 0000000..30d1fa5 --- /dev/null +++ b/src/components/About/Companies/CompaniesSVG/CompaniesSVG.tsx @@ -0,0 +1,155 @@ +import { SVGProps, useState } from 'react'; +import './CompaniesSVG.scss'; +import Image from 'next/image'; +import { companies, CompaniesMap } from '../constants'; +import MascotTopFolder from '../MascotTopFolder'; +import CompanyModal from '../CompanyModal/CompanyModal'; +import CompanyPolaroid from '../CompanyPolaroid/CompanyPolaroid'; + +export default function CompaniesSVG(props: SVGProps) { + const [selectedCompany, setSelectedCompany] = useState( + 'The Art of Problem Solving' + ); + const selectedCompanyData = companies[selectedCompany]; + const [isModalOpen, setIsModalOpen] = useState(false); + + const handleButtonClick = (company: keyof CompaniesMap) => { + setSelectedCompany(company); + if (window.innerWidth <= 1024) { + setIsModalOpen(true); + } + }; + + return ( +
+ + + + + + + + + + + + + +
+
+

Recruiting

+
+ {Object.entries(companies) + .filter(([, company]) => company.org_type === 'Recruiting') + .map(([companyName, _company]) => ( + + ))} +
+
+
+

Networking Only

+
+ {Object.entries(companies) + .filter( + ([, company]) => company.org_type === 'Networking Only' + ) + .map(([companyName, _company]) => ( + + ))} +
+
+ +
+

{selectedCompany}

+

{selectedCompanyData?.description}

+
+
+ + + + + +
+ ); +} diff --git a/src/components/About/Companies/CompanyModal/CompanyModal.scss b/src/components/About/Companies/CompanyModal/CompanyModal.scss index afc161c..4a17413 100644 --- a/src/components/About/Companies/CompanyModal/CompanyModal.scss +++ b/src/components/About/Companies/CompanyModal/CompanyModal.scss @@ -1,57 +1,121 @@ -.modal-overlay { - display: none; +.react-aria-ModalOverlay { position: fixed; top: 0; left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; + width: 100vw; + height: 100vh; + background: rgba(0 0 0 / 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 99; - @media (max-width: 768px) { - display: flex; - align-items: center; - justify-content: center; + &[data-entering] { + animation: modal-fade 200ms; + } + + &[data-exiting] { + animation: modal-fade 150ms reverse ease-in; } } -.modal-content { - border: 4px solid white; +.company-modal { + --padding: 1rem; background-color: black; + padding: var(--padding); + padding-top: calc(2.5 * var(--padding)); + border: 1px solid $white; + width: max(35rem, 55%); + margin-inline: 1rem; + height: 65%; + max-height: 500px; position: relative; - padding: 10px; - border-radius: 8px; - width: 90%; - max-width: 500px; - max-height: 90vh; - overflow-y: auto; - animation: modal-fade-in 0.3s ease; - padding-bottom: 100px; -} + display: flex; + flex-direction: column; + place-items: center; + overflow-y: visible; + + @media (min-width: 350px) { + padding-top: calc(1.5 * var(--padding)); + --padding: 1.5rem; + } -.close-button { - position: absolute; - top: 10px; - right: 10px; - background: none; - border: none; - font-size: 24px; - cursor: pointer; - color: white; - padding: 5px 10px; + @media (min-width: 450px) { + max-height: 450px; + } - &:hover { - color: #333; + @media (min-width: 550px) { + max-height: 420px; + } + + h3 { + font-size: 1.5rem; + + @media (min-width: 380px) { + font-size: 2rem; + } + } + + p { + font-size: 0.875rem; + font-style: normal; + margin-top: 1rem; + + @media (min-width: 380px) { + font-size: 1rem; + } + } + + #company-modal-close-button { + position: absolute; + top: calc(var(--padding) / 2); + right: calc(var(--padding) / 2); + border: none; + background: none; + width: 35px; + } + + #company-logo-polaroid { + position: absolute; + width: 60%; + max-width: 200px; + bottom: -20%; + left: 0; + right: 0; + margin-inline: auto; + + img { + padding: 1.5rem; + rotate: 4.5deg; + } + } + + .react-aria-Dialog { + height: 100%; + width: 100%; + } + + &[data-entering] { + animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } } -@keyframes modal-fade-in { +@keyframes modal-fade { from { opacity: 0; - transform: translateY(20px); } + to { opacity: 1; - transform: translateY(0); + } +} + +@keyframes modal-zoom { + from { + transform: scale(0.8); + } + + to { + transform: scale(1); } } diff --git a/src/components/About/Companies/CompanyModal/CompanyModal.tsx b/src/components/About/Companies/CompanyModal/CompanyModal.tsx index cffaa3e..41fea7c 100644 --- a/src/components/About/Companies/CompanyModal/CompanyModal.tsx +++ b/src/components/About/Companies/CompanyModal/CompanyModal.tsx @@ -1,65 +1,50 @@ -import React, { useEffect, useRef } from 'react'; +import { Dialog, Modal } from 'react-aria-components'; import './CompanyModal.scss'; +import Image from 'next/image'; +import { Company } from '../constants'; +import CompanyPolaroid from '../CompanyPolaroid/CompanyPolaroid'; -interface ModalProps { +type CompanyModalProps = { isOpen: boolean; - onClose: () => void; - children: React.ReactNode; -} + setIsOpen: (isOpen: boolean) => void; + companyData: Company; +}; export default function CompanyModal({ isOpen, - onClose, - children -}: ModalProps) { - const modalRef = useRef(null); - - useEffect(() => { - const handleEscape = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - onClose(); - } - }; - - if (isOpen) { - document.addEventListener('keydown', handleEscape); - // Prevent scrolling on body when modal is open - document.body.style.overflow = 'hidden'; - } - - return () => { - document.removeEventListener('keydown', handleEscape); - document.body.style.overflow = 'unset'; - }; - }, [isOpen, onClose]); - - useEffect(() => { - if (isOpen && modalRef.current) { - modalRef.current.focus(); - } - }, [isOpen]); - - if (!isOpen) return null; - + setIsOpen, + companyData +}: CompanyModalProps) { return ( -
-
- - {children} -
-
+ + +
+

+ {companyData.name} +

{companyData.description}

+

+ +
+ + + ); } diff --git a/src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.scss b/src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.tsx b/src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.tsx new file mode 100644 index 0000000..5067b05 --- /dev/null +++ b/src/components/About/Companies/CompanyPolaroid/CompanyPolaroid.tsx @@ -0,0 +1,50 @@ +import Image from 'next/image'; +import { Company } from '../constants'; + +export default function CompanyPolaroid({ + companyData +}: { + companyData: Company; +}) { + return ( + + + + + + {`${companyData.name} + + + ); +} diff --git a/src/components/About/Companies/MascotTopFolder.tsx b/src/components/About/Companies/MascotTopFolder.tsx new file mode 100644 index 0000000..071b52c --- /dev/null +++ b/src/components/About/Companies/MascotTopFolder.tsx @@ -0,0 +1,54 @@ +import { SVGProps } from 'react'; + +export default function MascotTopFolder(props: SVGProps) { + return ( + + + + + + + + + + + + ); +} diff --git a/src/components/About/Companies/constants.ts b/src/components/About/Companies/constants.ts index 69bddf6..8bf4308 100644 --- a/src/components/About/Companies/constants.ts +++ b/src/components/About/Companies/constants.ts @@ -1,72 +1,83 @@ -export const companies = [ - { - company: 'UCSD Design Lab', - org_type: 'Recruiting', - companyImage: 'images/company-images/designlab.svg', - description: - 'The UC San Diego Design Lab works on major societal issues, such as large-scale education, automation, healthcare, and the ethical issues that are of ever-increasing importance. For the Design Lab, design is a way of thinking, addressing the core issues, always taking a systems point of view, emphasizing the role of people in the complex systems of the modern world.' - }, - { - company: 'Deloitte', - org_type: 'Networking Only', - companyImage: 'images/company-images/deloitte.svg', - description: - 'With more than 100,000 professionals, Deloitte provides audit and assurance, tax, consulting, and risk and financial advisory services to a broad cross-section of the largest corporations and governmental agencies.' - }, - { - company: 'The Art of Problem Solving', +export type Company = { + name: string; + org_type: string; + companyImage: string; + description: string; +}; + +export type CompaniesMap = { + [key: string]: Company; +}; + +export const companies: CompaniesMap = { + 'The Art of Problem Solving': { + name: 'The Art of Problem Solving', org_type: 'Recruiting', companyImage: 'images/company-images/aops.svg', description: 'Art of Problem Solving is an education technology company inspiring and training the next generation of great problem solvers. They help students develop problem-solving skills by offering resources in a variety of different formats, building a community where students can connect and collaborate with their peers.' }, - { - company: 'San Diego Zoo', - org_type: 'Networking Only', - companyImage: 'images/company-images/sdzoo.svg', - description: - 'San Diego Zoo is an international nonprofit conservation leader, committed to inspiring passion for nature and creating a world where all life thrives. Made up of two world-famous facilities, the San Diego Zoo and San Diego Zoo Safari Park— together they give millions of guests, in person and virtually, the opportunity to experience conservation in action.' - }, - { - company: 'CoNote', + CoNote: { + name: 'CoNote', org_type: 'Recruiting', companyImage: 'images/company-images/conote.svg', description: 'CoNote.ai is a start-up technology that helps researchers transcribe, analyze, and organize their data while collaborating with their team.' }, - { - company: 'UCSD Library', + 'UCSD Design Lab': { + name: 'UCSD Design Lab', + org_type: 'Recruiting', + companyImage: 'images/company-images/designlab.svg', + description: + 'The UC San Diego Design Lab works on major societal issues, such as large-scale education, automation, healthcare, and the ethical issues that are of ever-increasing importance. For the Design Lab, design is a way of thinking, addressing the core issues, always taking a systems point of view, emphasizing the role of people in the complex systems of the modern world.' + }, + 'UCSD Library': { + name: 'UCSD Library', org_type: 'Recruiting', companyImage: 'images/company-images/ucsdlibrary.svg', description: "The UC San Diego Library, one of the nation's top public academic libraries, plays a critical role in advancing the university's research, teaching, patient care, and public service missions. The Library provides the foundation of knowledge needed to advance cutting-edge discoveries in a wide range of disciplines--from healthcare to public policy to the arts. The Library provides access to more than 7 million items, including digital and print volumes and multimedia materials to meet the knowledge demands of scholars, students, and members of the public." }, - { - company: 'Notion', + 'UCSD ACM': { + name: 'UCSD ACM', + org_type: 'Recruiting', + companyImage: 'images/company-images/acm.svg', + description: + "ACM at UCSD is an inclusive community of students passionate about technology. As UCSD's largest members-first computing org, they offer workshops, socials, and projects through different communities including AI, Cyber, Hack, and Design." + }, + Google: { + name: 'Google', org_type: 'Networking Only', - companyImage: 'images/company-images/notion.svg', + companyImage: 'images/company-images/google.svg', description: - "Notion blends your everyday work tools into one. Product roadmap? Company wiki? Meeting notes? With Notion, they're all in one place, and totally customizable to meet the needs of any workflow. It's the all-in-one workspace for you, your team, and your whole company." + "Google is a global technology leader known for its search engine, online advertising, and diverse range of products. Beginning as an online search firm, it has expanded to include services such as Google Cloud, YouTube, and Android. Committed to innovation, Google's mission is to organize the world's information and make it universally accessible and useful." }, - { - company: 'UCSD ACM', - org_type: 'Recruiting', - companyImage: 'images/company-images/acm.svg', + Deloitte: { + name: 'Deloitte', + org_type: 'Networking Only', + companyImage: 'images/company-images/deloitte.svg', description: - 'ACM at UCSD is an inclusive community of students passionate about technology. As UCSD’s largest members-first computing org, they offer workshops, socials, and projects through different communities including AI, Cyber, Hack, and Design.' + 'With more than 100,000 professionals, Deloitte provides audit and assurance, tax, consulting, and risk and financial advisory services to a broad cross-section of the largest corporations and governmental agencies.' }, - { - company: 'Illumina', + Illumina: { + name: 'Illumina', org_type: 'Networking Only', companyImage: 'images/company-images/illumina.svg', description: 'Illumina is a leading developer, manufacturer, and marketer of life science tools and integrated systems dedicated to making genomics useful for all. Innovating at the intersection of technology, biology, and health, they provide sequencing innovations enabling researchers and clinicians to usher in the future of personalized medicine.' }, - { - company: 'Google', + Notion: { + name: 'Notion', org_type: 'Networking Only', - companyImage: 'images/company-images/google.svg', + companyImage: 'images/company-images/notion.svg', + description: + "Notion blends your everyday work tools into one. Product roadmap? Company wiki? Meeting notes? With Notion, they're all in one place, and totally customizable to meet the needs of any workflow. It's the all-in-one workspace for you, your team, and your whole company." + }, + 'San Diego Zoo': { + name: 'San Diego Zoo', + org_type: 'Networking Only', + companyImage: 'images/company-images/sdzoo.svg', description: - 'Google is a global technology leader known for its search engine, online advertising, and diverse range of products. Beginning as an online search firm, it has expanded to include services such as Google Cloud, YouTube, and Android. Committed to innovation, Google’s mission is to organize the world’s information and make it universally accessible and useful.' + 'San Diego Zoo is an international nonprofit conservation leader, committed to inspiring passion for nature and creating a world where all life thrives. Made up of two world-famous facilities, the San Diego Zoo and San Diego Zoo Safari Park— together they give millions of guests, in person and virtually, the opportunity to experience conservation in action.' } -]; +}; diff --git a/src/components/About/FAQ/FAQ.scss b/src/components/About/FAQ/FAQ.scss index 8605991..f8d1d0d 100644 --- a/src/components/About/FAQ/FAQ.scss +++ b/src/components/About/FAQ/FAQ.scss @@ -1,6 +1,19 @@ .faq-section { font-family: $p-font; + h2 { + font-style: italic; + font-size: 2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + + @media (min-width: $tablet-breakpoint) { + font-size: 4rem; + flex-direction: row; + } + } + .top-paper, .bottom-paper { position: relative; diff --git a/src/components/About/FAQ/FAQ.tsx b/src/components/About/FAQ/FAQ.tsx index d4c633e..e0fab4d 100644 --- a/src/components/About/FAQ/FAQ.tsx +++ b/src/components/About/FAQ/FAQ.tsx @@ -21,7 +21,10 @@ export default function FAQ() {
-

Frequently Asked Questions

+

+ Frequently + Asked Questions +

{FAQData.map((item, index) => ( diff --git a/src/components/About/Opportunities/Opportunities.tsx b/src/components/About/Opportunities/Opportunities.tsx index 8754c1c..94c99bd 100644 --- a/src/components/About/Opportunities/Opportunities.tsx +++ b/src/components/About/Opportunities/Opportunities.tsx @@ -4,10 +4,6 @@ export default function Opportunities() { return (

Opportunities

-

- Stride is a uniquely designed career fair aiming to connect aspiring - designers with company respresentatives -

Date: Wed, 6 Nov 2024 13:55:08 -0800 Subject: [PATCH 2/6] fix: update FAQ and register now section --- src/components/About/FAQ/FAQ.scss | 31 ++++++- src/components/About/FAQ/FAQ.tsx | 5 +- .../About/RegisterButton/RegisterButton.scss | 93 ++++++++++++------- .../About/RegisterButton/RegisterButton.tsx | 87 +++++++++-------- 4 files changed, 135 insertions(+), 81 deletions(-) diff --git a/src/components/About/FAQ/FAQ.scss b/src/components/About/FAQ/FAQ.scss index f8d1d0d..73ab154 100644 --- a/src/components/About/FAQ/FAQ.scss +++ b/src/components/About/FAQ/FAQ.scss @@ -1,17 +1,34 @@ .faq-section { + --paper-margins: 1rem; font-family: $p-font; + @media (min-width: 400px) { + --paper-margins: 1.5rem; + } + + @media (min-width: 580px) { + --paper-margins: 2rem; + } + + @media (min-width: $tablet-breakpoint) { + --paper-margins: 5rem; + } + h2 { font-style: italic; font-size: 2rem; - display: flex; - flex-direction: column; - gap: 0.5rem; + max-width: 20ch; + line-height: 1.2; @media (min-width: $tablet-breakpoint) { font-size: 4rem; flex-direction: row; } + + @media (min-width: $desktop-breakpoint) { + max-width: 780px; + margin-inline: auto; + } } .top-paper, @@ -27,14 +44,18 @@ } .top-paper { - margin-bottom: 1rem; + margin-bottom: var(--paper-margins); } .bottom-paper { - margin-top: 1rem; + margin-top: var(--paper-margins); } .AccordionRoot { + @media (min-width: $desktop-breakpoint) { + max-width: 780px; + margin-inline: auto; + } .AccordionItem { border-radius: 0; overflow: hidden; diff --git a/src/components/About/FAQ/FAQ.tsx b/src/components/About/FAQ/FAQ.tsx index e0fab4d..d4c633e 100644 --- a/src/components/About/FAQ/FAQ.tsx +++ b/src/components/About/FAQ/FAQ.tsx @@ -21,10 +21,7 @@ export default function FAQ() {
-

- Frequently - Asked Questions -

+

Frequently Asked Questions

{FAQData.map((item, index) => ( diff --git a/src/components/About/RegisterButton/RegisterButton.scss b/src/components/About/RegisterButton/RegisterButton.scss index 9da02a1..99ca2c2 100644 --- a/src/components/About/RegisterButton/RegisterButton.scss +++ b/src/components/About/RegisterButton/RegisterButton.scss @@ -1,47 +1,76 @@ -.register-section { - padding-block: 10rem; - max-width: fit-content; - margin-left: auto; - margin-right: auto; -} +#register-section { + margin-inline: auto; + display: flex; + flex-direction: column; + justify-content: center; -#about-register-button { - border: none; - background-color: transparent; - cursor: pointer; + max-width: 780px; - svg { - fill: none; + #register-button-link { + display: grid; + place-items: center; - &:hover, - &:focus { - #about-register-button-border { - stroke: #6ee7b7; - } + #about-register-button { + margin-inline: auto; + border: none; + background-color: transparent; + cursor: pointer; + width: 90%; - #about-register-button-text { - fill: #6ee7b7; + @media (min-width: 400px) { + max-width: 350px; } - } - &:active { - fill: #6ee7b7; + @media (min-width: $tablet-breakpoint) { + margin-top: 1rem; - #about-register-button-border { - stroke: #6ee7b7; + max-width: 500px; } - #about-register-button-text { - fill: black; + #register-button-container { + overflow: visible; + color: white; + text-transform: uppercase; + rotate: -7.33deg; + + h2 { + font-size: 1.8rem; + } } - } - #about-register-button-border { - stroke: white; - } + svg { + fill: none; - #about-register-button-text { - fill: white; + &:is(:hover, :focus) { + #about-register-button-border { + stroke: #6ee7b7; + } + + #register-button-container { + h2 { + color: #6ee7b7; + } + } + } + + &:active { + fill: #6ee7b7; + + #about-register-button-border { + stroke: #6ee7b7; + } + + #register-button-container { + h2 { + color: black; + } + } + } + + #about-register-button-border { + stroke: white; + } + } } } } diff --git a/src/components/About/RegisterButton/RegisterButton.tsx b/src/components/About/RegisterButton/RegisterButton.tsx index 5a61e33..7313300 100644 --- a/src/components/About/RegisterButton/RegisterButton.tsx +++ b/src/components/About/RegisterButton/RegisterButton.tsx @@ -3,68 +3,75 @@ import './RegisterButton.scss'; export default function RegisterButton() { return ( - - - + + + +
); } From a4fec9c9918a41962e965ef205e1e2fea0dd9f69 Mon Sep 17 00:00:00 2001 From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:25:55 -0800 Subject: [PATCH 3/6] fix: fix build errors and adjust flashlight control styling --- .github/workflows/ci.yml | 23 ++- src/app/page.tsx | 2 +- .../About/RegisterButton/RegisterButton.tsx | 2 +- src/components/Flashlight/Flashlight.scss | 4 +- .../flashlight_controls/Controls.scss | 152 +++++++++++++++++ .../{controls.tsx => Controls.tsx} | 4 +- .../flashlight_controls/controls.scss | 153 ------------------ 7 files changed, 178 insertions(+), 162 deletions(-) create mode 100644 src/components/flashlight_controls/Controls.scss rename src/components/flashlight_controls/{controls.tsx => Controls.tsx} (97%) delete mode 100644 src/components/flashlight_controls/controls.scss diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a4715ac..094e286 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,9 +1,9 @@ -name: Linting and Styling Check +name: CI Checks on: [push, pull_request] jobs: - lint: + quality: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -22,5 +22,22 @@ jobs: - name: Install Dependencies run: pnpm install - - name: Run Linting and Styling Check + - name: Run Linting/Style Check run: pnpm lint-check + + - name: Type Check + run: pnpm type-check + + - name: Build Check + run: pnpm build + + - name: Cache build output + uses: actions/cache@v3 + with: + path: | + .next + dist + build + key: ${{ runner.os }}-build-${{ github.sha }} + restore-keys: | + ${{ runner.os }}-build- diff --git a/src/app/page.tsx b/src/app/page.tsx index 94149a3..499a48e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -438,7 +438,7 @@ export default function Page() {
{folderOpenned && ( - + )}

Register Now

- + +
Date: Wed, 6 Nov 2024 14:28:09 -0800 Subject: [PATCH 4/6] fix: fix import name error --- src/app/page.tsx | 2 +- .../{flashlight_controls => FlashlightControls}/Controls.scss | 0 .../{flashlight_controls => FlashlightControls}/Controls.tsx | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/components/{flashlight_controls => FlashlightControls}/Controls.scss (100%) rename src/components/{flashlight_controls => FlashlightControls}/Controls.tsx (100%) diff --git a/src/app/page.tsx b/src/app/page.tsx index 499a48e..5a2a6ac 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,7 @@ import { useGSAP } from '@gsap/react'; import '@/app/Home.scss'; import Image from 'next/image'; import Flashlight from '@/components/Flashlight/Flashlight'; -import Controls from '@/components/flashlight_controls/controls'; +import Controls from '@/components/FlashlightControls/Controls'; gsap.registerPlugin(useGSAP); diff --git a/src/components/flashlight_controls/Controls.scss b/src/components/FlashlightControls/Controls.scss similarity index 100% rename from src/components/flashlight_controls/Controls.scss rename to src/components/FlashlightControls/Controls.scss diff --git a/src/components/flashlight_controls/Controls.tsx b/src/components/FlashlightControls/Controls.tsx similarity index 100% rename from src/components/flashlight_controls/Controls.tsx rename to src/components/FlashlightControls/Controls.tsx From ad5194ded43cf1b105afede027c7753867ea5b21 Mon Sep 17 00:00:00 2001 From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:32:25 -0800 Subject: [PATCH 5/6] fix: add type check command to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index e6176d1..34c7198 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint": "next lint", "lint-fix": "next lint --fix && prettier --write .", "lint-check": "next lint && prettier --check .", + "type-check": "tsc --noEmit", "prepare": "husky" }, "dependencies": { From ea2dc55f492a99930bb7a5ed05cc8e98d848d33b Mon Sep 17 00:00:00 2001 From: Sahil Gathe Date: Wed, 6 Nov 2024 15:01:27 -0800 Subject: [PATCH 6/6] fixed mouse hotspot --- src/components/FlashlightControls/Controls.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FlashlightControls/Controls.scss b/src/components/FlashlightControls/Controls.scss index dcfa903..bd34bd8 100644 --- a/src/components/FlashlightControls/Controls.scss +++ b/src/components/FlashlightControls/Controls.scss @@ -55,7 +55,9 @@ display: flex; align-items: center; justify-content: center; - cursor: url('../Icons/Cursor-hover.svg'), auto; + cursor: + url('../Icons/Cursor-hover.svg') 16 4, + auto; } .slider-output { @@ -66,7 +68,9 @@ width: 30%; align-content: center; height: 50%; - cursor: url('../Icons/Cursor-hover.svg'), auto; + cursor: + url('../Icons/Cursor-hover.svg') 16 4, + auto; } /* =============== Switch =============== */