akirachix · hunterachieng · Oct 7, 2025 · Oct 7, 2025
diff --git a/tesfa/src/app/favicon.ico b/tesfa/src/app/favicon.ico
diff --git a/tesfa/src/app/globals.css b/tesfa/src/app/globals.css
@@ -93,35 +93,25 @@ input:focus {
     transform: rotate(360deg);
   }
 }
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+}
 .dashed-spinner {
   position: absolute;
   width: 120px;
   height: 120px;
   border: 4px dashed #FFC321;
   border-radius: 50%;
   animation: dashed-spin 3s linear infinite;
-  top: 45%;
-  left: 46.8%;
-  transform: translate(-50%, -50%);
+  margin-top: 27px;
 }
 .svg-logo {
-  transform-origin: center;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-@media screen and (min-width: 1025px) and (max-width: 1400px) {
-  .dashed-spinner {
-    top: 44%;
-    left: 45.5%;
-    transform: translate(-50%, -50%);
-  }
-}
-@media screen and (width: 1024px) {
-  .dashed-spinner {
-    top: 42%;
-    left: 44%;
-    transform: translate(-50%, -50%);
-  }
+  transform-origin: center;
+  animation: rotate-logo 5s linear infinite, neon-glow 2s infinite alternate;
 }
diff --git a/tesfa/src/app/layout.tsx b/tesfa/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
   return (
     <html lang="en"  className={`${josefinSans.variable}`}>
        <head>
-        <link rel="icon" href="/tesfalogo.png" />
+        <link rel="icon" href="/favicon.ico" />
       </head>
       <body >
         <main >{children}</main>

diff --git a/tesfa/src/app/sharedComponents/SideBar/index.tsx b/tesfa/src/app/sharedComponents/SideBar/index.tsx
@@ -1,12 +1,11 @@
 "use client";
-import React from 'react';
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
 import { useRouter, usePathname } from "next/navigation";
 import { RiSidebarFoldLine } from "react-icons/ri";
 import { HiSquares2X2 } from "react-icons/hi2";
 import { LuClock3, LuClipboardList, LuUser, LuLogOut } from "react-icons/lu";
 
-
 interface SidebarItemProps {
   icon: React.ReactNode;
   label: string;
@@ -34,44 +33,73 @@ const SidebarItem = ({ icon, label, isOpen, active, onClick }: SidebarItemProps)
   );
 };
 
+const LogoutConfirmModal = ({
+  onCancel,
+  onConfirm,
+}: {
+  onCancel: () => void;
+  onConfirm: () => void;
+}) => (
+  <div className="fixed inset-0 bg-black opacity-85 flex items-center justify-center z-[1000]">
+    <div className="bg-blue-50 p-10 rounded-lg shadow-lg max-w-xs w-full">
+      <h2 className="text-lg font-bold mb-2 text-[#00363E]">Confirm Logout</h2>
+      <p className="mb-4 text-gray-700">Are you sure you want to logout?</p>
+      <div className="flex justify-end gap-4">
+        <button
+          onClick={onCancel}
+          className="px-6 py-2 cursor-pointer rounded-2xl  bg-gray-200 hover:bg-gray-300 text-gray-800"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onConfirm}
+          className="px-6 py-2 cursor-pointer rounded-2xl bg-red-600 hover:bg-red-700 text-white"
+        >
+          Logout
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
 const Sidebar = () => {
-  const [isOpen, setIsOpen] = useState(false); 
-  const [isMobileOpen, setIsMobileOpen] = useState(false); 
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
   const router = useRouter();
   const pathname = usePathname();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleResize = () => {
-      if (window.innerWidth < 1024) { 
-        setIsOpen(false); 
+      if (window.innerWidth < 1024) {
+        setIsOpen(false);
       }
     };
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       if (window.innerWidth >= 1024) {
-        setIsOpen(false); 
+        setIsOpen(false);
       } else {
-        setIsOpen(false); 
+        setIsOpen(false);
       }
     }
 
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   const handleNavigation = (path: string) => {
     router.push(path);
-    if (window.innerWidth < 1024) { 
+    if (window.innerWidth < 1024) {
       setIsMobileOpen(false);
     }
   };
 
-const handleLogoutClick = () => setShowLogoutConfirm(true);
+  const handleLogoutClick = () => setShowLogoutConfirm(true);
 
   const handleLogoutConfirm = () => {
-    localStorage.removeItem("authToken"); 
-    router.push("/onboarding/login"); 
+    localStorage.removeItem("authToken");
+    router.push("/onboarding/login");
     setShowLogoutConfirm(false);
   };
 
@@ -102,7 +130,6 @@ const handleLogoutClick = () => setShowLogoutConfirm(true);
         lg:static lg:flex
         ${isOpen ? "lg:w-60 lg:py-6 lg:px-4" : "lg:w-16 lg:px-2 lg:py-6"}`}
       >
-
         <div>
           <div className="flex justify-between mb-20">
             <button
@@ -122,36 +149,11 @@ const handleLogoutClick = () => setShowLogoutConfirm(true);
             <div
               className={`transition-opacity duration-300 ${isOpen || isMobileOpen ? "opacity-100" : "opacity-0"}`}
             >
-              <div
-                className={`${isOpen || isMobileOpen ? "" : "hidden"}`}
-              >
-              <img src={"/Images/tesfaLogo.png"} alt="Tesfa Logo"></img>
+              <div className={`${isOpen || isMobileOpen ? "" : "hidden"}`}>
+                <img src={"/Images/tesfaLogo.png"} alt="Tesfa Logo"></img>
               </div>
             </div>
           </div>
-              {showLogoutConfirm && (
-        <div className="fixed inset-0 bg-black opacity-85 flex items-center justify-center z-50">
-          <div className="bg-blue-50 p-10 rounded-lg shadow-lg max-w-xs w-full">
-            <h2 className="text-lg font-bold mb-2 text-[#00363E]">Confirm Logout</h2>
-            <p className="mb-4 text-gray-700">Are you sure you want to logout?</p>
-            <div className="flex justify-end gap-4">
-              <button
-                onClick={handleLogoutCancel}
-                className="px-6 py-2 cursor-pointer rounded-2xl  bg-gray-200 hover:bg-gray-300 text-gray-800"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleLogoutConfirm}
-                className="px-6 py-2 cursor-pointer rounded-2xl bg-red-600 hover:bg-red-700 text-white"
-              >
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
           <nav className="flex flex-col gap-10">
             <SidebarItem
               icon={<HiSquares2X2 size={30} />}
@@ -177,7 +179,6 @@ const handleLogoutClick = () => setShowLogoutConfirm(true);
               path="/kanban"
               onClick={() => handleNavigation("/kanban")}
             />
-
             <SidebarItem
               icon={<LuUser size={30} />}
               label="Profile"
@@ -188,17 +189,25 @@ const handleLogoutClick = () => setShowLogoutConfirm(true);
             />
           </nav>
         </div>
-
         <div className="mb-4">
           <SidebarItem
             icon={<LuLogOut size={30} />}
             label="Logout"
             isOpen={isOpen || isMobileOpen}
             active={pathname === ""}
-              onClick={handleLogoutClick}
+            onClick={handleLogoutClick}
           />
         </div>
       </div>
+      {showLogoutConfirm &&
+        typeof window !== "undefined" &&
+        ReactDOM.createPortal(
+          <LogoutConfirmModal
+            onCancel={handleLogoutCancel}
+            onConfirm={handleLogoutConfirm}
+          />,
+          document.body
+        )}
     </>
   );
 };