Merge pull request #11 from winterofcode/fix/navbar

Fix/navbar
winterofcode · Nov 26, 2023 · 221a9d8 · 221a9d8
2 parents 217c892 + fe758f5
commit 221a9d8
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 1,298 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -4,8 +4,8 @@ import {
   InstagramOutlined,
   LinkedinOutlined,
   YoutubeOutlined,
-  TwitterOutlined,
 } from "@ant-design/icons";
+import { FaXTwitter } from "react-icons/fa6";
 // @ts-ignore
 import wocLogo from "../../assets/wocLogo1.png";
 // @ts-ignore
@@ -39,7 +39,7 @@ const Footer = () => {
               style={{ cursor: "pointer" }}
               onClick={() => openInNewWindow(footerData.youtube̦)}
             />
-            <TwitterOutlined
+            <FaXTwitter
               className="footer_logo_socials_icons3"
               style={{ cursor: "pointer" }}
               onClick={() => openInNewWindow(footerData.twitter)}

diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -94,9 +94,9 @@
   }
 }
 .footer_logo_socials_icons3 {
-  font-size: 25px;
+  font-size: 24px;
   @media screen and (max-width: 560px) {
-    font-size: 15px;
+    font-size: 16px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 100%;
   }
@@ -124,7 +124,7 @@
 }
 .footer_resources_text {
   margin: 8px 0px;
-  font-size: 14px;
+  font-size: 16px;
 
   @media screen and (max-width: 560px) {
     font-size: 12px;
@@ -152,7 +152,7 @@
 }
 .footer_socials_text {
   margin: 8px 0px;
-  font-size: 14px;
+  font-size: 16px;
 
   @media screen and (max-width: 560px) {
     font-size: 12px;
@@ -174,8 +174,8 @@
 }
 .footer_bottom p {
   margin: 10px 20px;
-  font-size: 14px;
+  font-size: 16px;
   @media screen and (max-width: 560px) {
-    font-size: 12px;
+    font-size: 14px;
   }
 }
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -5,7 +5,7 @@ import { RxCross2 } from "react-icons/rx";
 // @ts-ignore
 import logo from "../../assets/org-logo.png";
 import "./Navbar.scss";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
 
 const Navbar = () => {
@@ -47,7 +47,6 @@ const Navbar = () => {
   }
   function closeNavMenu() {
     setShowNav(false);
-    if (location.pathname !== "/") setNavBackground(false);
   }
 
   return (
@@ -74,6 +73,7 @@ const Navbar = () => {
           border: "none",
           borderRadius: "20px 20px 0px 0px",
           boxShadow: "15px 15px 15px 15px black",
+          overflow: "hidden",
         }}
         open={showNav}
         onClose={() => setShowNav(false)}
@@ -101,34 +101,48 @@ function NavMenu({ isInline = false, closeNavMenu = null }) {
     window.scrollTo({ top: yCoordinate + yOffset, behavior: "smooth" });
   }
   return (
-    <ul className="menu" style={style}>
-      <li>
-        <a href="https://dscnsec.com/" target="_blank" rel="noreferrer">
-          GDSC NSEC
-        </a>
-      </li>
-      <li onClick={closeNavMenu}>
-        <Link to="/team">Team</Link>
-      </li>
-      <li onClick={closeNavMenu}>
-        <HashLink
-          smooth
-          to="/#organization"
-          scroll={(el) => scrollWithOffset(el)}
-        >
-          Organization
-        </HashLink>
-      </li>
-      <li onClick={closeNavMenu}>
-        <HashLink smooth to="/#timeline" scroll={(el) => scrollWithOffset(el)}>
-          Timeline
-        </HashLink>
-      </li>
-      <li onClick={closeNavMenu}>
-        <HashLink smooth to="/#faq" scroll={(el) => scrollWithOffset(el)}>
-          FAQ
-        </HashLink>
-      </li>
-    </ul>
+    <div className="menu" style={style}>
+      <a
+        href="https://dscnsec.com/"
+        target="_blank"
+        rel="noreferrer"
+        onClick={closeNavMenu}
+      >
+        GDSC NSEC
+      </a>
+      <HashLink
+        smooth
+        to="/team"
+        scroll={(el) => scrollWithOffset(el)}
+        onClick={closeNavMenu}
+      >
+        Team
+      </HashLink>
+      <HashLink
+        smooth
+        to="/#organization"
+        scroll={(el) => scrollWithOffset(el)}
+        onClick={closeNavMenu}
+      >
+        Organization
+      </HashLink>
+      <HashLink
+        smooth
+        to="/#timeline"
+        scroll={(el) => scrollWithOffset(el)}
+        onClick={closeNavMenu}
+      >
+        Timeline
+      </HashLink>
+
+      <HashLink
+        smooth
+        to="/#faq"
+        scroll={(el) => scrollWithOffset(el)}
+        onClick={closeNavMenu}
+      >
+        FAQ
+      </HashLink>
+    </div>
   );
 }
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -46,23 +46,25 @@ a {
   color: white;
   list-style: none;
   display: flex;
+  overflow: hidden;
 }
-.menu li {
+.menu a {
   margin-left: 2em;
   cursor: pointer;
 }
-.navbar > .menu li a {
+.navbar > .menu a {
   color: white;
 }
 
 @media (max-width: 900px) {
   .navbar {
     padding: 1.5rem 2rem;
   }
-  .menu li {
-    padding: 1em 0em;
+  .navbar > .menu {
+    display: none;
   }
-  .menu li a {
+  .menu a {
+    padding: 0.9em 0em;
     color: #505050;
   }
   .logoImg {
@@ -80,7 +82,4 @@ a {
     padding: 0.5em;
     cursor: pointer;
   }
-  .navbar > .menu {
-    display: none;
-  }
 }
diff --git a/src/constants/teamData.js b/src/constants/teamData.js
@@ -33,23 +33,6 @@ export const teamData = [
       },
     ],
   },
-  {
-    name: "Soham Dey",
-    title: "Design Lead",
-    image: soham,
-    socials: [
-      {
-        url: "https://github.com/7sohamd/",
-        title: "GitHub",
-        icon: "https://img.icons8.com/3d-fluency/32/github.png",
-      },
-      {
-        url: "https://www.linkedin.com/in/soham-dey-891332256?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
-        title: "LinkedIn",
-        icon: "https://img.icons8.com/color/32/linkedin.png",
-      },
-    ],
-  },
   {
     name: "Sambaran Das",
     title: "ML Lead",
@@ -123,6 +106,23 @@ export const teamData = [
       },
     ],
   },
+  {
+    name: "Soham Dey",
+    title: "Design Lead",
+    image: soham,
+    socials: [
+      {
+        url: "https://github.com/7sohamd/",
+        title: "GitHub",
+        icon: "https://img.icons8.com/3d-fluency/32/github.png",
+      },
+      {
+        url: "https://www.linkedin.com/in/soham-dey-891332256?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
+        title: "LinkedIn",
+        icon: "https://img.icons8.com/color/32/linkedin.png",
+      },
+    ],
+  },
   {
     name: "Debojit Saha",
     title: "Web Lead",

diff --git a/src/partials/About/About.jsx b/src/partials/About/About.jsx
@@ -26,6 +26,14 @@ const About = () => {
         your formative years. Above all, we hope you get encouraged into the
         world of open source and develop more code for the benefit of all.
       </p>
+      <a
+        className="primary button"
+        target="_blank"
+        href="https://drive.google.com/file/d/17Tu1nqx1QqRqXSx2KHBnaiqolZ-sZuRB/view"
+        rel="noreferrer"
+      >
+        See our Brochure
+      </a>
     </div>
   );
 };

diff --git a/src/partials/About/About.scss b/src/partials/About/About.scss
@@ -20,6 +20,15 @@
   font-size: 18px;
   text-align: center;
 }
+.button {
+  display: inline-block;
+  color: #fff;
+  padding: 10px 30px;
+  margin-top: 30px;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 10px;
+}
 
 /* Responsive styles */
 @media (max-width: 768px) {
@@ -30,4 +39,8 @@
   .description {
     font-size: 16px;
   }
+  .button {
+    font-size: 15px;
+    padding: 10px 20px;
+  }
 }
diff --git a/src/partials/Apply/Apply.jsx b/src/partials/Apply/Apply.jsx
@@ -1,13 +1,12 @@
 import React from "react";
 import "./Apply.scss";
-import { Button, Flex, message } from "antd";
-
-// const boxStyle = {
-//   width: '100%',
-//   height: 120,
-// };
+import { Button, message } from "antd";
 
 const Apply = () => {
+  const openInNewWindow = (url) => {
+    window.open(url, "_blank");
+  };
+
   return (
     <>
       <div className="box" id="organization">
@@ -25,9 +24,7 @@ const Apply = () => {
               type="primary"
               className="primary"
               onClick={() =>
-                message.warning(
-                  "Applications for Organisations have not started yet."
-                )
+                openInNewWindow("https://forms.gle/wx1CKpzGCt6yXY6M7")
               }
             >
               Apply As Organisation
@@ -36,9 +33,7 @@ const Apply = () => {
               type="primary"
               className="primary"
               onClick={() =>
-                message.warning(
-                  "Applications for Community Partners have not started yet."
-                )
+                openInNewWindow("https://forms.gle/uY693jkYamRQ6bfv5")
               }
             >
               Apply As Community Partner
@@ -49,9 +44,7 @@ const Apply = () => {
               type="primary"
               className="primary"
               onClick={() =>
-                message.warning(
-                  "Applications for Mentors have not started yet."
-                )
+                openInNewWindow("https://forms.gle/VCjpHpUvyR6Abr2W9")
               }
             >
               Apply As Mentor

diff --git a/src/partials/FAQ/FAQ.jsx b/src/partials/FAQ/FAQ.jsx
@@ -29,7 +29,7 @@ const FAQ = () => {
             Collapse: {
               headerPadding: "5px 10px",
               contentPadding: "2px 10px ",
-              fontSize: isSmallScreen ? "14px" : "16px", // fixed syntax error
+              fontSize: isSmallScreen ? "16px" : "18px", // fixed syntax error
             },
             Input: {
               colorPrimary: "#eb2f96",