ref(frontend): update to absolute import

frontend/components/navigation/NavBarDashboard.js

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 import Image from "next/image";
 
-import logout from "../../pages/api/auth/Logout";
+import logout from "~/pages/api/auth/Logout";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import {
@@ -12,14 +12,14 @@ import {
 	faCoins,
 	faRightFromBracket,
 	faEnvelope,
-	faPlus, 
-	faAngleDown
+	faPlus,
+	faAngleDown,
 } from "@fortawesome/free-solid-svg-icons";
 import { faSlack, faGithub } from "@fortawesome/free-brands-svg-icons";
 import { Menu, Transition } from "@headlessui/react";
-import getUser from "../../pages/api/user/getUser";
-import getOrganizations from "../../pages/api/organization/getOrgs";
-import getOrganization from "../../pages/api/organization/GetOrg";
+import getUser from "~/pages/api/user/getUser";
+import getOrganizations from "~/pages/api/organization/getOrgs";
+import getOrganization from "~/pages/api/organization/GetOrg";
 import guidGenerator from "../utilities/randomId";
 
 const supportOptions = [
@@ -87,7 +87,7 @@ export default function Navbar({ onButtonPressed }) {
 			</div>
 			<div className="relative flex justify-start items-center mx-2 z-40">
 				<Menu as="div" className="relative inline-block text-left">
-					<div className="mr-4"> 
+					<div className="mr-4">
 						<Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
 							<FontAwesomeIcon
 								className="text-xl"
@@ -128,7 +128,10 @@ export default function Navbar({ onButtonPressed }) {
 					<div>
 						<Menu.Button className="inline-flex w-full justify-center rounded-md pr-2 pl-2 py-2 text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
 							{user?.firstName} {user?.lastName}
-							<FontAwesomeIcon icon={faAngleDown} className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"/>
+							<FontAwesomeIcon
+								icon={faAngleDown}
+								className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"
+							/>
 						</Menu.Button>
 					</div>
 					<Transition
@@ -145,13 +148,15 @@ export default function Navbar({ onButtonPressed }) {
 								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
 									SIGNED IN AS
 								</div>
-								<div 
+								<div
 									onClick={() =>
 										router.push(
-											"/settings/personal/" + router.query.id
+											"/settings/personal/" +
+												router.query.id
 										)
 									}
-									className="flex flex-row items-center px-1 mx-1 my-1 hover:bg-white/5 cursor-pointer rounded-md">
+									className="flex flex-row items-center px-1 mx-1 my-1 hover:bg-white/5 cursor-pointer rounded-md"
+								>
 									<div className="bg-white/10 h-8 w-9 rounded-full flex items-center justify-center text-gray-300">
 										{user?.firstName?.charAt(0)}
 									</div>
@@ -159,7 +164,8 @@ export default function Navbar({ onButtonPressed }) {
 										<div>
 											<p className="text-gray-300 px-2 pt-1 text-sm">
 												{" "}
-												{user?.firstName} {user?.lastName}
+												{user?.firstName}{" "}
+												{user?.lastName}
 											</p>
 											<p className="text-gray-400 px-2 pb-1 text-xs">
 												{" "}
@@ -235,7 +241,10 @@ export default function Navbar({ onButtonPressed }) {
 										className="relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-primary/100 duration-200 hover:text-black hover:font-semibold mt-1"
 									>
 										<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
-											<FontAwesomeIcon icon={faPlus} className="ml-1" />
+											<FontAwesomeIcon
+												icon={faPlus}
+												className="ml-1"
+											/>
 										</span>
 										<div className="text-sm ml-1">
 											Invite Members
@@ -243,43 +252,45 @@ export default function Navbar({ onButtonPressed }) {
 									</div>
 								</button>
 							</div>
-							{orgs?.length > 1 && <div className="px-1 pt-1">
-								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
-									OTHER ORGANIZATIONS
-								</div>
-								<div className="flex flex-col items-start px-1 mt-3 mb-2">
-									{orgs
-										.filter(
-											(org) =>
-												org._id !=
-												localStorage.getItem(
-													"orgData.id"
-												)
-										)
-										.map((org) => (
-											<div
-												key={guidGenerator()}
-												onClick={() => {
-													localStorage.setItem(
-														"orgData.id",
-														org._id
-													);
-													router.reload();
-												}}
-												className="flex flex-row justify-start items-center hover:bg-white/5 w-full p-1.5 cursor-pointer rounded-md"
-											>
-												<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
-													{org.name.charAt(0)}
+							{orgs?.length > 1 && (
+								<div className="px-1 pt-1">
+									<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
+										OTHER ORGANIZATIONS
+									</div>
+									<div className="flex flex-col items-start px-1 mt-3 mb-2">
+										{orgs
+											.filter(
+												(org) =>
+													org._id !=
+													localStorage.getItem(
+														"orgData.id"
+													)
+											)
+											.map((org) => (
+												<div
+													key={guidGenerator()}
+													onClick={() => {
+														localStorage.setItem(
+															"orgData.id",
+															org._id
+														);
+														router.reload();
+													}}
+													className="flex flex-row justify-start items-center hover:bg-white/5 w-full p-1.5 cursor-pointer rounded-md"
+												>
+													<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
+														{org.name.charAt(0)}
+													</div>
+													<div className="flex items-center justify-between w-full">
+														<p className="text-gray-300 px-2 text-sm">
+															{org.name}
+														</p>
+													</div>
 												</div>
-												<div className="flex items-center justify-between w-full">
-													<p className="text-gray-300 px-2 text-sm">
-														{org.name}
-													</p>
-												</div>
-											</div>
-										))}
+											))}
+									</div>
 								</div>
-							</div>}
+							)}
 							<div className="px-1 py-1">
 								<Menu.Item>
 									{({ active }) => (

frontend/components/navigation/NavHeader.js

@@ -1,18 +1,21 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleRight, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import {
+	faAngleRight,
+	faQuestionCircle,
+} from "@fortawesome/free-solid-svg-icons";
 import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import getOrganization from "../../pages/api/organization/GetOrg";
-import getWorkspaceInfo from "../../pages/api/workspace/getWorkspaceInfo";
+import getOrganization from "~/pages/api/organization/GetOrg";
+import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";
 import { useRouter } from "next/router";
 
-export default function NavHeader({ pageName, isProjectRelated}) {
-    const [orgName, setOrgName] = useState("");
-    const [workspaceName, setWorkspaceName] = useState("");
-    const router = useRouter();
+export default function NavHeader({ pageName, isProjectRelated }) {
+	const [orgName, setOrgName] = useState("");
+	const [workspaceName, setWorkspaceName] = useState("");
+	const router = useRouter();
 
-    useEffect(async () => {
+	useEffect(async () => {
 		let org = await getOrganization({
 			orgId: localStorage.getItem("orgData.id"),
 		});
@@ -21,27 +24,30 @@ export default function NavHeader({ pageName, isProjectRelated}) {
 			workspaceId: router.query.id,
 		});
 		setWorkspaceName(workspace.name);
-    }, []);
+	}, []);
 
 	return (
-        <div className="pt-20 ml-6 flex flex-row items-center">
-            <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
-                {orgName?.charAt(0)}
-            </div>
-            <div className="text-primary text-sm font-semibold">
-                {orgName}
-            </div>
-            {isProjectRelated && <>
-                <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-                <div className="font-semibold text-primary text-sm">
-                    {workspaceName}
-                </div>
-            </>
-            }
-            <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-            <div className="text-gray-400 text-sm">
-                {pageName}
-            </div>
-        </div>
+		<div className="pt-20 ml-6 flex flex-row items-center">
+			<div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
+				{orgName?.charAt(0)}
+			</div>
+			<div className="text-primary text-sm font-semibold">{orgName}</div>
+			{isProjectRelated && (
+				<>
+					<FontAwesomeIcon
+						icon={faAngleRight}
+						className="ml-3 text-sm text-gray-400 mr-3"
+					/>
+					<div className="font-semibold text-primary text-sm">
+						{workspaceName}
+					</div>
+				</>
+			)}
+			<FontAwesomeIcon
+				icon={faAngleRight}
+				className="ml-3 text-sm text-gray-400 mr-3"
+			/>
+			<div className="text-gray-400 text-sm">{pageName}</div>
+		</div>
 	);
 }