Merge pull request #45 from Arkapravo-Ghosh/main

[FIX]: Fixed text selection issue with section headers
hack4bengal · Jan 7, 2024 · 0f0beb5 · 0f0beb5
2 parents 3e77bf7 + f937740
commit 0f0beb5
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 19 deletions.
diff --git a/src/components/faq/FAQ.jsx b/src/components/faq/FAQ.jsx
@@ -5,7 +5,7 @@ const Faq = ({ refs }) => {
   return (
     <div className="faq" ref={refs}>
       <div className="faq__content">
-        <div className="faq__header">
+        <div className="faq__header disable-select">
           <h1>FAQ</h1>
           <h2>Questions</h2>
         </div>

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -50,7 +50,10 @@ const Footer = () => {
           <div
             className="foooter__backtotop"
             onClick={() => {
-              window.scrollTo(0, 0);
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
             }}
           >
             <p>Back to top</p>

diff --git a/src/components/mentors/Mentors.jsx b/src/components/mentors/Mentors.jsx
@@ -1,15 +1,29 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Marquee from "react-fast-marquee";
 import { FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
 import { mentorContent } from "../../assets/data/MentorsContent";
 import "./Mentors.scss";
 
 function Mentors({ refs }) {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <section className="mentors__parent" ref={refs}>
-      <div className="mentors__header">
+      <div className="mentors__header disable-select">
         <h1>Experts</h1>
-        <h2>{window.innerWidth > 700 ? "Previous" : "Past"} Mentors</h2>
+        <h2>{windowWidth > 700 ? "Previous" : "Past"} Mentors</h2>
       </div>
 
       <div className="mentors__container mentors__container_desktop">

diff --git a/src/components/prizes/Prizes.jsx b/src/components/prizes/Prizes.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 // import white from "../../assets/images/LandingImages/blob_right.png";
 
 // import FirstPrize from "../../assets/images/PrizesImages/FirstPrize.png";
@@ -11,12 +11,26 @@ import ComingSoon from "../comingsoon/ComingSoon";
 import "./Prizes.scss";
 
 const Prizes = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="prizes__parent" ref={refs}>
-        <div className="prizes__header">
+        <div className="prizes__header disable-select">
           <h1>Awards</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Prizes</h2>
+          <h2>{windowWidth > 700 && "Hackathon"} Prizes</h2>
         </div>
         {/* <img src={red} alt="" className="red__blob" /> */}
         {/* <img src={white} alt="" className="white__blob" /> */}

diff --git a/src/components/sponsors/Sponsors.jsx b/src/components/sponsors/Sponsors.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import sponsors from "../../assets/data/SponsorsContent";
 import SingleSponsors from "../singlesponsors/SingleSponsors";
 import "./Sponsors.scss";
 
 const Sponsors = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="sponsors__parent" ref={refs}>
-        <div className="sponsors__header">
-          <h1>{window.innerWidth > 700 ? "Supporters" : "Backers"}</h1>
+        <div className="sponsors__header disable-select">
+          <h1>{windowWidth > 700 ? "Supporters" : "Backers"}</h1>
           <h2>Past Sponsors</h2>
         </div>
 

diff --git a/src/components/testimonials/Testimonials.jsx b/src/components/testimonials/Testimonials.jsx
@@ -6,7 +6,7 @@ import "./Testimonials.scss";
 const Testimonials = ({ refs }) => {
   return (
     <div className="testimonials__parent" ref={refs}>
-      <div className="testimonials__header">
+      <div className="testimonials__header disable-select">
         <h1>Stories</h1>
         <h2>Testimonials</h2>
       </div>

diff --git a/src/components/themes/Theme.jsx b/src/components/themes/Theme.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ComingSoon from "../comingsoon/ComingSoon";
 import "./Theme.scss";
 
 const Theme = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="theme__parent" ref={refs}>
-        <div className="theme__header">
+        <div className="theme__header disable-select">
           <h1>Tracks</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Themes</h2>
+          <h2>{windowWidth > 700 && "Hackathon"} Themes</h2>
         </div>
 
         <ComingSoon />

diff --git a/src/components/timeline/Timeline.jsx b/src/components/timeline/Timeline.jsx
@@ -1,14 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ComingSoon from "../comingsoon/ComingSoon";
 import "./Timeline.scss";
 
 const Timeline = ({ refs }) => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="timeline__parent" ref={refs}>
-        <div className="timeline__header">
-          <h1>{window.innerWidth > 700 ? "Roadmap" : "Plan"}</h1>
-          <h2>{window.innerWidth > 700 && "Hackathon"} Timeline</h2>
+        <div className="timeline__header disable-select">
+          <h1>{windowWidth > 700 ? "Roadmap" : "Plan"}</h1>
+          <h2>{windowWidth > 700 && "Hackathon"} Timeline</h2>
         </div>
 
         <ComingSoon />