@visns-studio/visns-components 5.8.4 → 5.8.6

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

@@ -44,124 +44,7 @@
     }
 }
 
-/* Toggle button styles */
-:global {
-    .react-toggle {
-        touch-action: pan-x;
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        background-color: transparent;
-        border: 0;
-        padding: 0;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    .react-toggle-screenreader-only {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-    }
-
-    .react-toggle-track {
-        width: 50px;
-        height: 24px;
-        padding: 0;
-        border-radius: 30px;
-        background-color: #4d4d4d;
-        transition: all 0.2s ease;
-    }
-
-    .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-        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;
-    }
-
-    .react-toggle-track-check {
-        position: absolute;
-        width: 14px;
-        height: 10px;
-        top: 0px;
-        bottom: 0px;
-        margin-top: auto;
-        margin-bottom: auto;
-        line-height: 0;
-        left: 8px;
-        opacity: 0;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-track-check {
-        opacity: 1;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle-track-x {
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        top: 0px;
-        bottom: 0px;
-        margin-top: auto;
-        margin-bottom: auto;
-        line-height: 0;
-        right: 10px;
-        opacity: 1;
-        transition: opacity 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-track-x {
-        opacity: 0;
-    }
-
-    .react-toggle-thumb {
-        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        position: absolute;
-        top: 1px;
-        left: 1px;
-        width: 22px;
-        height: 22px;
-        border: 1px solid #4d4d4d;
-        border-radius: 50%;
-        background-color: #fafafa;
-        box-sizing: border-box;
-        transition: all 0.25s ease;
-    }
-
-    .react-toggle--checked .react-toggle-thumb {
-        left: 27px;
-        border-color: var(--primary-color, #3b82f6);
-    }
-
-    .react-toggle--focus .react-toggle-thumb {
-        box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
-    }
-
-    .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-        box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
-    }
-}
+/* Toggle button styles are now in global.css */
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {

package/src/components/styles/global.css

@@ -383,23 +383,8 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: -1 !important;
 }
 
-/* React Toggle Styling */
+/* React Toggle Custom Styling - Overrides for react-toggle/style.css */
 .react-toggle {
-    touch-action: pan-x;
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-tap-highlight-color: transparent;
     z-index: 2; /* Ensure toggle is above checkbox */
 }
 
@@ -424,103 +409,6 @@ form div:has(.react-toggle) input[type='checkbox'] {
     height: 0 !important;
 }
 
-.react-toggle-screenreader-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.react-toggle-track {
-    width: 50px;
-    height: 24px;
-    padding: 0;
-    border-radius: 30px;
-    background-color: #4d4d4d;
-    transition: all 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-    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;
-}
-
-.react-toggle-track-check {
-    position: absolute;
-    width: 14px;
-    height: 10px;
-    top: 0px;
-    bottom: 0px;
-    margin-top: auto;
-    margin-bottom: auto;
-    line-height: 0;
-    left: 8px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-    opacity: 1;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    top: 0px;
-    bottom: 0px;
-    margin-top: auto;
-    margin-bottom: auto;
-    line-height: 0;
-    right: 10px;
-    opacity: 1;
-    transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-    opacity: 0;
-}
-
-.react-toggle-thumb {
-    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: 22px;
-    height: 22px;
-    border: 1px solid #4d4d4d;
-    border-radius: 50%;
-    background-color: #fafafa;
-    box-sizing: border-box;
-    transition: all 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-    left: 27px;
-    border-color: var(--primary-color, #3b82f6);
-}
-
-.react-toggle--focus .react-toggle-thumb {
-    box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
-}
-
-.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-    box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
-}
-
 /* Safari-specific fixes for form elements */
 @supports (-webkit-touch-callout: none) {
     /* Safari-specific styles */