@visns-studio/visns-components 5.7.3 → 5.7.5

package/package.json

@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.7.3",
+    "version": "5.7.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Navigation.jsx

@@ -287,6 +287,9 @@ function Navigation({
         }
     };
 
+    const [, setActiveDropdown] = useState(null); // We only need the setter
+    const navWrapRef = useRef(null);
+
     const renderNav = (n) => {
         let navItemClasses;
 
@@ -302,8 +305,30 @@ function Navigation({
                     : styles['nav-item'];
         }
 
+        const hasChildren = n.children && n.children.length > 0;
+
+        const handleMouseEnter = () => {
+            if (hasChildren) {
+                setActiveDropdown(n.id);
+                // Temporarily disable overflow on the navwrap when dropdown is active
+                if (navWrapRef.current) {
+                    navWrapRef.current.style.overflowX = 'visible';
+                }
+            }
+        };
+
+        const handleMouseLeave = () => {
+            if (hasChildren) {
+                setActiveDropdown(null);
+                // Restore overflow when dropdown is no longer active
+                if (navWrapRef.current) {
+                    navWrapRef.current.style.overflowX = 'auto';
+                }
+            }
+        };
+
         const renderChildren = () => {
-            if (n.children && n.children.length > 0) {
+            if (hasChildren) {
                 return (
                     <ul className={styles.navDropdown}>
                         {n.children.map(
@@ -331,7 +356,11 @@ function Navigation({
         };
 
         return (
-            <li className={navItemClasses}>
+            <li
+                className={navItemClasses}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
                 {n.url ? (
                     <Link to={n.url}>{n.label}</Link>
                 ) : (
@@ -508,7 +537,7 @@ function Navigation({
                     </Link>
                 </div>
                 <div className={styles.awrap}>
-                    <nav className={styles.navwrap}>
+                    <nav className={styles.navwrap} ref={navWrapRef}>
                         <ul className={appNavClasses}>
                             {navData.navigations.map((nav, navKey) =>
                                 nav.permission === true ||
@@ -578,7 +607,7 @@ function Navigation({
                     <img src={logo} alt="System Logo" />
                 </Link>
             </div>
-            <div className={styles.navwrap}>
+            <div className={styles.navwrap} ref={navWrapRef}>
                 <ul className={appNavClasses}>
                     {navData.navigations.map((nav, navKey) =>
                         nav.permission === true || nav.permissionKey === '' ? (

package/src/components/crm/Notification.jsx

@@ -205,11 +205,61 @@ function Notification(props) {
                             <h3>Notifications</h3>
                             {hasNotifications && (
                                 <button
-                                    className={styles.markAllReadBtn}
                                     onClick={markAllAsRead}
                                     disabled={loading}
+                                    aria-label="Mark all notifications as read"
+                                    style={{
+                                        backgroundColor: 'var(--primary-color)',
+                                        color: 'var(--tertiary-color, white)',
+                                        padding: '8px 16px',
+                                        borderRadius: 'var(--br, 6px)',
+                                        border: 'none',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        gap: '6px',
+                                        fontSize: '14px',
+                                        fontWeight: '500',
+                                        cursor: 'pointer',
+                                        boxShadow:
+                                            '0 2px 4px rgba(0, 0, 0, 0.1)',
+                                        transition: 'all 0.2s ease',
+                                        opacity: loading ? '0.7' : '1',
+                                    }}
+                                    onMouseOver={(e) => {
+                                        if (!loading) {
+                                            e.target.style.backgroundColor =
+                                                'var(--secondary-color)';
+                                            e.target.style.boxShadow =
+                                                '0 4px 8px rgba(0, 0, 0, 0.15)';
+                                        }
+                                    }}
+                                    onMouseOut={(e) => {
+                                        if (!loading) {
+                                            e.target.style.backgroundColor =
+                                                'var(--primary-color)';
+                                            e.target.style.boxShadow =
+                                                '0 2px 4px rgba(0, 0, 0, 0.1)';
+                                        }
+                                    }}
+                                    onFocus={(e) => {
+                                        if (!loading) {
+                                            e.target.style.boxShadow =
+                                                '0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
+                                        }
+                                    }}
+                                    onBlur={(e) => {
+                                        if (!loading) {
+                                            e.target.style.boxShadow =
+                                                '0 2px 4px rgba(0, 0, 0, 0.1)';
+                                        }
+                                    }}
                                 >
-                                    <Check size={16} />
+                                    <Check
+                                        size={16}
+                                        strokeWidth={2}
+                                        color="white"
+                                    />
                                     <span>Mark all as read</span>
                                 </button>
                             )}
@@ -257,7 +307,10 @@ function Notification(props) {
                                                 data-index={index}
                                                 aria-label="Dismiss notification"
                                             >
-                                                <CircleX size={18} />
+                                                <CircleX
+                                                    size={18}
+                                                    strokeWidth={2}
+                                                />
                                             </button>
                                         </div>
                                     </div>

package/src/components/crm/styles/Navigation.module.scss

@@ -4,6 +4,7 @@
     align-items: center;
     gap: var(--padding);
     width: 100%;
+    position: relative; /* Establish a positioning context */
 
     .logo {
         width: var(--logo-width);
@@ -42,6 +43,7 @@
     flex: 1;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+    position: relative; /* Ensure proper stacking context */
 
     /* Hide scrollbar for most browsers but keep functionality */
     scrollbar-width: none; /* Firefox */
@@ -67,8 +69,10 @@
 
     .navDropdown {
         border-radius: var(--br);
-        overflow: hidden;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        overflow: visible;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        z-index: 1000; /* Ensure dropdown appears above other elements */
+        position: absolute; /* Ensure it's positioned absolutely */
     }
 
     .nav-item,
@@ -78,6 +82,11 @@
         box-sizing: border-box;
         position: relative;
         flex-shrink: 0; /* Prevent items from shrinking too much */
+        z-index: 10; /* Base z-index for nav items */
+
+        &:hover {
+            z-index: 100; /* Higher z-index when hovered to ensure dropdown visibility */
+        }
 
         a,
         span {
@@ -132,9 +141,11 @@
                 opacity: 0;
                 background: rgba(var(--primary-rgb), 0.75);
                 border-radius: var(--br);
-                overflow: hidden;
+                overflow: visible;
                 margin-top: 1px;
                 clip-path: inset(0 0 0 0 round var(--br));
+                z-index: 1000; /* Ensure dropdown appears above other elements */
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                 li {
                     display: block;
@@ -230,9 +241,11 @@
                 opacity: 0;
                 background: rgba(var(--primary-rgb), 0.9);
                 border-radius: var(--br);
-                overflow: hidden;
+                overflow: visible;
                 margin-top: 1px;
                 clip-path: inset(0 0 0 0 round var(--br));
+                z-index: 1000; /* Ensure dropdown appears above other elements */
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                 li {
                     display: block;
@@ -544,7 +557,9 @@
                         background: var(--primary-color);
                         border-radius: 5px;
                         clip-path: inset(0 0 0 0 round 5px);
-                        overflow: hidden;
+                        overflow: visible;
+                        z-index: 1000; /* Ensure dropdown appears above other elements */
+                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                         li {
                             display: block;

package/src/components/crm/styles/Notification.module.scss

@@ -80,6 +80,7 @@
     justify-content: space-between;
     padding: 12px 16px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    gap: 10px;
 }
 
 .notiboxHeader h3 {
@@ -87,29 +88,7 @@
     font-size: 16px;
     font-weight: 600;
     color: var(--heading-color, #333);
-}
-
-.markAllReadBtn {
-    background: transparent;
-    border: none;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    color: var(--primary-color);
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.markAllReadBtn:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.08);
-}
-
-.markAllReadBtn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    flex-shrink: 0;
 }
 
 /* Notification Scroll Wrap */
@@ -204,7 +183,7 @@
     top: 10px;
     background: transparent;
     border: none;
-    color: rgba(var(--paragraph-color-rgb), 0.4);
+    color: #666; /* Darker color to ensure visibility */
     cursor: pointer;
     padding: 0;
     display: flex;
@@ -214,7 +193,7 @@
     height: 24px;
     border-radius: 50%;
     transition: all 0.2s;
-    opacity: 0;
+    opacity: 0.6; /* Start with some opacity to ensure visibility */
 }
 
 .notiContent:hover .notiDismiss {
@@ -223,7 +202,9 @@
 
 .notiDismiss:hover {
     background-color: rgba(0, 0, 0, 0.05);
-    color: var(--paragraph-color);
+    color: var(
+        --secondary-color
+    ); /* Use secondary color on hover for better visibility */
 }
 
 /* Empty State */