@visns-studio/visns-components 4.10.10 → 4.10.12

package/package.json

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

package/src/components/crm/Navigation.jsx

@@ -236,6 +236,8 @@ function Navigation({
     };
 
     const renderSetting = (n) => {
+        const isActive = location.pathname === n.url; // Check if current path matches setting URL
+
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
@@ -245,15 +247,18 @@ function Navigation({
             signOut: SignOut,
         };
 
+        const IconComponent = iconComponents[n.icon];
+        const settingClasses = isActive ? `${styles.active}` : ''; // Add active class if URLs match
+
         if (n.id === 'notifications') {
             return (
-                <li>
+                <li className={settingClasses}>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
         } else if (n.id === 'switchAccount') {
             return (
-                <li>
+                <li className={settingClasses}>
                     <SwitchAccount
                         setSystemAuth={setSystemAuth}
                         setting={n}
@@ -262,9 +267,8 @@ function Navigation({
                 </li>
             );
         } else if (n.id === 'logout') {
-            const IconComponent = iconComponents[n.icon];
             return (
-                <li>
+                <li className={settingClasses}>
                     <button
                         title={n.label}
                         data-tooltip-id="system-tooltip"
@@ -276,10 +280,8 @@ function Navigation({
                 </li>
             );
         } else {
-            const IconComponent = iconComponents[n.icon];
-
             return (
-                <li>
+                <li className={settingClasses}>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"

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

@@ -22,31 +22,6 @@
     }
 }
 
-.vs-datagrid--row:hover {
-    .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
-        cursor: pointer;
-    }
-}
-
-.InovuaReactDataGrid {
-    letter-spacing: 0.015rem !important;
-    color: black !important;
-}
-
-.InovuaReactDataGrid__header {
-    color: var(--primary-color) !important;
-}
-
-.InovuaReactDataGrid__row-hover-target:hover {
-    color: black !important;
-    background: rgb(240, 240, 240) !important;
-}
-
-.InovuaReactDataGrid__row:hover {
-    cursor: pointer;
-}
-
 #smartTableSearchInput {
     background: #eeeeee;
     border: 1px solid rgba(var(--table-color-rgb), 1.1);

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

@@ -238,12 +238,15 @@
         align-items: center;
     }
 
-    > ul a:hover {
+    /* Hover and Active States for <a> */
+    > ul a:hover,
+    > ul a.active {
         background: var(--primary-color-lighter);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    > ul a:hover svg {
+    > ul a:hover svg,
+    > ul a.active svg {
         color: var(--highlight-color);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
@@ -263,12 +266,15 @@
         appearance: none;
     }
 
-    button:hover {
+    /* Hover and Active States for button */
+    button:hover,
+    button.active {
         background: var(--primary-color-lighter);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    button:hover svg {
+    button:hover svg,
+    button.active svg {
         color: var(--highlight-color);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }