@visns-studio/visns-components 5.1.18 → 5.1.20

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

@@ -182,7 +182,7 @@
 
     .widgetTitle {
         padding-bottom: 10px;
-        border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
+        border-bottom: 2px solid rgba(var(--tertiary-color-rgb), 0.5);
     }
 }
 
@@ -261,6 +261,7 @@
     gap: 1rem; // Gap between fields
     align-items: flex-end; // Align fields vertically
 }
+
 .filter-field {
     flex: 1; // Ensures equal spacing for each field
     display: flex;
@@ -292,6 +293,37 @@
     }
 }
 
+.filter-field-highlight {
+    flex: 1; // Ensures equal spacing for each field
+    display: flex;
+    flex-direction: column;
+    min-width: 200px; // Sets a minimum width for smaller screens
+
+    label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--tertiary-color);
+    }
+
+    input,
+    select {
+        border: 1px solid #dadce0;
+        border-radius: 5px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        color: #333;
+        outline: none;
+        background-color: #f9f9f9;
+        width: 100%; // Ensures full width within the container
+
+        &:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
+        }
+    }
+}
+
 .filter-actions {
     display: flex;
     gap: 0.75rem; // Gap between buttons

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

@@ -1,21 +1,21 @@
 .schedulingTable {
     width: 100%;
     border-collapse: collapse;
-    margin: 1em 0;
+    margin: 0.5em 0; // Reduced margin
 
     th,
     td {
-        padding: 0.25rem;
+        padding: 0.2rem; // Reduced padding for cells
         text-align: left;
         border: 1px solid rgba(var(--primary-rgb), 0.1);
     }
 
     th {
-        padding: 0.75rem 1rem; /* Add more padding for better spacing */
-        font-size: 1.1rem; /* Increase font size */
+        padding: 0.5rem 0.75rem; // Less padding than before
+        font-size: 1rem; // Slightly smaller font size
         font-weight: bold;
-        background-color: var(--primary-color); /* Apply a background color */
-        color: white; /* Change text color to white */
+        background-color: var(--primary-color);
+        color: white;
         text-align: center;
     }
 
@@ -25,16 +25,13 @@
 }
 
 .categoryRow {
-    background-color: rgba(
-        var(--primary-rgb),
-        0.15
-    ); /* Lighter background for category */
-    font-size: 1.1rem; /* Increase font size */
+    background-color: rgba(var(--primary-rgb), 0.15);
+    font-size: 1rem; // Reduced font size
     font-weight: bold;
     text-align: left;
-    padding: 0.75rem 1rem; /* Add padding for better spacing */
-    border-bottom: 2px solid var(--primary-color); /* Add border under category row */
-    color: var(--primary-color); /* Set text color to primary color */
+    padding: 0.5rem 0.75rem; // Reduced padding
+    border-bottom: 2px solid var(--primary-color);
+    color: var(--primary-color);
 }
 
 .totalRow {
@@ -46,9 +43,9 @@
 .noDataMessage {
     text-align: center;
     color: var(--secondary-color);
-    font-size: 1.125em;
-    padding: 1.5em;
-    margin: 2em auto;
+    font-size: 1rem;
+    padding: 1em;
+    margin: 1em auto;
     background: #f9f9f9;
     border: 1px solid #ddd;
     border-radius: 6px;
@@ -186,16 +183,13 @@
 }
 
 .subtotalRow {
-    background-color: rgba(
-        var(--secondary-rgb),
-        0.15
-    ); /* Lighter background for subtotal */
+    background-color: rgba(var(--secondary-rgb), 0.15);
     font-weight: bold;
-    text-align: right; /* Align to the right like total column */
-    padding: 1em; /* Add padding for better spacing */
-    font-size: 0.9rem; /* Increase font size */
-    color: var(--primary-color); /* Set text color to primary color */
-    border-top: 2px solid var(--primary-color); /* Add border top to separate subtotal row */
+    text-align: right;
+    padding: 0.5em; // Reduced padding
+    font-size: 0.8rem; // Reduced font size
+    color: var(--primary-color);
+    border-top: 2px solid var(--primary-color);
 }
 
 .colour {
@@ -210,9 +204,9 @@
     &__popover {
         position: absolute;
         z-index: 9999;
-        left: 50%; /* Position to the center or adjust accordingly */
-        top: 50%; /* Adjust top based on your layout */
-        transform: translate(-50%, -50%); /* Center it */
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
     }
 }
 
@@ -226,30 +220,30 @@
         flex: 1;
 
         button {
-            width: 40px; /* Keep it compact */
-            height: 40px; /* Square button */
-            font-size: 1.5rem; /* Adjusted for a better icon size */
+            width: 40px;
+            height: 40px;
+            font-size: 1.5rem;
             font-weight: 600;
-            color: #fff; /* White icon color */
-            background-color: #b0b0b0; /* Neutral grey base */
-            border: 2px solid #999; /* Light border for definition */
-            border-radius: 8px; /* Rounded corners */
+            color: #fff;
+            background-color: #b0b0b0;
+            border: 2px solid #999;
+            border-radius: 8px;
             cursor: pointer;
-            transition: all 0.3s ease; /* Smooth transition for hover effect */
+            transition: all 0.3s ease;
 
             &:hover {
-                background-color: #999; /* Darken the background on hover */
-                border-color: #666; /* Darken the border on hover */
+                background-color: #999;
+                border-color: #666;
             }
 
             &:focus {
-                outline: none; /* Remove default focus outline */
-                box-shadow: 0 0 0 2px rgba(72, 168, 58, 0.5); /* Custom focus outline */
+                outline: none;
+                box-shadow: 0 0 0 2px rgba(72, 168, 58, 0.5);
             }
 
             &:active {
-                background-color: #888; /* Lighter grey on click */
-                transform: scale(0.98); /* Shrink on click */
+                background-color: #888;
+                transform: scale(0.98);
             }
         }
     }