feat: apply select-none to all titles and buttons

components/Badge/index.tsx

@@ -6,7 +6,7 @@ export default function Badge({ name, id, avatar, tokens, owned }) {
       href={`/badge/${id}`}
       className={`h-full w-full ${owned ? "opacity-100" : "opacity-30"}`}
     >
-      <div>
+      <div className="select-none">
         <img src={avatar} alt={name}></img>
       </div>
       <div className="flex flex-col justify-items-center text-center font-iregular">

components/BadgeFilter/index.tsx

@@ -6,7 +6,7 @@ export default function BadgeFilter({ onChange }) {
       <select
         id="location"
         name="location"
-        className="mt-1 block w-full rounded-full border-2 border-quinary bg-white py-2 pl-3 pr-10 text-black ring-quinary focus:border-quinary"
+        className="mt-1 block w-full select-none rounded-full border-2 border-quinary bg-white py-2 pl-3 pr-10 text-black ring-quinary focus:border-quinary"
         defaultValue="All"
         onChange={(e) => {
           const badge = badgeTypes.find(

components/Balance/index.jsx

@@ -1,7 +1,9 @@
 export default function Balance({ token_balance, badge_count }) {
   return (
     <div className="text-white lg:grid lg:grid-cols-3">
-      <span className="col-span-1 font-ibold text-xl sm:text-2xl">Balance</span>
+      <span className="col-span-1 select-none font-ibold text-xl sm:text-2xl">
+        Balance
+      </span>
       <div className="col-span-2 flex gap-x-4 lg:flex-row-reverse">
         <span className="text-md font-iregular sm:text-lg">
           💰 {token_balance} tokens

components/Button/index.tsx

@@ -20,7 +20,7 @@ export default function Button({
   return (
     <button
       {...rest}
-      className={`m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75 ${
+      className={`m-auto block select-none rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75 ${
         rest.className || ""
       }`}
     >

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/Heading/index.tsx

@@ -7,7 +7,7 @@ export default function Heading({ text, children }: IHeadingProps) {
   return (
     <div className="border-b-solid mb-5 w-full grid-cols-2 overflow-hidden border-b-2 border-slate-400 pb-3">
       <div className="col-span-1 float-left flex h-full font-ibold">
-        <p className="inline-block align-middle font-ibold text-2xl font-bold text-white">
+        <p className="inline-block select-none align-middle font-ibold text-2xl font-bold text-white">
           {text}
         </p>
       </div>

components/Input/index.tsx

@@ -28,7 +28,7 @@ export function InputBase({
     <div>
       <label
         htmlFor={id}
-        className={`pl-6 font-iregular text-${fgColor} mt-5 block text-sm`}
+        className={`pl-6 font-iregular text-${fgColor} mt-5 block select-none text-sm`}
       >
         {text}
       </label>

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/Layout/Layout.tsx

@@ -64,7 +64,7 @@ export default function Layout({ title, description, children }: LayoutProps) {
       />
 
       {/* NAVBAR */}
-      <aside className="inset-y-0 hidden w-72 overflow-y-scroll border-r-2 bg-secondary px-8 py-5 lg:fixed lg:flex lg:flex-col">
+      <aside className="inset-y-0 hidden w-72 select-none overflow-y-scroll border-r-2 bg-secondary px-8 py-5 lg:fixed lg:flex lg:flex-col">
         <div className="flex flex-1">
           <nav className="mt-8 flex flex-col">
             <Link href="/" className="pb-8">
@@ -107,7 +107,7 @@ export default function Layout({ title, description, children }: LayoutProps) {
 
       {/* CONTENT */}
       <main className="w-full px-4 pb-6 pt-20 lg:ml-72 lg:px-20">
-        <h2 className="font-ibold text-5xl">{title}</h2>
+        <h2 className="select-none font-ibold text-5xl">{title}</h2>
         <p className="mt-2 font-iregular text-lg">{description}</p>
 
         {children}
@@ -160,7 +160,7 @@ function MobileNavbar({
             leaveTo="-translate-x-full"
             className="z-1 absolute h-full w-full justify-between bg-secondary p-8 "
           >
-            <aside className="flex h-full flex-col justify-between">
+            <aside className="flex h-full select-none flex-col justify-between">
               <div>
                 <div className="flex items-center justify-between">
                   <Link href="/" className="font-iregular text-quinary">

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
@@ -160,7 +160,7 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
           </div>
 
           <Disclosure.Panel className={`lg:hidden bg-${bgColor}`}>
-            <div className="relative z-50 min-h-screen object-cover px-2 pt-12">
+            <div className="relative z-50 min-h-screen select-none object-cover px-2 pt-12">
               {navigation.map((item) => (
                 <Disclosure.Button
                   key={item.slug}

components/Schedule/Day/index.tsx

@@ -52,7 +52,7 @@ export default function Day(props) {
   );
 
   const Ans = () => (
-    <div className="flex w-full justify-center">
+    <div className="flex w-full select-none justify-center">
       <div className="flex w-full justify-between text-4xl xs:text-5xl sm:text-7xl lg:text-8xl xl:mx-20 xl:text-7xl">
         <div className={`${styles.leftArrow} ${styles.arrowWrapper}`}>
           <button

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">

components/Select/index.tsx

@@ -34,7 +34,7 @@ export default function Select({
     <div>
       <label
         htmlFor={id}
-        className={`pl-6 font-iregular text-${fgColor} mt-5 block text-sm`}
+        className={`pl-6 font-iregular text-${fgColor} mt-5 block select-none text-sm`}
       >
         {text}
       </label>

layout/Attendee/Badgedex/Badgedex.tsx

@@ -49,13 +49,13 @@ function Badgedex() {
   return (
     <Layout title="BadgeDex" description="Explore all existing badges">
       <div className="border-slate-400 pt-10 text-white xl:flex xl:flex-auto">
-        <div className="m-auto flex flex-auto space-x-5">
+        <div className="m-auto flex flex-auto select-none space-x-5">
           <p className="mb-10 text-2xl font-bold xl:mb-0">Filter by</p>
           <BadgeFilter onChange={updateFilter} />
         </div>
         <div className="flex w-auto font-bold lg:w-1/2 xl:w-auto">
-          <div className="my-auto text-2xl">Show</div>
-          <div className="flex flex-row-reverse gap-x-8">
+          <div className="my-auto select-none text-2xl">Show</div>
+          <div className="flex select-none flex-row-reverse gap-x-8">
             <button
               className={`font-iregular bg-${
                 all ? "white" : "quinary"

layout/Attendee/Identifier/Identifier.tsx

@@ -12,7 +12,7 @@ function Identifier() {
       description="Scan this QR Code to identify yourself to the staff"
     >
       <div className="mt-12 grid-cols-2 overflow-hidden">
-        <div className="flex h-full justify-center overflow-hidden rounded-md lg:h-96">
+        <div className="flex h-full select-none justify-center overflow-hidden rounded-md lg:h-96">
           <QRCodeCanvas uuid={user.id} />
         </div>
       </div>

layout/Attendee/Inventory/Inventory.tsx

@@ -28,7 +28,7 @@ function Inventory() {
       title="Inventory"
       description="Check the prizes that you have accumulated throughout the week"
     >
-      <div className="my-5">
+      <div className="my-5 select-none">
         <button
           className={`font-iregular bg-${
             tab ? "quinary" : "white"

layout/Attendee/Profile/Profile.tsx

@@ -112,7 +112,7 @@ function Profile({ courses }) {
 
           <Form onSubmit={handleSubmitForm} id="profile-form">
             <div className="pl-6">
-              <div className="relative h-[220px] w-[220px] overflow-hidden rounded-full border-2 border-white hover:border-quinary">
+              <div className="relative h-[220px] w-[220px] select-none overflow-hidden rounded-full border-2 border-white hover:border-quinary">
                 {photoFileUrl == null ? (
                   <img
                     src="/images/mascot-head.png"
@@ -174,7 +174,7 @@ function Profile({ courses }) {
             />
 
             <button
-              className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+              className="inline-block h-auto select-none pl-6 pb-5 text-quinary underline"
               onClick={(e) => {
                 e.preventDefault();
                 onResetPassword();
@@ -251,7 +251,7 @@ function Profile({ courses }) {
           </div>
           <div className="mt-10 text-white">
             <Heading text="Upload CV" />
-            <CVInput cv={user?.cv} onSubmit={submitCV}></CVInput>
+            <CVInput cv={user?.cv} onSubmit={submitCV} />
           </div>
         </div>
       </div>

layout/Attendee/Profile/components/CVInput/index.tsx

@@ -36,7 +36,7 @@ export default function CVInput({ cv, onSubmit }) {
     <>
       {uploading ? (
         <form onSubmit={handleSubmit} id="cv-form" className="mt-2">
-          <label className="m-auto inline-block w-full cursor-pointer rounded-lg border-2 border-quinary text-center duration-500 hover:bg-quinary hover:opacity-50">
+          <label className="m-auto inline-block w-full cursor-pointer select-none rounded-lg border-2 border-quinary text-center duration-500 hover:bg-quinary hover:opacity-50">
             <BookOpenIcon className="m-auto h-12 w-12 flex-shrink-0" />
 
             <input
@@ -64,7 +64,7 @@ export default function CVInput({ cv, onSubmit }) {
                 &#10003;
               </span>
             </label>
-            <label className="ml-2 text-sm">
+            <label className="ml-2 select-none text-sm">
               By submitting your CV you are consenting to it being shared with
               the companies you visit during the event
             </label>

layout/Attendee/Profile/components/CheckpointTracker/index.tsx

@@ -15,7 +15,7 @@ function Step({ count, progress, checkpoints }) {
 export default function CheckpointTracker({ checkpoints, progress }) {
   const ml = (progress / checkpoints) * 100 + "%";
   return (
-    <div className="w-80 py-5">
+    <div className="w-80 select-none py-5">
       <div>
         <span className="font-iregular" style={{ marginLeft: ml }}>
           🏁

layout/Attendee/Store/components/Product/index.tsx

@@ -13,7 +13,7 @@ export default function Product({ name, id, image, price, enabled }) {
           <img
             src={image}
             alt={name}
-            className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+            className="h-full w-full select-none object-cover object-center lg:h-full lg:w-full"
           />
         </div>
       </div>

layout/Attendee/Wheel/Wheel.tsx

@@ -224,7 +224,7 @@ function WheelPage() {
 
           <div className="mt-10">
             <Heading text="Awards"></Heading>
-            <div className="mb-5 grid w-full grid-cols-6 pb-3">
+            <div className="mb-5 grid w-full select-none grid-cols-6 pb-3">
               <div className="text-center">
                 <p className="text-iregular pr-4">Image</p>
               </div>

layout/Attendee/Wheel/components/ListItem3Cols/index.tsx

@@ -15,14 +15,16 @@ export default function ListItem3Cols({
       <div className="text-left">
         <p className="font-ibold">{user}</p>
       </div>
-      <div className="justify-self-end">
+      <div className="select-none justify-self-end">
         <img src={prize.avatar} className="w-10" />
       </div>
       <div className="col-span-2 ml-4 text-left">
         <p className="text-iregular">{prize.name}</p>
       </div>
       <div className="text-right">
-        <p className="text-ibold pr-4 font-bold text-quinary">{when}</p>
+        <p className="text-ibold select-none pr-4 font-bold text-quinary">
+          {when}
+        </p>
       </div>
     </div>
   );

layout/Attendee/Wheel/components/ListItem4Cols/index.tsx

@@ -10,7 +10,7 @@ export default function ListItem4Cols({
   }
   return (
     <div className={`mb-5 w-full pb-3 ${border} grid grid-cols-6 items-center`}>
-      <div className="justify-self-center">
+      <div className="select-none justify-self-center">
         <img src={img} className="w-6" />
       </div>
       <div className="col-span-3 text-left">

layout/Attendee/Wheel/components/WheelMessage/index.tsx

@@ -8,7 +8,7 @@ export default function WheelMessage({ title, description, onExit }) {
       <div className="fixed inset-0 z-30 h-full w-screen bg-white opacity-70"></div>
       <Dialog
         open={true}
-        className="fixed top-1/2 left-1/2 z-50 -translate-y-2/4 -translate-x-2/4 overflow-y-auto rounded-3xl border-8 border-secondary bg-white p-10 px-12 drop-shadow-xl"
+        className="fixed top-1/2 left-1/2 z-50 -translate-y-2/4 -translate-x-2/4 select-none overflow-y-auto rounded-3xl border-8 border-secondary bg-white p-10 px-12 drop-shadow-xl"
         onClose={(_) => {}}
       >
         <Dialog.Overlay />

layout/Attendees/Attendees.tsx

@@ -36,7 +36,7 @@ function Profile() {
         <div className="col-span-1 float-left w-full xl:w-1/2">
           <Heading text="User Profile"></Heading>
           <div className="pl-6">
-            <div className="relative h-[220px] w-[220px] overflow-hidden rounded-full border-2 border-white hover:border-quinary">
+            <div className="relative h-[220px] w-[220px] select-none overflow-hidden rounded-full border-2 border-white hover:border-quinary">
               {attendee.avatar == null ? (
                 <img
                   src="/images/mascot-head.png"
@@ -75,7 +75,9 @@ function Profile() {
       <div className="mt-10">
         <Heading text="Badges"></Heading>
         <div className="mt-5 flex flex-auto space-x-5">
-          <p className="mb-10 text-2xl font-bold xl:mb-0">Filter by</p>
+          <p className="mb-10 select-none text-2xl font-bold xl:mb-0">
+            Filter by
+          </p>
           <BadgeFilter onChange={updateFilter} />
         </div>
         <div className="mt-8 grid grid-cols-1 gap-y-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">

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>