@visns-studio/visns-components 5.8.3 → 5.8.5

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

@@ -913,9 +913,9 @@
 
         .suggestedJoinsList {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
             gap: 0.5rem;
-            max-height: 200px;
+            max-height: 300px;
             overflow-y: auto;
             padding: 0 12px 12px;
 
@@ -923,12 +923,13 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                padding: 0.5rem;
+                padding: 0.75rem;
                 border: 1px solid #e5e7eb;
                 border-radius: 0.25rem;
                 background-color: white;
                 transition: all 0.2s ease;
                 font-size: 0.8rem;
+                min-height: 60px;
 
                 &:hover {
                     border-color: var(--primary-color, #2563eb);
@@ -945,12 +946,29 @@
 
                     .suggestedJoinDescription {
                         font-size: 0.8rem;
-                        white-space: nowrap;
                         overflow: hidden;
-                        text-overflow: ellipsis;
                         min-width: 0; // This is important for text-overflow to work in flex items
                     }
 
+                    .relationshipWithDescription {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 0.25rem;
+                        overflow: hidden;
+
+                        div:first-child {
+                            font-weight: 500;
+                            color: var(--heading-color, #1f2937);
+                        }
+
+                        .relationshipDescription {
+                            font-size: 0.7rem;
+                            color: var(--muted-color, #6b7280);
+                            font-style: italic;
+                            line-height: 1.2;
+                        }
+                    }
+
                     .confidenceBadge {
                         font-size: 0.7rem;
                         color: #f59e0b;
@@ -1503,30 +1521,32 @@
         right: 0;
         top: 0;
         height: 100%;
-        background: none;
+        background-color: #f3f4f6;
         border: none;
         border-left: 1px solid var(--border-color, #d1d5db);
         padding: 0 10px;
-        color: var(--paragraph-color, #4b5563);
+        color: var(--primary-color, #2563eb);
         cursor: pointer;
-        font-size: 0.8em;
+        font-size: 0.9em;
         transition: all 0.2s ease;
+        font-weight: 600;
+        min-width: 36px;
 
         &:hover {
-            background-color: #f3f4f6;
+            background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
             color: var(--primary-color, #2563eb);
         }
     }
 
     input {
-        padding-right: 30px;
+        padding-right: 36px;
     }
 }
 
 .jsonKeyDropdown {
     position: relative;
     width: 100%;
-    max-height: 200px;
+    max-height: 300px;
     overflow-y: auto;
     background-color: white;
     border: 1px solid var(--border-color, #d1d5db);
@@ -1538,8 +1558,85 @@
     z-index: 100;
 }
 
+.jsonKeyDropdownHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    background-color: #f3f4f6;
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
+    span {
+        font-weight: 600;
+        font-size: 0.9em;
+        color: var(--heading-color, #1f2937);
+    }
+}
+
+.jsonKeyCloseButton {
+    background: none;
+    border: none;
+    color: var(--paragraph-color, #4b5563);
+    font-size: 1.2em;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        color: var(--danger-color, #ef4444);
+    }
+}
+
+.jsonKeyDropdownFooter {
+    padding: 8px 12px;
+    background-color: #f9fafb;
+    border-top: 1px solid var(--border-color, #e5e7eb);
+    text-align: center;
+    position: sticky;
+    bottom: 0;
+
+    small {
+        font-size: 0.8em;
+        color: var(--muted-color, #6b7280);
+        font-style: italic;
+    }
+}
+
 .jsonKeyList {
-    padding: 4px 0;
+    padding: 0;
+}
+
+.jsonKeyListHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #f9fafb;
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+    font-size: 0.8em;
+    font-weight: 600;
+    color: var(--muted-color, #6b7280);
+    position: sticky;
+    top: 40px;
+    z-index: 1;
+}
+
+.jsonKeyNameHeader {
+    flex: 1;
+}
+
+.jsonKeyFrequencyHeader {
+    text-align: right;
+    padding-right: 8px;
 }
 
 .jsonKeyItem {
@@ -1550,9 +1647,14 @@
     cursor: pointer;
     transition: all 0.2s ease;
     font-size: 0.85em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
 
     &:hover {
-        background-color: #f3f4f6;
+        background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.05);
+    }
+
+    &:active {
+        background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
     }
 
     .jsonKeyName {
@@ -1568,12 +1670,14 @@
         color: var(--muted-color, #6b7280);
         font-size: 0.85em;
         margin-left: 8px;
+        min-width: 40px;
+        text-align: right;
     }
 }
 
 .jsonKeyLoading,
 .jsonKeyEmpty {
-    padding: 12px;
+    padding: 20px 12px;
     text-align: center;
     color: var(--muted-color, #6b7280);
     font-size: 0.85em;
@@ -1643,3 +1747,235 @@
         margin-top: 4px;
     }
 }
+
+// Smart formatted values styling
+:global {
+    .status-active {
+        color: #16a34a; // Green
+        font-weight: 500;
+    }
+
+    .status-inactive {
+        color: #dc2626; // Red
+        font-weight: 500;
+    }
+
+    .boolean-yes {
+        color: #16a34a; // Green
+        font-weight: 500;
+    }
+
+    .boolean-no {
+        color: #dc2626; // Red
+        font-weight: 500;
+    }
+
+    .status-enabled {
+        color: #16a34a; // Green
+        font-weight: 500;
+    }
+
+    .status-disabled {
+        color: #dc2626; // Red
+        font-weight: 500;
+    }
+
+    .status-approved {
+        color: #16a34a; // Green
+        font-weight: 500;
+    }
+
+    .status-rejected {
+        color: #dc2626; // Red
+        font-weight: 500;
+    }
+
+    .status-verified {
+        color: #16a34a; // Green
+        font-weight: 500;
+    }
+
+    .status-not-verified {
+        color: #dc2626; // Red
+        font-weight: 500;
+    }
+
+    // JSON link styling
+    .json-link {
+        color: #2563eb; // Blue
+        text-decoration: underline;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+// Human-friendly JSON styling
+.humanJsonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 10px 12px;
+    background-color: #f9fafb;
+    border-radius: 6px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    font-size: 0.9rem;
+    margin: 2px 0;
+}
+
+.humanJsonRow {
+    display: flex;
+    align-items: center;
+    padding: 5px 2px;
+    line-height: 1.4;
+    border-radius: 4px;
+
+    &:not(:last-child) {
+        border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
+        padding-bottom: 6px;
+        margin-bottom: 5px;
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+    }
+}
+
+.humanJsonKey {
+    font-weight: 600;
+    color: #2563eb; // Blue
+    margin-right: 12px;
+    min-width: 120px;
+    flex: 0 0 auto;
+    padding-left: 3px;
+}
+
+.humanJsonValue {
+    flex: 1;
+    word-break: break-word;
+    padding-right: 5px;
+    color: #1f2937;
+    font-weight: 500;
+}
+
+/* Suggested Filters Styles */
+.suggestedFiltersContainer {
+    margin: 12px 0 20px;
+    background-color: #f3f4f6;
+    border: 1px solid var(--border-color, #e5e7eb);
+    border-radius: 6px;
+    padding: 12px;
+}
+
+.suggestedFiltersHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 6px 0;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.02);
+    }
+}
+
+.suggestedFiltersHeaderTitle {
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+        margin: 0;
+        font-size: 0.95em;
+        color: var(--heading-color, #1f2937);
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .suggestedFiltersCount {
+        font-size: 0.85em;
+        color: var(--muted-color, #6b7280);
+        font-weight: normal;
+    }
+
+    small {
+        font-size: 0.8em;
+        color: var(--muted-color, #6b7280);
+        font-style: italic;
+    }
+}
+
+.suggestedFiltersCategory {
+    margin-bottom: 12px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.suggestedFiltersCategoryHeader {
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--heading-color, #1f2937);
+    margin-bottom: 6px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.suggestedFiltersList {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 8px;
+}
+
+.suggestedFilterItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: white;
+    border: 1px solid var(--border-color, #e5e7eb);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.05);
+        border-color: var(--primary-color, #2563eb);
+    }
+}
+
+.suggestedFilterName {
+    font-size: 0.85em;
+    color: var(--paragraph-color, #4b5563);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.addSuggestedFilterBtn {
+    background-color: var(--primary-color, #2563eb);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: 8px;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: var(--primary-hover-color, #1d4ed8);
+        transform: scale(1.1);
+    }
+}

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

@@ -88,13 +88,8 @@
         background-color: #000000;
     }
 
-    .react-toggle--checked .react-toggle-track {
-        background-color: var(--primary-color, #3b82f6);
-    }
-
     .react-toggle--checked:hover:not(.react-toggle--disabled)
         .react-toggle-track {
-        background-color: var(--primary-color, #3b82f6);
         opacity: 0.8;
     }
 

package/src/components/styles/global.css

@@ -448,12 +448,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     background-color: #000000;
 }
 
-.react-toggle--checked .react-toggle-track {
-    background-color: var(--primary-color, #3b82f6);
-}
-
 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-    background-color: var(--primary-color, #3b82f6);
     opacity: 0.8;
 }