Landing animations

.eslintrc.json

@@ -3,17 +3,15 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["plugin:react/recommended", "google", "prettier"],
+  "extends": ["next/core-web-vitals", "google", "prettier"],
   "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "plugins": ["react"],
   "rules": {
-    "require-jsdoc": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off"
+    "require-jsdoc": 0
   },
   "settings": {
     "react": {

src/app/api/dashboard/[type]/route.js

@@ -14,7 +14,7 @@ import {
 } from "firebase/firestore";
 import { authenticate } from "@/utils/auth";
 import { AUTH, ATTRIBUTES } from "@/data/dynamic/admin/Dashboard";
-import EmailService from "@/utils/email";
+import send from "@/utils/email";
 const types = new Set([
   "admins",
   "committees",
@@ -52,7 +52,7 @@ export async function POST(req, { params }) {
         [`${params.type}.0`]: increment(1),
       });
 
-      await EmailService.send({
+      await send({
         email: user.email,
         id: process.env.EMAIL_CONFIRMATION_TEMPLATE,
         name: user.name,
@@ -137,7 +137,7 @@ export async function PUT(req, { params }) {
           await updateDoc(doc(db, "users", object.uid), {
             [`roles.${params.type}`]: status,
           });
-          await EmailService.send({
+          await send({
             email: object.email,
             id:
               status === 1

src/app/globals.css

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .animation-delay-inherit {
+    animation-delay: inherit;
+  }
+
+  /** outer class for butterfly */
+  .butterfly {
+    display: flex;
+    width: fit-content;
+    transform-origin: center;
+    transform: perspective(700px) rotateX(55deg) rotateY(67deg) rotateZ(316deg);
+    transform-style: preserve-3d;
+  }
+
+  .butterfly-wing {
+    transform-style: preserve-3d;
+    transform-origin: center right;
+  }
+
+  .flip-x {
+    transform: scaleX(-1);
+    transform-style: preserve-3d;
+  }
+}

src/app/user/join/[teamID]/page.js

@@ -2,37 +2,41 @@
 import { useState, useEffect } from "react";
 import Button from "@/components/dynamic/Button";
 import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
+import toaster from "@/utils/toaster";
 import { useSession } from "next-auth/react";
 import Fault from "@/utils/error";
 import { api } from "@/utils/api";
 
-export default function page({ params }) {
+export default function Page({ params }) {
   const [team, setTeam] = useState(null);
   const router = useRouter();
   const { update: sessionUpdate } = useSession();
+
+  const { teamID } = params;
+
   const handleJoin = () => {
     api({
       method: "PUT",
       url: "/api/members",
-      body: { team: params.teamID },
+      body: { team: teamID },
     }).then((response) => {
       if (response.message !== "OK") {
-        toast(`❌ ${response.message}`);
+        toaster(`${response.message}`, "error");
         return;
       }
-      toast("✅ Successfully joined team!");
+      toaster("Successfully joined team!", "success");
       sessionUpdate({
-        team: params.teamID,
+        team: teamID,
       });
       router.push("/user");
     });
   };
+
   useEffect(() => {
-    if (params.teamID) {
+    if (teamID) {
       api({
         method: "GET",
-        url: `/api/team?teamid=${params.teamID}`,
+        url: `/api/team?teamid=${teamID}`,
       }).then((response) => {
         if (response.message === "OK") {
           setTeam(response.items);
@@ -51,7 +55,7 @@ export default function page({ params }) {
         }
       });
     }
-  }, []);
+  }, [teamID]);
 
   return (
     <div>

src/components/dynamic/Input.jsx

@@ -9,6 +9,7 @@ const Input = ({
   editable = true,
   maxLength,
   required,
+  regex,
 }) => {
   return (
     <div className="flex flex-col w-full">
@@ -24,6 +25,11 @@ const Input = ({
         placeholder={placeholder}
         value={value}
         maxLength={maxLength}
+        onBlur={(e) => {
+          if (regex && !regex.test(e.target.value)) {
+            setUser({ ...user, [name]: "Invalid " + title });
+          }
+        }}
         onChange={(e) => setUser({ ...user, [name]: e.target.value })}
         data-cy={`${name}-input`}
       />

src/components/dynamic/admin/dashboards/Admins.jsx

@@ -1,5 +1,10 @@
 "use client";
-import { STATUSES, TAGS, COLUMNS } from "@/data/dynamic/admin/Admins.js";
+import {
+  STATUSES,
+  TAGS,
+  COLUMNS,
+  DROPDOWN,
+} from "@/data/dynamic/admin/Admins.js";
 import Table from "./dashboard/Dashboard";
 
 const Admin = () => {
@@ -11,6 +16,7 @@ const Admin = () => {
         tags={TAGS}
         page="admins"
         statuses={STATUSES}
+        Dropdown={DROPDOWN}
         empty="No Admins Available"
       />
     </div>

src/components/dynamic/admin/dashboards/Committees.jsx

@@ -1,5 +1,10 @@
 "use client";
-import { STATUSES, TAGS, COLUMNS } from "@/data/dynamic/admin/Committees";
+import {
+  STATUSES,
+  TAGS,
+  COLUMNS,
+  DROPDOWN,
+} from "@/data/dynamic/admin/Committees";
 import Table from "./dashboard/Dashboard";
 
 const Committee = () => {
@@ -11,6 +16,7 @@ const Committee = () => {
         tags={TAGS}
         page="committees"
         statuses={STATUSES}
+        Dropdown={DROPDOWN}
         empty="No Committees Available"
       />
     </div>

src/components/dynamic/admin/dashboards/dashboard/Modal.jsx

@@ -1,4 +1,5 @@
 import { FaTimes } from "react-icons/fa";
+import Image from "next/image";
 
 const Modal = ({ data, setModal }) => {
   return (
@@ -11,7 +12,12 @@ const Modal = ({ data, setModal }) => {
         />
       </div>
       <div className="bg-white px-3 rounded-b-xl py-2 border-x-2 border-b-2 border-hackathon-darkgray h-full w-full flex justify-center">
-        <img className="h-full" src={data.src} />
+        <Image
+          fill={true}
+          className="h-full"
+          src={data.src}
+          alt="Photo of the Judge"
+        />
       </div>
     </div>
   );