refactor: provide classname for applogo in header

fix: quicksend screen get black out while sending document

apps/OpenSign/src/components/BulkSendUi.jsx

@@ -16,6 +16,7 @@ const BulkSendUi = (props) => {
   const [isDisableBulkSend, setIsDisableBulkSend] = useState(false);
   const [isLoader, setIsLoader] = useState(false);
   const [signers, setSigners] = useState([]);
+  const [emails, setEmails] = useState([]);
   useEffect(() => {
     signatureExist();
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/OpenSign/src/components/Header.jsx

@@ -21,6 +21,7 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
   const image = localStorage.getItem("profileImg") || dp;
   const [isOpen, setIsOpen] = useState(false);
   const [applogo, setAppLogo] = useState("");
+  const [isDarkTheme, setIsDarkTheme] = useState();
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -88,22 +89,15 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
 
 
   useEffect(() => {
-    const updateLogoForTheme = () => {
-      const isDarkMode =
+    const updateThemeStatus = () => {
+      const isDarkTheme =
         document.documentElement.getAttribute("data-theme") === "opensigndark";
-      const logo = isDarkMode
-        ? "/static/js/assets/images/logo-dark.png" // Path to the dark mode logo
-        : appInfo.applogo; // Use current logo for light mode
-      if (applogo !== logo) {
-        setAppLogo(logo);
-      }
+      setIsDarkTheme(isDarkTheme);
     };
-
-    // Set the logo immediately based on the current theme
-    updateLogoForTheme();
+    updateThemeStatus();
 
     const observer = new MutationObserver(() => {
-      updateLogoForTheme();
+      updateThemeStatus();
     });
 
     observer.observe(document.documentElement, {
@@ -112,7 +106,7 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
     });
 
     return () => observer.disconnect();
-  }, [applogo]);
+  }, []);
 
   return (
     <div>
@@ -130,7 +124,11 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
             {applogo && (
               <img
                 className="object-contain h-full w-auto"
-                src={applogo}
+                src={
+                      isDarkTheme
+                      ? "/static/js/assets/images/logo-dark.png"
+                      : applogo
+                }
                 alt="logo"
               />
             )}

apps/OpenSign/src/components/opensigndrive/DriveBody.jsx

@@ -405,7 +405,7 @@ function DriveBody(props) {
         </tr>
       )
     ) : listType === "list" && data.Type === "Folder" ? (
-      <div className="relative w-[100px] h-auto mx-auto">
+      <div className="relative w-[100px] h-[100px] mx-2 my-3">
         <ContextMenu.Root>
           <ContextMenu.Trigger className="flex flex-col justify-center items-center select-none-cls">
             {/* folder */}
@@ -480,7 +480,7 @@ function DriveBody(props) {
         <HoverCard.Trigger asChild>
           <div>
             <ContextMenu.Root>
-              <div className="relative w-[100px] h-auto mx-auto">
+              <div className="relative w-[100px] h-[100px] mx-2 my-3">
                 <ContextMenu.Trigger
                   asChild
                   className="flex flex-col justify-center items-center select-none-cls"
@@ -638,7 +638,7 @@ function DriveBody(props) {
           </Table>
         </div>
       ) : (
-        <div className="grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] mx-4 mt-3 pb-[20px] items-center gap-3 justify-center">
+        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
           {props.pdfData.map((data, ind) => {
             return <React.Fragment key={ind}>{handleFolderData(data, ind, "list")}</React.Fragment>;
           })}

apps/OpenSign/src/constant/Utils.jsx

@@ -2414,7 +2414,10 @@ export const getAppLogo = async () => {
       });
       if (tenant) {
           localStorage.setItem("appname", "OpenSign™");
-        return { logo: tenant?.logo, user: tenant?.user };
+        return {
+          logo: tenant?.logo,
+          user: tenant?.user
+        };
       }
     } catch (err) {
       console.log("err in getlogo ", err);