@visns-studio/visns-components 5.1.2 → 5.1.4

package/package.json

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

package/src/components/crm/generic/GenericDetail.jsx

@@ -520,16 +520,25 @@ function GenericDetail({
             }
 
             // Split the string on both '\n' and '<br>' using a regular expression.
-            const lines = truncatedValue.split(/<br>|\\n/);
+            // Also handles any additional whitespace around the line breaks.
+            const lines = truncatedValue
+                .split(/<br\s*\/?>|\n/)
+                .map((line) => line.trim());
 
             if (lines.length === 0) {
                 return null;
             }
 
+            console.info(lines);
+
             return (
                 <>
                     {lines.map((line, index) => (
-                        <p key={index}>{line}</p>
+                        <React.Fragment key={index}>
+                            {line}
+                            {index < lines.length - 1 && <br />}{' '}
+                            {/* Add <br /> between lines */}
+                        </React.Fragment>
                     ))}
                 </>
             );

package/src/components/crm/generic/styles/GenericMain.module.scss

@@ -88,4 +88,4 @@
 
 .paddingSimple {
     padding: 1rem;
-}
+}

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

@@ -175,8 +175,8 @@
             &.active a,
             &:hover span,
             &.active span {
-                background: rgba(238, 238, 238, 0.5);
-                color: var(--paragraph-color);
+                background: var(--primary-color);
+                color: var(--tertiary-color);
             }
 
             &:hover svg,
@@ -296,6 +296,72 @@
     }
 }
 
+.hactions-alternate {
+    width: max-content;
+    justify-self: end;
+
+    > ul {
+        list-style: none;
+        display: flex;
+        padding: 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        li {
+            margin: 0 5px;
+        }
+
+        a {
+            color: var(--paragraph-color);
+            box-sizing: border-box;
+            padding: 0.35rem;
+            text-decoration: none;
+            background: none;
+            border: 2px solid var(--primary-color);
+            border-radius: 100%;
+            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            display: flex;
+            align-items: center;
+
+            &:hover,
+            &.active {
+                background: var(--primary-color);
+
+                svg {
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+
+        button {
+            color: var(--paragraph-color);
+            box-sizing: border-box;
+            padding: 0.35rem;
+            text-decoration: none;
+            background: none;
+            border: 1px solid var(--primary-color);
+            border-radius: 100%;
+            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            display: flex;
+            align-items: center;
+            outline: none;
+            appearance: none;
+
+            &:hover,
+            &.active {
+                background: var(--primary-color);
+
+                svg {
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+    }
+}
+
 .cwrap {
     display: flex;
 }