@visns-studio/visns-components 5.4.18 → 5.4.19

package/package.json

@@ -8,7 +8,7 @@
         "@nivo/core": "^0.88.0",
         "@nivo/line": "^0.88.0",
         "@nivo/pie": "^0.88.0",
-        "@tinymce/tinymce-react": "^5.1.1",
+        "@tinymce/tinymce-react": "^6.1.0",
         "@vitejs/plugin-react": "^4.3.4",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
@@ -36,7 +36,7 @@
         "react-datepicker": "^7.6.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
-        "react-number-format": "^5.4.3",
+        "react-number-format": "^5.4.4",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
@@ -54,7 +54,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.17.2",
+        "sweetalert2": "^11.18.0",
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.18",
+    "version": "5.4.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -1358,6 +1358,10 @@ function Field({
                                     type={'checkbox'}
                                     checked={cell[cellKey] || false}
                                     data-id={settings.id}
+                                    style={{
+                                        transform: 'scale(1)', // Use normal scale
+                                        margin: '3px', // Reduced margin
+                                    }}
                                     onChange={(e) => {
                                         e.stopPropagation(); // Stop event bubbling
                                         onChangeTableRadio(e, rowKey, cellKey);
@@ -1456,8 +1460,8 @@ function Field({
                                     checked={cell[cellKey] || false}
                                     data-id={settings.id}
                                     style={{
-                                        transform: 'scale(1.5)', // Scale the checkbox to make it bigger
-                                        margin: '5px', // Optional: Add some margin around the checkbox
+                                        transform: 'scale(1)', // Use normal scale
+                                        margin: '3px', // Reduced margin
                                     }}
                                     onChange={(e) => {
                                         e.stopPropagation(); // Stop event bubbling

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

@@ -635,8 +635,8 @@
 }
 
 .schedulingTable td input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px;
+    width: 14px !important;
+    height: 14px !important;
     border-radius: 4px;
     background-color: var(--item-color);
     border: 2px solid rgba(var(--primary-rgb), 0.15);

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

@@ -105,8 +105,8 @@
     .fi__optionscontainer {
         display: flex;
         flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
-        gap: 10px; // Adds space between checkboxes
-        margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
+        gap: 6px; // Further reduced gap for more compact layout
+        margin-top: 4px; // Further reduced margin for more compact layout
     }
 
     .fi__checkboxcontainer {
@@ -116,14 +116,13 @@
     }
 
     .fi__customcheckbox {
-        margin-right: 5px; // Space between checkbox and its label
+        margin-right: 4px; // Reduced space between checkbox and its label
         -webkit-appearance: none; // Reset default appearance for Safari
         -moz-appearance: none;
         appearance: none;
-        width: 18px;
-        height: 18px;
+        width: 14px;
+        height: 14px;
         border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
-        border-radius: 50% !important; // Make it round for radio buttons
         outline: none;
         position: relative;
         cursor: pointer;
@@ -131,6 +130,16 @@
         background-color: white;
         display: inline-block;
         transition: border-color 0.2s ease-in-out;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
+    /* Apply border-radius based on input type */
+    input[type='radio'].fi__customcheckbox {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox {
+        border-radius: 3px !important; // Make it square for checkboxes
     }
 
     /* Hover state */
@@ -144,25 +153,43 @@
         background-color: white;
     }
 
-    /* Create the inner circle for checked state */
+    /* Create the inner circle/square for checked state */
     .fi__customcheckbox:checked::after {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 10px;
-        height: 10px;
-        border-radius: 50% !important;
+        width: 7px;
+        height: 7px;
         background-color: var(--primary-color);
         display: block;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     }
 
+    /* Apply border-radius to the checked state based on input type */
+    input[type='radio'].fi__customcheckbox:checked::after {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox:checked::after {
+        content: '✓' !important;
+        border-radius: 0 !important;
+        width: auto !important;
+        height: auto !important;
+        background-color: transparent !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color) !important;
+        box-shadow: none !important;
+        font-weight: bold !important;
+    }
+
     .fi__checkboxlabel {
         user-select: none; // Improves UX by preventing text selection
-        margin-left: 5px;
+        margin-left: 4px;
         vertical-align: middle;
+        font-size: 0.9em; // Slightly smaller font for more compact appearance
     }
 }
 

package/src/components/styles/global.css

@@ -43,8 +43,8 @@ input[type='radio'],
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     appearance: none !important;
-    width: 18px !important;
-    height: 18px !important;
+    width: 14px !important;
+    height: 14px !important;
     border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
     border-radius: 50% !important;
     outline: none !important;
@@ -57,8 +57,29 @@ input[type='radio'],
     transition: border-color 0.2s ease-in-out !important;
 }
 
+/* Global checkbox styling */
+input[type='checkbox'] {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    width: 14px !important;
+    height: 14px !important;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+    border-radius: 3px !important;
+    outline: none !important;
+    position: relative !important;
+    cursor: pointer !important;
+    vertical-align: middle !important;
+    background-color: white !important;
+    display: inline-block !important;
+    box-sizing: border-box !important;
+    transition: border-color 0.2s ease-in-out !important;
+    transform: scale(1) !important; /* Override any transform scale */
+}
+
 input[type='radio']:hover,
-.radio-input:hover {
+.radio-input:hover,
+input[type='checkbox']:hover {
     border-color: var(--primary-color, #0066cc) !important;
 }
 
@@ -68,6 +89,11 @@ input[type='radio']:checked,
     background-color: white !important;
 }
 
+input[type='checkbox']:checked {
+    border-color: var(--primary-color, #0066cc) !important;
+    background-color: white !important;
+}
+
 input[type='radio']:checked::after,
 .radio-input:checked::after {
     content: '' !important;
@@ -75,14 +101,27 @@ input[type='radio']:checked::after,
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
-    width: 10px !important;
-    height: 10px !important;
+    width: 7px !important;
+    height: 7px !important;
     border-radius: 50% !important;
     background-color: var(--primary-color, #0066cc) !important;
     display: block !important;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
 }
 
+input[type='checkbox']:checked::after {
+    content: '✓' !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    font-size: 10px !important;
+    line-height: 1 !important;
+    color: var(--primary-color, #0066cc) !important;
+    display: block !important;
+    font-weight: bold !important;
+}
+
 select {
     background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
         no-repeat 100% 50% #fff;
@@ -346,8 +385,8 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     .radio-input {
         -webkit-appearance: none !important;
         appearance: none !important;
-        width: 18px !important;
-        height: 18px !important;
+        width: 14px !important;
+        height: 14px !important;
         border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
         border-radius: 50% !important;
         outline: none !important;
@@ -360,8 +399,27 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         transition: border-color 0.2s ease-in-out !important;
     }
 
+    input[type='checkbox'] {
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        width: 14px !important;
+        height: 14px !important;
+        border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+        border-radius: 3px !important;
+        outline: none !important;
+        position: relative !important;
+        cursor: pointer !important;
+        vertical-align: middle !important;
+        background-color: white !important;
+        display: inline-block !important;
+        box-sizing: border-box !important;
+        transition: border-color 0.2s ease-in-out !important;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
     input[type='radio']:hover,
-    .radio-input:hover {
+    .radio-input:hover,
+    input[type='checkbox']:hover {
         border-color: var(--primary-color, #0066cc) !important;
     }
 
@@ -371,6 +429,11 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         background-color: white !important;
     }
 
+    input[type='checkbox']:checked {
+        border-color: var(--primary-color, #0066cc) !important;
+        background-color: white !important;
+    }
+
     input[type='radio']:checked::after,
     .radio-input:checked::after {
         content: '' !important;
@@ -378,11 +441,24 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
-        width: 10px !important;
-        height: 10px !important;
+        width: 7px !important;
+        height: 7px !important;
         border-radius: 50% !important;
         background-color: var(--primary-color, #0066cc) !important;
         display: block !important;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
     }
+
+    input[type='checkbox']:checked::after {
+        content: '✓' !important;
+        position: absolute !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color, #0066cc) !important;
+        display: block !important;
+        font-weight: bold !important;
+    }
 }