Merge pull request #818 from UofT-Frosh-Orientation/prod

update beta

client/src/App.scss

@@ -198,3 +198,7 @@ a:hover {
     display: none;
   }
 }
+
+.proxima-nova-text {
+  font-family: 'Proxima Nova', sans-serif;
+}

client/src/components/Navbar/Navbar.scss

@@ -29,7 +29,7 @@ li {
   position: fixed;
   background-color: var(--navbar-bg);
   width: 100%;
-  height: 60px;
+  height: 50px;
 
   filter: drop-shadow(0px -2px 5px rgba(0, 0, 0, 0.25));
 }

client/src/components/Navbar/NavbarStorybook.jsx

@@ -9,7 +9,7 @@ import MessageIconPurple from '../../assets/navbar/message-solid-purple.svg';
 import HomeIconGrey from '../../assets/navbar/house-solid-grey.svg';
 import AboutIconGrey from '../../assets/navbar/circle-info-solid-grey.svg';
 import MessageIconGrey from '../../assets/navbar/message-solid-grey.svg';
-import MainFroshLogo from '../../assets/logo/frosh-main-logo.svg';
+import MainFroshLogo from '../../assets/logo/main-logo.png';
 
 const pages = {
   main: [

client/src/components/footer/FooterStorybook.jsx

@@ -52,7 +52,7 @@ const FooterStorybook = () => {
           })}
           {/* <img className="svg-icons" alt="instagram" src={InstagramLogo}></img> */}
         </div>
-        <div className="footer-message">Made with 💜 by the F!rosh Week 2T3 Tech Team</div>
+        <div className="footer-message">Made with 💜 by the F!rosh Week 2T4 Tech Team</div>
       </div>
     </div>
   );

client/src/components/profile/ProfilePageResources/ProfilePageResources.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 export const ProfilePageResources = ({ froshObject }) => {
   return (
     <div className="profile-page-resources profile-page-side-section">
-      <h2>Resources</h2>
+      <h2>RESOURCES</h2>
       {resources.map((resource, index) => {
         return (
           <a

client/src/components/profile/leedur/PermissionDashboardLinks/ProfilePageLeaderPermissionDashboardLinks.jsx

@@ -19,7 +19,7 @@ export const ProfilePageLeaderPermissionDashboardLinks = () => {
   const dropdowns = [
     {
       label: 'data',
-      title: 'Data',
+      title: 'DATA',
       state: openDataDropdown,
       setState: setOpenDataDropdown,
       icon: DataDashboardIcon,
@@ -46,7 +46,7 @@ export const ProfilePageLeaderPermissionDashboardLinks = () => {
     },
     {
       label: 'outreach',
-      title: 'Outreach',
+      title: 'OUTREACH',
       state: openOutreachDropdown,
       setState: setOpenOutreachDropdown,
       icon: OutreachDashboardIcon,
@@ -73,13 +73,13 @@ export const ProfilePageLeaderPermissionDashboardLinks = () => {
     },
     {
       label: 'scunt',
-      title: 'Scunt',
+      title: 'Skule™ Hunt',
       state: openScuntDropdown,
       setState: setOpenScuntDropdown,
       icon: ScuntDashboardIcon,
       items: [
         {
-          label: 'Scunt Judge Panel',
+          label: 'Skule™ Hunt Judge Panel',
           anyRegisterScope: false,
           link: '/scunt-judge-form',
           authScopes: [
@@ -96,7 +96,7 @@ export const ProfilePageLeaderPermissionDashboardLinks = () => {
           ],
         },
         {
-          label: 'Scunt Mission Panel',
+          label: 'Skule™ Hunt Mission Panel',
           anyRegisterScope: false,
           link: '/scunt-missions-dashboard',
           authScopes: [
@@ -107,13 +107,13 @@ export const ProfilePageLeaderPermissionDashboardLinks = () => {
           ],
         },
         {
-          label: 'Scunt Point Transactions',
+          label: 'Skule™ Hunt Point Transactions',
           anyRegisterScope: false,
           link: '/scunt-transactions',
           authScopes: ['scunt:exec view transactions'],
         },
         {
-          label: 'Scunt Settings',
+          label: 'Skule™ Hunt Settings',
           anyRegisterScope: false,
           link: '/scunt-game-controls',
           authScopes: ['scunt:exec game controls'],

client/src/components/schedule/ScheduleHome/ScheduleHome.scss

@@ -99,7 +99,7 @@
   transition: transform 200ms, opacity 500ms;
   &:hover {
     transform: scale(1.03);
-    cursor: pointer;
+    cursor: url('../../../../assets/cursor/cursor-2t4.png'), auto; // Apply custom cursor here
   }
   h1 {
     font-size: 28px;

client/src/components/task/TaskAnnouncement/TaskAnnouncement.jsx

@@ -8,7 +8,7 @@ const TaskAnnouncement = ({ tasks, onDone }) => {
   if (!tasks || tasks.length <= 0) {
     return (
       <div className="task-container">
-        <h2 className="nothing-here">There is nothing here yet!</h2>
+        <h2 className="nothing-here">THERE IS NOTHING HERE YET!</h2>
       </div>
     );
   }

client/src/pages/AnnouncementDashboard/CreateAnnounce.jsx

@@ -20,7 +20,7 @@ const CreateAnnounce = () => {
 
   return (
     <div className="announcement-creator">
-      <h3>Send an Announcement</h3>
+      <h3>SEND AN ANNOUNCEMENT</h3>
       <div className="full-width-input">
         <TextInput
           label="Announcement Name"

client/src/pages/EmailConfirmed/EmailConfirmed.jsx

@@ -24,7 +24,7 @@ const PageEmailConfirmed = () => {
       {validEmailToken ? (
         <div className="email-confirmed-page">
           <div className="email-confirmed-container">
-            <h1>Perfect!</h1>
+            <h1>PERFECT!</h1>
             <h2>Your email is now verified. Head to the login page to get started!</h2>
             <Link to={'/login'} style={{ textDecoration: 'none' }} className={'no-link-style'}>
               <Button label="Login Page" />

client/src/pages/EmailConfirmed/EmailConfirmed.scss

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Proxima Nova';
+  src: url('../../../../client/assets/fonts/proximanova_regular.ttf') format('opentype');
+}
+
 .email-confirmed-page {
   color: var(--text-dynamic);
   display: flex;
@@ -26,6 +31,7 @@
     margin-bottom: 30px;
   }
   h2 {
+    font-family: 'Proxima Nova', sans-serif;
     font-size: 25px;
     text-align: center;
     margin-bottom: 25px;

client/src/pages/FAQ/FAQ.jsx

@@ -1,4 +1,4 @@
-import { React, useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getQuestions } from './functions';
 import './FAQ.scss';
@@ -16,7 +16,7 @@ import LoadingAnimation from '../../components/misc/LoadingAnimation/LoadingAnim
 import Dragon from '../../assets/faq/dragon.svg';
 
 const PageFAQ = () => {
-  const { darkMode, setDarkModeStatus } = useContext(DarkModeContext);
+  const { darkMode } = useContext(DarkModeContext);
   const [activeIndex, setActiveIndex] = useState(0);
   const [isSearch, setIsSearch] = useState(false);
   const [isMultiSearch, setIsMultiSearch] = useState(false);
@@ -32,6 +32,10 @@ const PageFAQ = () => {
   const [errorLoading, setErrorLoading] = useState(false);
   const { setSnackbar } = useContext(SnackbarContext);
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5;
+
   const loadQuestions = async () => {
     const data = await getQuestions(setSnackbar);
     if (!data) {
@@ -79,6 +83,29 @@ const PageFAQ = () => {
     loadQuestions();
   }, []);
 
+  useEffect(() => {
+    // Reset current page to 1 when category (activeIndex) changes
+    setCurrentPage(1);
+  }, [activeIndex]);
+
+  // Calculate total pages
+  const totalPages = Math.ceil((allQuestions[activeIndex]?.length || 0) / itemsPerPage);
+
+  // Handle page change
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  // Get current page questions
+  const currentQuestions = allQuestions[activeIndex]?.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  console.log('Current Page:', currentPage);
+  console.log('Total Pages:', totalPages);
+  console.log('Current Questions:', currentQuestions);
+
   return (
     <div>
       <div>
@@ -129,10 +156,15 @@ const PageFAQ = () => {
               }`}
             >
               <FAQCategoryAccordions
-                allQuestions={allQuestions}
+                currentQuestions={currentQuestions}
                 activeIndex={activeIndex}
                 setActiveIndex={setActiveIndex}
               />
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalPages}
+                handlePageChange={handlePageChange}
+              />
             </div>
             <div
               className={`faq-display-questions-container ${
@@ -175,7 +207,7 @@ const FAQPageHeader = ({
   setActiveIndex,
   questionCategories,
 }) => {
-  const { darkMode, setDarkModeStatus } = useContext(DarkModeContext);
+  const { darkMode } = useContext(DarkModeContext);
   const filterQuestions = (questions, query) => {
     if (!query) {
       return questions;
@@ -313,9 +345,9 @@ FAQButtons.propTypes = {
   questionCategories: PropTypes.array.isRequired,
 };
 
-const FAQCategoryAccordions = ({ allQuestions, activeIndex }) => {
-  if (allQuestions[activeIndex] === undefined) return <></>;
-  const questionsAccordion = allQuestions[activeIndex].map((question, index) => (
+const FAQCategoryAccordions = ({ currentQuestions, activeIndex }) => {
+  if (!currentQuestions) return <></>;
+  const questionsAccordion = currentQuestions.map((question, index) => (
     <div key={index} className={'faq-accordion-wrapper'}>
       <FAQAccordionWrapper scheduleData={question} openStatus={false} activeIndex={activeIndex} />
     </div>
@@ -324,7 +356,7 @@ const FAQCategoryAccordions = ({ allQuestions, activeIndex }) => {
 };
 
 FAQCategoryAccordions.propTypes = {
-  allQuestions: PropTypes.array.isRequired,
+  currentQuestions: PropTypes.array.isRequired,
   activeIndex: PropTypes.number.isRequired,
 };
 
@@ -423,4 +455,24 @@ FAQDisplayAllSearchQuestion.propTypes = {
   questions: PropTypes.array.isRequired,
 };
 
+const PaginationControls = ({ currentPage, totalPages, handlePageChange }) => (
+  <div className="pagination-controls">
+    {Array.from({ length: totalPages }, (_, i) => (
+      <button
+        key={i + 1}
+        onClick={() => handlePageChange(i + 1)}
+        className={currentPage === i + 1 ? 'active' : ''}
+      >
+        {i + 1}
+      </button>
+    ))}
+  </div>
+);
+
+PaginationControls.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  totalPages: PropTypes.number.isRequired,
+  handlePageChange: PropTypes.func.isRequired,
+};
+
 export { PageFAQ };

client/src/pages/FAQ/FAQ.scss

@@ -293,3 +293,30 @@
   text-align: center;
   color: var(--text-dynamic);
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+
+  button {
+    margin: 0 5px;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--purple);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+
+    &:hover {
+      background-color: var(--light-purple);
+      color: var(--purple-shades-dark);
+    }
+
+    &.active {
+      background-color: var(--purple-shades-dark);
+      color: white;
+    }
+  }
+}

client/src/pages/FAQLeaders/FAQLeaders.jsx

@@ -28,7 +28,7 @@ const PageFAQLeaders = () => {
     <div>
       <div className={'faq-leaders-page'}>
         <div className={'faq-leaders-create-question-container'}>
-          <h1 className={'faq-leaders-titles'}>Create a new question!</h1>
+          <h1 className={'faq-leaders-titles'}>CREATE A NEW QUESTION!</h1>
           <FAQLeadersNewPost editMade={editMade} setEditMade={setEditMade} />
         </div>
         <div className={'faq-leaders-edit-question-container'}>
@@ -313,7 +313,7 @@ const FAQLeadersQuestionWrapper = ({ question, editMade, setEditMade }) => {
         </span>
       </PopupModal>
       <div className={`${isEdit ? 'faq-leaders-hide' : ''}`}>
-        <h1 className={'faq-leaders-questions-titles'}>{questionText}</h1>
+        <h1 className={'faq-leaders-questions-titles' }>{questionText}</h1>
         <p className={'faq-leaders-description'}>
           <b>Answer:</b> {answerText}
         </p>
@@ -346,7 +346,7 @@ const FAQLeadersQuestionWrapper = ({ question, editMade, setEditMade }) => {
           </div>
           <label>
             <div className={''}>
-              <h1 className={'faq-leaders-subtitles'}>Question</h1>
+              <h1 className={'faq-leaders-subtitles'}>QUESTION</h1>
               <TextInput
                 onChange={(text) => handleEditQuestion(text)}
                 inputType={'text'}
@@ -360,7 +360,7 @@ const FAQLeadersQuestionWrapper = ({ question, editMade, setEditMade }) => {
           </label>
           <label>
             <div className={''}>
-              <h1 className={'faq-leaders-subtitles'}>Answer</h1>
+              <h1 className={'faq-leaders-subtitles'}>ANSWER</h1>
               <TextInput
                 onChange={(text) => handleEditAnswer(text)}
                 inputType={'textArea'}
@@ -374,7 +374,7 @@ const FAQLeadersQuestionWrapper = ({ question, editMade, setEditMade }) => {
           </label>
           <label>
             <div className={''}>
-              <h1 className={'faq-leaders-subtitles'}>Category</h1>
+              <h1 className={'faq-leaders-subtitles'}>CATEGORY</h1>
               <TextInput
                 onChange={(text) => handleEditCategory(text)}
                 inputType={'text'}

client/src/pages/FAQLeaders/FAQLeaders.scss

@@ -1,5 +1,10 @@
 @import '../../scssStyles/mixins';
 
+@font-face {
+  font-family: 'Proxima Nova';
+  src: url('../../../../client/assets/fonts/proximanova_regular.ttf') format('opentype');
+}
+
 .faq-leaders-page {
   margin: 100px auto;
   width: 80%;
@@ -94,6 +99,7 @@
 .faq-leaders-titles {
   margin: 10px;
   text-align: center;
+  font-family: 'Proxima Nova', sans-serif;
   font-size: 30px;
   font-weight: bold;
   color: var(--text-dark-use);
@@ -106,6 +112,7 @@
   margin: 7px;
   font-size: 18px;
   color: var(--text-dark-use);
+  font-family: 'Proxima Nova', sans-serif;
   @include devices(tablet) {
     font-size: 15px;
   }
@@ -150,3 +157,7 @@
   margin: 10px;
   color: var(--text-dark-use);
 }
+
+.proxima-nova-text {
+  font-family: 'Proxima Nova', sans-serif;
+}