styles: snowflakes on only landing page; top left logo is not a link now

kossiitkgp · Nov 17, 2024 · 764bec9 · 764bec9
1 parent 0f62fb0
commit 764bec9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 45 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,7 +14,6 @@ import MentorDashboard from "./pages/MentorDashboard";
 import PastProgramsPage from "./pages/PastProgramsPage";
 import StudentDashboard from "./pages/StudentDashboard";
 import RegistrationForm from "./pages/RegistrationForm";
-import Snowfall from "react-snowfall";
 import { Header } from "./components/Header";
 import Footer from "./components/Footer";
 
@@ -24,19 +23,6 @@ function App() {
       <BrowserRouter>
         <AuthProvider>
           <Header />
-          <Snowfall // the image can be edited into anything we want, feel free to change
-            snowflakeCount={75}
-            speed={[0.5, 1]} // array takes [min, max]
-            wind={[-0.5, 0.5]}
-            radius={[2, 4]}
-            style={{
-              position: "fixed",
-              width: "100vw",
-              height: "100vh",
-              opacity: 0.5,
-              zIndex: 0,
-            }}
-          />
           <Routes>
             <Route index element={<Home />} />
             <Route

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import kwoc_logo from "../assets/kwoc_logo.png";
 import "../styles/Navbar.css";
@@ -7,8 +7,8 @@ import {
   GH_OAUTH_URL,
   REGISTRATIONS_OPEN,
 } from "../util/constants";
-import { useAuthContext } from '../util/auth';
-import { UserType } from '../util/types';
+import { useAuthContext } from "../util/auth";
+import { UserType } from "../util/types";
 
 function LoginButton() {
   const authContext = useAuthContext();
@@ -31,24 +31,20 @@ function LoginButton() {
       ) : REGISTRATIONS_OPEN ? (
         ["mentor", "student"].map((userType, i) => (
           <button
-            className='reg-button'
+            className="reg-button"
             key={i}
             onClick={(e) => {
               e.preventDefault();
 
               authContext.setUserType(userType as UserType);
-              window.location.href = GH_OAUTH_URL
+              window.location.href = GH_OAUTH_URL;
             }}
           >
             {userType.toUpperCase()} LOGIN
           </button>
         ))
       ) : (
-        <Link
-          to={GH_OAUTH_URL}
-        >
-          LOGIN
-        </Link>
+        <Link to={GH_OAUTH_URL}>LOGIN</Link>
       )}
     </>
   );
@@ -73,26 +69,20 @@ const Navbar = () => {
   }, [location.pathname]);
 
   function closeNavbar() {
-    const element = document.getElementById('linkList');
+    const element = document.getElementById("linkList");
 
-    if (element) { 
-      element.addEventListener('click', () => {
-        element.classList.remove('open');
+    if (element) {
+      element.addEventListener("click", () => {
+        element.classList.remove("open");
       });
     }
     setIsOpen(false);
   }
 
   return (
-    <div className='navbar'>
-      <div className='light-logo'>
-        <Link to="/">
-          <img
-            className="logo"
-            src={kwoc_logo}
-            alt="KWoC Logo"
-          />
-        </Link>
+    <div className="navbar">
+      <div className="light-logo">
+        <img className="logo" src={kwoc_logo} alt="KWoC Logo" />
         <div className="container">
           <div className="dots dot1"></div>
           <div className="dots dot2"></div>
@@ -102,20 +92,28 @@ const Navbar = () => {
           <div className="dots dot6"></div>
         </div>
       </div>
-      <ul id="linkList" className={`link-container ${isOpen ? 'open' : ''}`}>
+      <ul id="linkList" className={`link-container ${isOpen ? "open" : ""}`}>
         {LINKS.map((link) => (
           <li key={link.name}>
-            <Link to={link.link} className={link.isActive ? `link nav-glow` : `link`} onClick={() => { closeNavbar() }}>
+            <Link
+              to={link.link}
+              className={link.isActive ? `link nav-glow` : `link`}
+              onClick={() => {
+                closeNavbar();
+              }}
+            >
               {link.name}
             </Link>
           </li>
         ))}
 
         <LoginButton />
       </ul>
-      <div className='burger' onClick={() => setIsOpen(!isOpen)}>{isOpen ? '✖' : '☰'}</div>
+      <div className="burger" onClick={() => setIsOpen(!isOpen)}>
+        {isOpen ? "✖" : "☰"}
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -4,11 +4,24 @@ import { AboutSection } from "../components/About";
 import { WhyKWoC } from "../components/WhyKWoC";
 import "../styles/Santa.css";
 import Testimonials from "../components/Testimonials";
+import { Snowfall } from "react-snowfall";
 
 function Home() {
-
   return (
     <div>
+      <Snowfall // the image can be edited into anything we want, feel free to change
+        snowflakeCount={75}
+        speed={[0.5, 1]} // array takes [min, max]
+        wind={[-0.5, 0.5]}
+        radius={[2, 4]}
+        style={{
+          position: "fixed",
+          width: "100vw",
+          height: "100vh",
+          opacity: 0.5,
+          zIndex: 0,
+        }}
+      />
       <HeroComponent />
       <AboutSection />
       <WhyKWoC />

diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
@@ -10,7 +10,6 @@
 .logo {
     height: 60px;
     width: 60px;
-    cursor: pointer;
     position: absolute;
     z-index: 2;
     top: 50%;