feat: apply select-none to all titles and buttons

components/Button/index.tsx

@@ -31,7 +31,7 @@ export default function Button({
       disabled={disabled}
       className={`${
         customStyle || ""
-      } m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
+      } m-auto block select-none rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
     >
       <ButtonTitle title={title} bold={bold} />
       <p className="font-iregular">{description}</p>

components/Footer/index.tsx

@@ -86,7 +86,7 @@ export default function Footer(props: IFooterProps) {
       ref={observe}
     >
       <div className="flex flex-col justify-between gap-16 py-10 lg:flex-row">
-        <div className="flex items-start justify-center font-ibold lg:justify-start">
+        <div className="flex select-none items-start justify-center font-ibold lg:justify-start">
           <Image
             src="/images/sei-logo.svg"
             width={100}
@@ -101,7 +101,7 @@ export default function Footer(props: IFooterProps) {
           </p>
         </div>
 
-        <div className="mx-2 mt-20 hidden justify-center pb-10 lg:flex">
+        <div className="mx-2 mt-20 hidden select-none justify-center pb-10 lg:flex">
           <Animation
             text={
               props.footerAnimationText != undefined ? (
@@ -116,7 +116,7 @@ export default function Footer(props: IFooterProps) {
         </div>
 
         <div className="flex-2">
-          <div className="grid grid-rows-2 justify-items-center gap-8 whitespace-nowrap font-iregular text-sm text-white lg:grid-cols-2 lg:justify-items-start">
+          <div className="grid select-none grid-rows-2 justify-items-center gap-8 whitespace-nowrap font-iregular text-sm text-white lg:grid-cols-2 lg:justify-items-start">
             <Link
               href="https://2022.seium.org/"
               className="text-white hover:underline"

components/JoinUs/index.jsx

@@ -2,7 +2,7 @@ export default function JoinUs(props) {
   return (
     <a
       href="https://sei23.eventbrite.pt"
-      className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 rounded-full`}
+      className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 select-none rounded-full`}
     >
       Join us 👋
     </a>

components/Navbar/index.jsx

@@ -53,7 +53,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
               <div className="relative z-50 flex flex-auto">
                 <div className="grid w-full grid-cols-4">
                   <Link href="/">
-                    <div className={`${styles.logo} pt-4 lg:pt-8`}>
+                    <div className={`${styles.logo} select-none pt-4 lg:pt-8`}>
                       <Image
                         className="cursor-pointer opacity-60 hover:opacity-100"
                         src="/images/sei-logo.svg"
@@ -64,7 +64,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                     </div>
                   </Link>
                   <div className="col-span-3 hidden justify-self-end lg:block">
-                    <div className="flex">
+                    <div className="flex select-none">
                       <div className="mr-6 grid grid-cols-3 gap-y-4 gap-x-20 pt-4">
                         {navigation.map((item) => (
                           <Link

components/Schedule/index.jsx

@@ -157,7 +157,7 @@ export default function Schedule(props) {
 
   return (
     <div
-      className={`px-5 md:px-32 xl:grid xl:grid-cols-2 xl:px-16 2xl:px-32 bg-${props.color} relative pt-20`}
+      className={`px-5 md:px-32 xl:grid xl:grid-cols-2 xl:px-16 2xl:px-32 bg-${props.color} relative select-none pt-20`}
     >
       <div className="mb-20 xl:mb-0">
         <div className="sticky top-12 z-50">

layout/Challenges/components/Challenges/Challenge/index.tsx

@@ -41,7 +41,7 @@ export default function Challenge(props: IProps) {
     >
       <div className="sticky top-60">
         <div>
-          <h2 className="font-terminal-uppercase text-3xl text-white md:text-4xl xl:text-5xl">
+          <h2 className="font-terminal-uppercase select-none text-3xl text-white md:text-4xl xl:text-5xl">
             {props.title}
           </h2>
           <p className="mt-10 font-iregular text-white">{props.description}</p>

layout/Challenges/components/Challenges/index.jsx

@@ -9,7 +9,7 @@ export default function Challenges() {
     <div className="spacing relative z-20 flex w-full flex-col px-40 py-10">
       <div className="mb-24 grid grid-cols-1 gap-20 xl:grid-cols-2">
         <div className="hidden xl:flex">
-          <ul className="font-terminal-uppercase text-xl">
+          <ul className="font-terminal-uppercase select-none text-xl">
             {Object.keys(challenges).map((i) => (
               <li
                 key={i}

layout/Challenges/components/Hero/index.jsx

@@ -8,7 +8,7 @@ const Animation = dynamic(() => import("@components/Animation"), {
 
 export default function Hero() {
   return (
-    <div className=" bg-secondary">
+    <div className=" select-none bg-secondary">
       <div className="spacing relative z-20 md:pb-32">
         <Animation type="2" />
         <div className="pt-2">

layout/FAQs/FAQs.tsx

@@ -13,7 +13,7 @@ function Faq() {
       <Navbar bgColor="primary" button="quinary" fgColor="white">
         <div className="spacing flex flex-col justify-between bg-primary py-20 lg:h-3/4 lg:flex-row">
           <div className="mb-10 text-white lg:w-2/5">
-            <h1 className="font-terminal-uppercase mb-4 text-4xl font-bold lg:text-6xl">
+            <h1 className="font-terminal-uppercase mb-4 select-none text-4xl font-bold lg:text-6xl">
               Frequently Asked Questions
             </h1>
             <p className="text-lg">

layout/FAQs/components/FindUs/index.tsx

@@ -6,7 +6,7 @@ export default function FindUs() {
   return (
     <section className="spacing flex flex-col bg-primary py-20 lg:flex-row lg:justify-between">
       <div className="mb-10 mr-10 flex flex-col text-white">
-        <h2 className="font-terminal-uppercase mb-2 text-6xl">
+        <h2 className="font-terminal-uppercase mb-2 select-none text-6xl">
           How to find us
         </h2>
 
@@ -28,7 +28,7 @@ export default function FindUs() {
           <li className="">Phone: +351 253 604 448</li>
         </ul>
       </div>
-      <div className="w-full lg:w-3/5">
+      <div className="w-full select-none lg:w-3/5">
         <img src="/images/map/location.svg" alt="" />
       </div>
     </section>

layout/FAQs/components/Question/index.tsx

@@ -18,7 +18,7 @@ export default function Question({
 
   return (
     <div className="border-t-2 border-white py-4 text-white">
-      <h2 className="font-terminal-uppercase mb-4 text-2xl md:text-4xl">
+      <h2 className="font-terminal-uppercase mb-4 select-none text-2xl md:text-4xl">
         {title}
       </h2>
       <div
@@ -31,12 +31,12 @@ export default function Question({
       <div className="flex items-center justify-end">
         <Link
           href={href}
-          className="font-terminal-uppercase mr-4 text-sm text-quinary"
+          className="font-terminal-uppercase mr-4 select-none text-sm text-quinary"
         >
           {link}
         </Link>
         <button
-          className="font-terminal-uppercase w-16 transform rounded-full bg-quinary px-2 text-xl text-white transition-transform duration-300 hover:scale-110"
+          className="font-terminal-uppercase w-16 transform select-none rounded-full bg-quinary px-2 text-xl text-white transition-transform duration-300 hover:scale-110"
           onClick={() =>
             setShowQuestion((prevShowQuestion) => !prevShowQuestion)
           }

layout/Home/components/Hero/ExpectList/index.jsx

@@ -1,7 +1,7 @@
 export default function ExpectList() {
   return (
     <div className="mt-20 w-3/5 text-white sm:mt-0">
-      <h3 className="md:text5xl font-terminal-uppercase text-4xl">
+      <h3 className="md:text5xl font-terminal-uppercase select-none text-4xl">
         What you can expect:
       </h3>
       <ul className="mt-8 list-disc pl-4 font-iregular">

layout/Home/components/Hero/Organization/index.jsx

@@ -10,6 +10,7 @@ export default function Organization() {
           width="120"
           height="41"
           alt="CeSIUM"
+          className="select-none"
         />
       </a>
     </div>

layout/Home/components/Hero/Pitch/index.jsx

@@ -2,7 +2,7 @@ import Button from "@components/Button";
 
 export default function Pitch() {
   return (
-    <div className="xl:9/12 font-terminal-uppercase w-full text-white lg:w-9/12">
+    <div className="xl:9/12 font-terminal-uppercase w-full select-none text-white lg:w-9/12">
       <h2 className="text-4xl font-bold">
         We gather speakers, attract partners and give our imagination wings, all
         for this to be your favorite week.

layout/Home/components/Hero/index.tsx

@@ -21,7 +21,7 @@ export default function Hero() {
     <div className="bg-secondary">
       <div className="spacing relative z-40 pb-32">
         <Animation type="1" />
-        <div className="pt-2">
+        <div className="select-none pt-2">
           <Title />
         </div>
         <div className="relative mt-20 grid grid-cols-2">
@@ -36,7 +36,7 @@ export default function Hero() {
             <Organization />
           </div>
           {isAuthenticated || (
-            <div className="absolute right-0 block lg:hidden">
+            <div className="absolute right-0 block select-none lg:hidden">
               <JoinUs button="quinary" fgColor="white" />
             </div>
           )}

layout/Home/components/Partners/index.jsx

@@ -5,13 +5,13 @@ import partners from "/data/partners";
 export default function Partners() {
   return (
     <div className="spacing w-full bg-secondary pt-20 pb-20">
-      <h2 className="font-terminal-uppercase py-10 text-center text-5xl text-white lg:text-6xl">
+      <h2 className="font-terminal-uppercase select-none py-10 text-center text-5xl text-white lg:text-6xl">
         Partners who made this possible
       </h2>
       <div className="my-10 flex flex-wrap items-center justify-center gap-10">
         {partners.map((partner, i) => (
           <div
-            className="m-auto w-40 grayscale filter hover:filter-none"
+            className="m-auto w-40 select-none grayscale filter hover:filter-none"
             key={i}
           >
             <a href={partner.url} target="_blank" rel="noreferrer">

layout/Home/components/Speakers/index.jsx

@@ -9,14 +9,14 @@ export default function Speakers() {
   return (
     <div className="spacing flex flex-col justify-around bg-secondary pt-20 lg:flex-row">
       <div className="mb-10 lg:w-1/2">
-        <h2 className="font-terminal-uppercase mb-8 text-4xl text-white xs:text-5xl lg:text-6xl">
+        <h2 className="font-terminal-uppercase mb-8 select-none text-4xl text-white xs:text-5xl lg:text-6xl">
           Here’s a selection of this year’s speakers
         </h2>
         <div className="xs:w-70 w-60 sm:w-80">
           <Link href="/speakers">
             <Button
               title="MEET THE SPEAKERS"
-              customStyle="text-white border-white border-4 h-20 w-full hover:border-quinary hover:bg-quinary"
+              customStyle="text-white border-white border-4 h-20 w-full hover:border-quinary hover:bg-quinary select-none"
               bold={true}
             />
           </Link>

layout/Home/components/Sponsors/index.jsx

@@ -21,7 +21,7 @@ export default function Sponsors(props) {
   const [val, setValue] = useState(0);
 
   return (
-    <div className="spacing bg-tertiary py-20 text-white">
+    <div className="spacing select-none bg-tertiary py-20 text-white">
       <h2 className="font-terminal-uppercase flex justify-center py-10 text-center text-4xl xs:text-5xl sm:text-6xl md:text-8xl">
         Our amazing sponsors
       </h2>

layout/Login/Login.tsx

@@ -15,7 +15,7 @@ import { LoginForm } from "./components";
 
 function Login() {
   return (
-    <div className="min-h-screen overflow-hidden bg-secondary">
+    <div className="min-h-screen select-none overflow-hidden bg-secondary">
       <Return componentStyle="sm:ml-20 mt-20 sm:mt-20" />
       <img
         className="absolute -left-[380px] bottom-0 hidden w-[750px] xl:block"

layout/Schedule/components/Hero/index.jsx

@@ -9,7 +9,7 @@ const Animation = dynamic(() => import("@components/Animation"), {
 export default function Hero() {
   return (
     <div className="bg-tertiary">
-      <div className="spacing relative z-20 pb-32">
+      <div className="spacing relative z-20 select-none pb-32">
         <Animation type="3" />
         <div className="pt-2">
           <Title />

layout/SignUp/SignUp.tsx

@@ -11,7 +11,7 @@ import Text from "@layout/moonstone/authentication/Text";
 
 function Signup({ courses }) {
   return (
-    <div className="min-h-screen overflow-hidden bg-secondary">
+    <div className="min-h-screen select-none overflow-hidden bg-secondary">
       <Return componentStyle="sm:ml-14 mt-10 sm:mt-20 mb-6" />
       <div className="flex flex-col items-center justify-center sm:mt-16">
         <Title text="Sign up" />

layout/Speakers/components/Hero/index.jsx

@@ -8,7 +8,7 @@ const Animation = dynamic(() => import("@components/Animation"), {
 
 export default function Hero() {
   return (
-    <div className="spacing bg-secondary pb-40">
+    <div className="spacing select-none bg-secondary pb-40">
       <div className="relative z-20">
         <Animation type="2" />
         <div className="pt-2">

layout/Speakers/components/Schedule/Table/Block/index.jsx

@@ -27,7 +27,7 @@ export default function Block({
   return (
     <div key={id} className="border-t-2 border-white py-4 text-white">
       <div className="mb-2 flex">
-        <div className="w-[210px]">
+        <div className="w-[210px] select-none">
           <Image
             src={`/images/speakers/${id}.png`}
             width="210"
@@ -78,7 +78,7 @@ export default function Block({
             </div>
           </div>
 
-          <div className="z-50 flex items-center justify-end">
+          <div className="z-50 flex select-none items-center justify-end">
             <p className="grow text-gray-400">{talk}</p>
             {description && (
               <button

layout/Speakers/components/Schedule/index.jsx

@@ -107,7 +107,7 @@ export default function Schedule(props) {
 
   return (
     <section className="spacing relative bg-secondary pb-20 lg:pt-10 2xl:grid 2xl:grid-cols-2">
-      <div className="relative z-50 mb-10 grid place-items-center text-white sm:flex sm:flex-col md:mr-10 md:place-items-start">
+      <div className="relative z-50 mb-10 grid select-none place-items-center text-white sm:flex sm:flex-col md:mr-10 md:place-items-start">
         <Day date={date} previousDay={previous_day} nextDay={next_day} />
         <p className="text-md mt-10 w-5/6 font-iregular md:px-20">
           During this week, you have the opportunity to interact with many

layout/Team/components/Hero/index.jsx

@@ -9,7 +9,7 @@ const Animation = dynamic(() => import("@components/Animation"), {
 
 export default function Hero() {
   return (
-    <div className="spacing bg-primary">
+    <div className="spacing select-none bg-primary">
       <div className="relative z-50">
         <Animation type="1" />
         <div className="pt-2">

layout/Team/components/Organization/Member/index.jsx

@@ -22,6 +22,7 @@ export default function Member({
         width="210"
         height="210"
         alt={name}
+        className="select-none"
       />
       <p className="text-md font-terminal-uppercase mb-1"> {name} </p>
       <div className="flex">

layout/Team/components/Organization/index.jsx

@@ -53,7 +53,7 @@ export default function Organization() {
   return (
     <section className="spacing grid grid-cols-1 gap-x-32 gap-y-8 bg-primary py-20 lg:grid-cols-2">
       <div className="text-white">
-        <h2 className="font-terminal-uppercase mb-4 text-4xl font-bold">
+        <h2 className="font-terminal-uppercase mb-4 select-none text-4xl font-bold">
           Organization
         </h2>
         <p className="font-imedium">
@@ -73,7 +73,7 @@ export default function Organization() {
         list={sortListMembers(team["marketing"].list).slice(0, 2)}
       />
 
-      <div className="hidden items-center justify-center lg:flex">
+      <div className="hidden select-none items-center justify-center lg:flex">
         <Animation />
       </div>