Solved a small display issue

src/components/High/TicketSubmission.tsx

@@ -1,8 +1,8 @@
-import { Ticket, TicketType, TicketTypeLabel } from "@/interfaces/ticket";
+import {Ticket, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import axios from "axios";
-import { useState } from "react";
+import {useState} from "react";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import Button from "../Low/Button";
 import Input from "../Low/Input";
@@ -14,15 +14,14 @@ interface Props {
 	onClose: () => void;
 }
 
-export default function TicketSubmission({ user, page, onClose }: Props) {
+export default function TicketSubmission({user, page, onClose}: Props) {
 	const [subject, setSubject] = useState("");
 	const [type, setType] = useState<TicketType>();
 	const [description, setDescription] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
 	const submit = () => {
-    if (!type)
+		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
-      return toast.error("Please choose a type!", { toastId: "missing-type" });
 		if (subject.trim() === "")
 			return toast.error("Please input a subject!", {
 				toastId: "missing-subject",
@@ -54,10 +53,7 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
 		axios
 			.post(`/api/tickets`, ticket)
 			.then(() => {
-        toast.success(
+				toast.success(`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`, {toastId: "submitted"});
-          `Your ticket has been submitted! You will be contacted by e-mail for further discussion.`,
-          { toastId: "submitted" },
-        );
 				onClose();
 			})
 			.catch((e) => {
@@ -71,37 +67,20 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
 
 	return (
 		<form className="flex flex-col gap-4 pt-8">
-      <Input
+			<Input label="Subject" type="text" name="subject" placeholder="Subject..." onChange={(e) => setSubject(e)} />
-        label="Subject"
-        type="text"
-        name="subject"
-        placeholder="Subject..."
-        onChange={(e) => setSubject(e)}
-      />
 			<div className="-md:flex-col flex w-full items-center gap-4">
 				<div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
+					<label className="text-mti-gray-dim text-base font-normal">Type</label>
-            Type
-          </label>
 					<Select
 						options={Object.keys(TicketTypeLabel).map((x) => ({
 							value: x,
 							label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
 						}))}
-            onChange={(value) =>
+						onChange={(value) => setType((value?.value as TicketType) ?? undefined)}
-              setType((value?.value as TicketType) ?? undefined)
-            }
 						placeholder="Type..."
 					/>
 				</div>
-        <Input
+				<Input label="Reporter" type="text" name="reporter" onChange={() => null} value={`${user.name} - ${user.email}`} disabled />
-          label="Reporter"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={`${user.name} - ${user.email}`}
-          disabled
-        />
 			</div>
 			<textarea
 				className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
@@ -110,22 +89,10 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
 				spellCheck
 			/>
 			<div className="mt-2 flex w-full items-center justify-end gap-4">
-        <Button
+				<Button type="button" color="red" className="w-full max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
-          type="button"
-          color="red"
-          className="w-full max-w-[200px]"
-          variant="outline"
-          onClick={onClose}
-          isLoading={isLoading}
-        >
 					Cancel
 				</Button>
-        <Button
+				<Button type="button" className="w-full max-w-[200px]" isLoading={isLoading} onClick={submit}>
-          type="button"
-          className="w-full max-w-[200px]"
-          isLoading={isLoading}
-          onClick={submit}
-        >
 					Submit
 				</Button>
 			</div>

src/components/Modal.tsx

@@ -11,7 +11,7 @@ interface Props {
 export default function Modal({isOpen, title, onClose, children}: Props) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-10" onClose={onClose}>
+			<Dialog as="div" className="relative z-[200]" onClose={onClose}>
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"

src/components/Navbar.tsx

@@ -1,17 +1,17 @@
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
-import { preventNavigation } from "@/utils/navigation.disabled";
+import {preventNavigation} from "@/utils/navigation.disabled";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
-import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
+import {BsList, BsQuestionCircle, BsQuestionCircleFill} from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
-import { Type } from "@/interfaces/user";
+import {Type} from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
-import { isUserFromCorporate } from "@/utils/groups";
+import {isUserFromCorporate} from "@/utils/groups";
 import Button from "./Low/Button";
 import Modal from "./Modal";
 import Input from "./Low/Input";
@@ -26,13 +26,7 @@ interface Props {
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({
+export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
-  user,
-  path,
-  navDisabled = false,
-  focusMode = false,
-  onFocusLayerMouseEnter,
-}: Props) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 	const [isTicketOpen, setIsTicketOpen] = useState(false);
@@ -43,12 +37,9 @@ export default function Navbar({
 		const momentDate = moment(date);
 		const today = moment(new Date());
 
-    if (today.add(1, "days").isAfter(momentDate))
+		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-      return "!bg-mti-red-ultralight border-mti-red-light";
+		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-    if (today.add(3, "days").isAfter(momentDate))
+		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-      return "!bg-mti-rose-ultralight border-mti-rose-light";
-    if (today.add(7, "days").isAfter(momentDate))
-      return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};
 
 	const showExpirationDate = () => {
@@ -61,40 +52,19 @@ export default function Navbar({
 	};
 
 	useEffect(() => {
-    if (user.type !== "student" && user.type !== "teacher")
+		if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
-      setDisablePaymentPage(false);
+		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
-    isUserFromCorporate(user.id).then((result) =>
-      setDisablePaymentPage(result),
-    );
 	}, [user]);
 
 	return (
 		<>
-      <Modal
+			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
-        isOpen={isTicketOpen}
+				<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
-        onClose={() => setIsTicketOpen(false)}
-        title="Submit a ticket"
-      >
-        <TicketSubmission
-          user={user}
-          page={window.location.href}
-          onClose={() => setIsTicketOpen(false)}
-        />
 			</Modal>
 
-      {user && (
+			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
-        <MobileMenu
-          path={path}
-          isOpen={isMenuOpen}
-          onClose={() => setIsMenuOpen(false)}
-          user={user}
-        />
-      )}
 			<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
-        <Link
+				<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
-          href={disableNavigation ? "" : "/"}
-          className=" flex items-center gap-8 md:px-8"
-        >
 					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
 					<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
 				</Link>
@@ -106,8 +76,7 @@ export default function Navbar({
 							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
 						)}
 						data-tip="Submit a help/feedback ticket"
-            onClick={() => setIsTicketOpen(true)}
+						onClick={() => setIsTicketOpen(true)}>
-          >
 						<BsQuestionCircleFill />
 					</button>
 
@@ -122,39 +91,23 @@ export default function Navbar({
 									? "bg-mti-green-ultralight border-mti-green-light"
 									: expirationDateColor(user.subscriptionExpirationDate),
 								"border-mti-gray-platinum bg-white",
-              )}
+							)}>
-            >
 							{!user.subscriptionExpirationDate && "Unlimited"}
-              {user.subscriptionExpirationDate &&
+							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
 						</Link>
 					)}
-          <Link
+					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
-            href={disableNavigation ? "" : "/profile"}
+						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
-            className="-md:hidden flex items-center justify-end gap-6"
-          >
-            <img
-              src={user.profilePicture}
-              alt={user.name}
-              className="h-10 w-10 rounded-full object-cover"
-            />
 						<span className="-md:hidden text-right">
-              {user.type === "corporate"
+							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-                ? `${user.corporateInformation?.companyInformation.name} |`
+							{USER_TYPE_LABELS[user.type]}
-                : ""}{" "}
-              {user.name} | {USER_TYPE_LABELS[user.type]}
 						</span>
 					</Link>
-          <div
+					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
-            className="cursor-pointer md:hidden"
-            onClick={() => setIsMenuOpen(true)}
-          >
 						<BsList className="text-mti-purple-light h-8 w-8" />
 					</div>
 				</div>
-        {focusMode && (
+				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
-        )}
 			</header>
 		</>
 	);