Merge pull request #773 from UofT-Frosh-Orientation/issue-764-changes…

…-to-home-page-header

Issue 764 changes to home page header

client/package.json

@@ -65,4 +65,4 @@
     "vite": "^4.3.9",
     "vite-plugin-rewrite-all": "^1.0.1"
   }
-}
+}

client/src/components/Navbar/Navbar.jsx

@@ -18,7 +18,7 @@ import MessageIconDefaultDarkMode from '../../assets/darkmode/navbar/message-sol
 
 import ProfileIcon from '../../assets/navbar/circle-user-solid-purple.svg';
 import ProfileIconDarkMode from '../../assets/darkmode/navbar/circle-user-solid-purple.svg';
-import MainFroshLogo from '../../assets/logo/frosh-main-logo-with-bg.svg';
+import MainFroshLogo from '../../assets/logo/frosh-draft-logo-2t4.svg';
 
 import { Link, useLocation } from 'react-router-dom';
 import { pages } from '../../util/pages';

client/src/components/Navbar/Navbar.scss

@@ -6,12 +6,15 @@ li {
 
 .navbar-desktop {
   display: unset;
+
   @include devices(tablet) {
     display: none;
   }
 }
+
 .navbar-mobile {
   display: none;
+
   @include devices(tablet) {
     display: unset;
   }
@@ -26,10 +29,11 @@ li {
   position: fixed;
   background-color: var(--navbar-bg);
   width: 100%;
-  height: 45px;
+  height: 60px;
 
   filter: drop-shadow(0px -2px 5px rgba(0, 0, 0, 0.25));
 }
+
 .navbar-main,
 .navbar-special {
   display: flex;
@@ -49,7 +53,7 @@ li {
   align-items: center;
 
   margin-right: 25px;
-  height: 35px;
+  height: 45px;
   width: 80px;
 
   border-radius: 5px;
@@ -64,6 +68,7 @@ li {
       transition: background-color 200ms;
     }
   }
+
   .navbar-underline {
     transition: background-color 200ms;
   }
@@ -98,15 +103,16 @@ li {
   border-radius: 15px;
   transition: background-color 200ms;
 }
+
 .underline-page-unselected {
   opacity: 0;
 
   transition: background-color 200ms;
 }
 
 .icon-logo {
-  width: 38px;
-  height: 38px;
+  width: 50px;
+  height: 50px;
 
   margin-left: 15px;
   margin-right: 40px;
@@ -146,11 +152,13 @@ li {
   margin-right: 15px;
   margin-top: 4px;
   cursor: pointer;
+
   @include devices(tablet) {
     margin-right: 10px;
   }
 
   transition: transform 300ms;
+
   &:hover {
     transform: scale(1.08);
   }
@@ -181,6 +189,7 @@ li {
   color: var(--text-light);
   padding-inline: 15px;
 }
+
 .login,
 .navbar-logout-button {
   box-sizing: border-box;

client/src/components/footer/Footer.jsx

@@ -67,7 +67,7 @@ const Footer = () => {
             </div>
           </a>
 
-          <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/pages/Home/Home.jsx

@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom';
 
 import { Timeline } from '../../components/timeline/Timeline/Timeline';
 import { ImageCarousel } from '../../components/ImageCarousel/ImageCarousel';
-import MainFroshLogo from '../../assets/logo/frosh-main-logo-outline.svg';
+import MainFroshLogo from '../../assets/logo/frosh-draft-logo-2t4.svg';
 import 'react-slideshow-image/dist/styles.css';
 import { Slide } from 'react-slideshow-image';
 import { ScheduleComponent } from '../../components/schedule/ScheduleHome/ScheduleHome';
@@ -118,6 +118,7 @@ const HomePageSlideshow = () => {
             src={image.src}
             placeholder={image.placeholder}
             alt={'slideshow' + index}
+            loading="lazy"
           />
         </div>
       ))}

client/src/pages/Home/Home.scss

@@ -11,6 +11,7 @@
   align-items: center;
   overflow: hidden;
   margin-top: 0;
+
   @include devices(tablet) {
     justify-content: center;
   }
@@ -19,7 +20,10 @@
 .FroshHardHatWhite-logo {
   text-align: center;
   object-fit: fill;
-  height: 400px;
+  height: 300px;
+  background-color: rgba(220, 191, 225, 0.8);
+  border-radius: 100px;
+
   @include devices(tablet) {
     text-align: center;
     height: 220px;
@@ -31,21 +35,24 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 3%;
+  padding: 20px 3% 0 3%;
   text-align: center;
+
   h1 {
     text-align: center;
     font-size: max(14vh, 140px);
     color: var(--text-light);
     line-height: 1;
   }
+
   h2 {
     text-align: center;
     font-size: max(6vh, 60px);
     color: var(--text-light);
     line-height: 0.7;
     line-height: 1;
   }
+
   p {
     text-align: center;
     font-size: max(3vh, 14px);
@@ -54,17 +61,21 @@
     color: var(--text-light);
     line-height: 1.2;
   }
+
   @include devices(tablet) {
     padding: 0px 25px;
+
     h1 {
       font-size: 100px;
       text-align: center;
     }
+
     h2 {
       font-size: 32px;
       text-align: center;
       line-height: 1;
     }
+
     p {
       font-size: 15px;
       padding: 0px 20px;
@@ -79,12 +90,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
   @include devices(tablet) {
     text-align: center;
     width: unset;
     height: unset;
     font-size: unset;
   }
+
   font-size: max(1.8vh, 18px);
 }
 
@@ -101,6 +114,7 @@
   width: 100vw;
   min-height: 500px;
 }
+
 .home-page-landing-image {
   object-fit: cover;
   height: 100vh;
@@ -112,29 +126,35 @@
   width: 100vw;
   height: min(10vh, 80px);
   object-fit: fill;
+
   @include devices(tablet) {
     height: min(10vh, 40px);
   }
 }
 
 .home-page-timeline {
   background-color: var(--purple);
+
   ::-webkit-scrollbar {
     width: 12px;
     height: 12px;
   }
+
   ::-webkit-scrollbar-thumb:hover {
     background: var(--text-muted);
   }
+
   ::-webkit-scrollbar-thumb {
     background-color: var(--gray);
     background: var(--gray);
     border-radius: 3px;
   }
+
   ::-webkit-scrollbar-track {
     background: var(--purple);
     border-radius: 3px;
   }
+
   @include devices(tablet) {
     ::-webkit-scrollbar {
       width: 5px;
@@ -145,16 +165,20 @@
 
 .home-page-timeline-popup-container {
   color: var(--white);
+
   h1 {
     margin-bottom: 10px;
     font-size: 34px;
   }
+
   p {
     font-size: 18px;
   }
+
   .home-page-timeline-popup-button {
     margin-top: 25px;
   }
+
   @include devices(tablet) {
     display: flex;
     flex-direction: column;
@@ -167,13 +191,15 @@
 .home-page-schedule {
   background-color: var(--purple);
   padding-bottom: 30px;
+
   .home-page-schedule-warning {
     font-size: 18px;
     color: var(--white);
     padding-left: min(40px, 3.5%);
     margin-top: -25px;
     margin-bottom: 15px;
     padding-right: min(40px, 3.5%);
+
     @include devices(tablet) {
       margin-top: -10px;
       font-size: 15px;
@@ -187,6 +213,7 @@
   padding-left: min(40px, 3.5%);
   padding-top: 35px;
   margin-bottom: 24px;
+
   @include devices(tablet) {
     padding-top: 30px;
     margin-bottom: 10px;
@@ -202,30 +229,37 @@
   color: var(--black);
 
   text-align: center;
+
   h2 {
     font-size: 40px;
     margin-bottom: 20px;
+
     @include devices(tablet) {
       padding-top: 20px;
     }
+
     text-align: center;
   }
+
   h3 {
     font-size: 30px;
     padding-bottom: 10px;
     text-align: center;
   }
+
   h4 {
     font-size: 25px;
     text-align: center;
   }
+
   a {
     user-select: all;
     text-align: center;
     font-size: 18px;
     margin-bottom: 0px;
     padding-bottom: 0px;
   }
+
   .please-sponsor {
     color: (--text-dark);
     padding-top: 20px;
@@ -235,6 +269,7 @@
     transition: transform 500ms;
     transform: scale(1);
   }
+
   .please-sponsor:hover {
     transition: transform 500ms;
     transform: scale(1.05);
@@ -246,6 +281,7 @@
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .sponsor-container {
   display: flex;
   flex-direction: column;
@@ -266,10 +302,12 @@
     height: 100%;
     object-fit: contain;
   }
+
   &:hover {
     transform: scale(1.05);
     transition: transform 500ms;
   }
+
   @include devices(tablet) {
     width: min(90%, 350px);
   }