feat: implement daisy-ui in sidebar

apps/OpenSign/src/components/FullScreenButton.js

@@ -67,7 +67,7 @@ const FullScreenButton = () => {
     <div className="flex items-center">
       <button
         onClick={toggleFullScreen}
-        className="text-black p-2 text-sm focus:outline-none"
+        className="text-base-content p-2 text-sm focus:outline-none"
       >
         {isFullScreen ? (
           <i className="fa-solid fa-compress"></i>

apps/OpenSign/src/components/Header.js

@@ -95,7 +95,7 @@ const Header = ({ showSidebar }) => {
           className="opbtn opbtn-square opbtn-ghost focus:outline-none"
           onClick={showSidebar}
         >
-          <i className="fa-solid fa-bars text-xl text-black"></i>
+          <i className="fa-solid fa-bars text-xl text-base-content"></i>
         </button>
       </div>
       <div className="flex-1 ml-2">
@@ -119,7 +119,7 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {isPro && (
-          <div className="w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
             PRO
           </div>
         )}
@@ -139,24 +139,25 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {width >= 768 && (
-          <div onClick={toggleDropdown} className="cursor-pointer text-sm">
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer text-base-content text-sm"
+          >
             {username && username}
           </div>
         )}
         <div className="opdropdown opdropdown-end" id="profile-menu">
           <div tabIndex={0} role="button" className="opbtn opbtn-ghost">
-            <div className="">
-              <i
-                tabIndex={0}
-                role="button"
-                onClick={toggleDropdown}
-                className="fa-solid fa-angle-down"
-              ></i>
-            </div>
+            <i
+              tabIndex={0}
+              role="button"
+              onClick={toggleDropdown}
+              className="fa-solid fa-angle-down text-base-content"
+            ></i>
           </div>
           <ul
             tabIndex={0}
-            className="mt-3 z-[1] p-2 shadow opmenu opmenu-sm opdropdown-content bg-base-100 rounded-box w-52"
+            className="mt-3 z-[1] p-2 shadow opmenu opmenu-sm opdropdown-content text-base-content bg-base-100 rounded-box w-52"
           >
             <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
               <span>

apps/OpenSign/src/components/sidebar/Menu.js

@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
         }
         className={({ isActive }) =>
           `${
-            isActive ? "text-[#0056b3] bg-[#eef1f5]" : ""
-          } mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer`
+            isActive ? "bg-base-300" : ""
+          } mx-auto p-3 lg:p-4 flex items-center text-base-content hover:text-base-content hover:bg-base-300 cursor-pointer hover:no-underline`
         }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}

apps/OpenSign/src/components/sidebar/Sidebar.js

@@ -9,6 +9,7 @@ import dp from "../../assets/images/dp.png";
 
 const Sidebar = ({ isOpen, closeSidebar }) => {
   const [menuList, setmenuList] = useState([]);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
   const tenantname = localStorage.getItem("TenantName");
@@ -33,9 +34,17 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     }
   };
 
+  const toggleSubmenu = (title) => {
+    setSubmenuOpen({ [title]: !submenuOpen[title] });
+  };
+
+  const handleMenuItem = () => {
+    closeSidebar();
+    setSubmenuOpen({});
+  };
   return (
     <aside
-      className={`absolute md:relative bg-white text-[#444] h-screen overflow-y-auto transition-all z-40 hide-scrollbar
+      className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-40 hide-scrollbar
      ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
@@ -65,19 +74,21 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
                 key={item.title}
                 item={item}
                 isOpen={isOpen}
-                closeSidebar={closeSidebar}
+                closeSidebar={handleMenuItem}
               />
             ) : (
               <Submenu
                 key={item.title}
                 item={item}
                 closeSidebar={closeSidebar}
+                toggleSubmenu={toggleSubmenu}
+                submenuOpen={submenuOpen}
               />
             )
           )}
         </ul>
       </nav>
-      <footer className="mt-4 flex justify-center items-center text-[25px] text-black gap-3">
+      <footer className="mt-4 flex justify-center items-center text-[25px] text-base-content gap-3">
         <SocialMedia />
       </footer>
     </aside>

apps/OpenSign/src/components/sidebar/SubMenu.js

@@ -1,19 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { NavLink } from "react-router-dom";
 
-const Submenu = ({ item, closeSidebar }) => {
-  const [submenuOpen, setSubmenuOpen] = useState(false);
+const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
   const { title, icon, children } = item;
-
-  const toggleSubmenu = () => {
-    setSubmenuOpen(!submenuOpen);
-  };
-
   return (
     <li role="none">
       <button
-        onClick={toggleSubmenu}
-        className="w-full flex items-center text-left text-[#444] p-3 lg:p-4 hover:bg-[#eef1f5] focus:outline-none focus:text-[#0056b3] focus:bg-[#eef1f5]"
+        onClick={() => toggleSubmenu(item.title)}
+        className="w-full flex items-center text-left text-base-content p-3 lg:p-4 hover:bg-base-300 focus:outline-none hover:text-base-content "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -23,13 +17,15 @@ const Submenu = ({ item, closeSidebar }) => {
           <span className="ml-3 lg:ml-4">{title}</span>
           <i
             className={`${
-              submenuOpen ? "fa-solid fa-angle-down" : "fa-solid fa-angle-right"
+              submenuOpen[item.title]
+                ? "fa-solid fa-angle-down"
+                : "fa-solid fa-angle-right"
             }`}
             aria-hidden="true"
           ></i>
         </div>
       </button>
-      {submenuOpen && (
+      {submenuOpen[item.title] && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
             <li key={childItem.title} role="none">
@@ -39,7 +35,11 @@ const Submenu = ({ item, closeSidebar }) => {
                     ? `/${childItem.pageType}/${childItem.objectId}`
                     : `/${childItem.objectId}`
                 }
-                className="block pl-6 md:pl-8 py-2 text-sm text-gray-700 hover:bg-blue-500 hover:text-white focus:text-[#0056b3] focus:bg-[#eef1f5] cursor-pointer"
+                className={({ isActive }) =>
+                  `${
+                    isActive ? "bg-base-300" : ""
+                  } mx-auto text-base-content hover:text-base-content hover:bg-base-300 block pl-6 md:pl-8 py-2 text-sm cursor-pointer hover:no-underline`
+                }
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}

apps/OpenSign/src/pages/Form.js

@@ -648,13 +648,13 @@ const Forms = (props) => {
               </label>
               {fileupload.length > 0 ? (
                 <div className="flex gap-2 justify-center items-center">
-                  <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
+                  <div className="flex justify-between items-center opinput opinput-bordered w-full opinput-sm text-x text-[13px]">
                     <div className="break-all">
                       file selected : {getFileName(fileupload)}
                     </div>
                     <div
                       onClick={() => setFileUpload("")}
-                      className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
                     >
                       <i className="fa-solid fa-xmark"></i>
                     </div>