@visns-studio/visns-components 4.5.9 → 4.5.11

package/components/crm/generic/GenericDetail.jsx

@@ -11,7 +11,14 @@ import { confirmAlert } from 'react-confirm-alert';
 import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'react-toastify';
-import { CircleCheck, Copy, File, TrashCan } from 'akar-icons';
+import {
+    CircleCheck,
+    Copy,
+    EyeOpen,
+    EyeSlashed,
+    File,
+    TrashCan,
+} from 'akar-icons';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
@@ -52,6 +59,12 @@ function GenericDetail({
     const [total, setTotal] = useState(0);
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
+    const [passwordVisible, setPasswordVisible] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        setPasswordVisible(!passwordVisible);
+    };
+
     /** General Functions */
     const handleStageUpdate = async (stage, type) => {
         try {
@@ -327,6 +340,30 @@ function GenericDetail({
 
         const renderTotal = () => formatTotalValue();
 
+        const renderPassword = () => {
+            return (
+                <>
+                    {passwordVisible ? stringValue : '******'}
+                    <button
+                        type="button"
+                        onClick={togglePasswordVisibility}
+                        style={{
+                            marginLeft: '10px',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                        }}
+                    >
+                        {passwordVisible ? (
+                            <EyeSlashed size={24} />
+                        ) : (
+                            <EyeOpen size={24} />
+                        )}
+                    </button>
+                </>
+            );
+        };
+
         // Render based on the item's type
         switch (type) {
             case 'boolean':
@@ -353,6 +390,8 @@ function GenericDetail({
                 return renderRichText();
             case 'total':
                 return renderTotal();
+            case 'password':
+                return renderPassword();
             default:
                 return size === 'full' && truncatedValue
                     ? parse(`<br /><p>${truncatedValue}</p>`)

package/components/crm/styles/Navigation.module.css

@@ -6,7 +6,7 @@
 
 .hwrap .logo {
     width: var(--logo-width, 100px);
-    padding: 0 1rem 0 0.5rem;
+    padding: 0 2rem;
     margin: 0;
     line-height: 1.45;
 }
@@ -67,7 +67,7 @@
     align-items: center;
     gap: 0.25rem;
     box-sizing: border-box;
-    padding: 0.5em 1em;
+    padding: 0.5em;
     margin: 0.25em;
     text-decoration: none;
     outline: none;
@@ -102,14 +102,14 @@
 .app-nav .nav-item:hover span,
 .app-nav .nav-item.active span {
     background: var(--primary-color-lighter);
-    color: var(--tertiary-color);
+    color: var(--highlight-color);
 }
 
 .app-nav .nav-item:hover a svg,
 .app-nav .nav-item.active a svg,
 .app-nav .nav-item:hover span svg,
 .app-nav .nav-item.active span svg {
-    color: var(--secondary-color);
+    color: var(--highlight-color);
 }
 
 .app-nav .nav-item-alternate:hover a,

package/package.json

@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.5.9",
+    "version": "4.5.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {