@visns-studio/visns-components 4.10.21 → 4.10.22

package/package.json

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

package/src/components/crm/Field.jsx

@@ -730,9 +730,8 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
-                            {console.info(inputValue)}
                             {inputValue && inputValue.length > 0 && (
-                                <ul className="file-list">
+                                <ul className={styles['file-list']}>
                                     {inputValue.map((file, index) => (
                                         <li
                                             key={`file-${settings.id}-${index}`}
@@ -743,7 +742,9 @@ function Field({
                                                 ? file.file_name
                                                 : ''}
                                             <button
-                                                className="trash-button"
+                                                className={
+                                                    styles['trash-button']
+                                                }
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();

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

@@ -523,3 +523,54 @@ input[type='file']:hover {
     display: block;
     margin: 0 auto;
 }
+
+/* File List Styling */
+.file-list {
+    list-style: none; /* Remove default list styles */
+    padding: 0; /* Remove default padding */
+    margin: 0; /* Remove default margin */
+    border: 1px solid var(--border-color); /* Add a border */
+    border-radius: var(--br); /* Rounded corners */
+    background: var(--tertiary-color); /* Background color */
+    max-height: 200px; /* Limit height */
+    overflow-y: auto; /* Scroll if too many files */
+    margin-top: 0.5em; /* Space above the list */
+}
+
+/* File List Item Styling */
+.file-list li {
+    display: flex; /* Flexbox for layout */
+    justify-content: space-between; /* Space between text and button */
+    align-items: center; /* Center items vertically */
+    padding: 0.5em 1em; /* Padding for items */
+    border-bottom: 1px solid var(--border-color); /* Border between items */
+    color: var(--paragraph-color); /* Text color */
+    transition: background 0.3s; /* Transition for hover effect */
+}
+
+.file-list li:hover {
+    background: rgba(
+        var(--paragraph-color-rgb),
+        0.1
+    ); /* Change background on hover */
+}
+
+/* Trash Button Styling */
+.trash-button {
+    background: transparent; /* Transparent background */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer cursor */
+    color: var(--primary-color); /* Button color */
+    display: flex; /* Flex for icon alignment */
+    align-items: center; /* Center icon vertically */
+    transition: color 0.3s; /* Transition for color change */
+}
+
+.trash-button:hover {
+    color: var(--secondary-color); /* Change color on hover */
+}
+
+.trash-button svg {
+    width: 1.5em; /* Adjust icon size */
+    height: 1.5em; /* Adjust icon size */
+}