@visns-studio/visns-components 6.17.1 → 6.20.0

package/src/components/styles/AssociationManager.module.scss

@@ -1,364 +1,5 @@
-.container {
-    padding: 20px;
-    background: var(--bg-color);
-    border-radius: var(--radius);
-    box-shadow: var(--box-shadow-small);
-}
+// The whole definition lives in `_associationManager.scss` and is shared with
+// ClientAssociationManager.module.scss — see the note at the top of that file.
+@use 'associationManager' as *;
 
-.header {
-    margin-bottom: 30px;
-    border-bottom: 1px solid rgba(var(--paragraph-rgb), 0.15);
-    padding-bottom: 15px;
-
-    h3 {
-        margin: 0 0 5px 0;
-        color: var(--primary-color);
-        font-size: 1.4em;
-        font-weight: 600;
-    }
-
-    p {
-        margin: 0;
-        color: var(--paragraph-color);
-        font-size: 0.9em;
-        opacity: 0.8;
-    }
-}
-
-.loading {
-    text-align: center;
-    padding: 40px;
-    color: var(--paragraph-color);
-    opacity: 0.7;
-}
-
-/* Multiple Primary Warning */
-.multiplePrimaryWarning {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 16px;
-    margin-bottom: 24px;
-    background: rgba(255, 193, 7, 0.1);
-    border: 1px solid rgba(255, 193, 7, 0.3);
-    border-left: 4px solid rgba(255, 193, 7, 1);
-    border-radius: var(--radius);
-    color: #856404;
-
-    .warningContent {
-        flex: 1;
-
-        strong {
-            display: block;
-            margin-bottom: 4px;
-            font-size: 0.95em;
-        }
-
-        p {
-            margin: 0 0 12px 0;
-            font-size: 0.85em;
-            line-height: 1.4;
-            opacity: 0.9;
-        }
-    }
-}
-
-.clearAllPrimaryBtn {
-    padding: 6px 12px;
-    background: rgba(255, 193, 7, 1);
-    color: #fff;
-    border: none;
-    border-radius: var(--radius);
-    font-size: 0.8em;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        background: rgba(255, 173, 7, 1);
-        transform: translateY(-1px);
-    }
-}
-
-/* Existing Associations */
-.existingAssociations {
-    margin-bottom: 40px;
-
-    h4 {
-        margin: 0 0 15px 0;
-        color: var(--secondary-color);
-        font-size: 1.1em;
-        font-weight: 500;
-    }
-}
-
-.noAssociations {
-    padding: 20px;
-    text-align: center;
-    color: var(--paragraph-color);
-    background: rgba(var(--paragraph-rgb), 0.05);
-    border-radius: var(--radius);
-    font-style: italic;
-    opacity: 0.8;
-}
-
-.associationsList {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.associationItem {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px;
-    border: 1px solid rgba(var(--paragraph-rgb), 0.15);
-    border-radius: var(--radius);
-    background: var(--tertiary-color);
-    transition: all 0.2s ease;
-
-    &:hover {
-        background: rgba(var(--paragraph-rgb), 0.05);
-        border-color: rgba(var(--paragraph-rgb), 0.25);
-    }
-
-    &.primary {
-        border-color: var(--primary-color);
-        background: rgba(var(--primary-rgb), 0.1);
-
-        &:hover {
-            background: rgba(var(--primary-rgb), 0.15);
-        }
-    }
-}
-
-.associationInfo {
-    flex: 1;
-
-    .entityName {
-        font-weight: 600;
-        color: var(--secondary-color);
-        margin-bottom: 4px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .primaryBadge {
-        background: var(--primary-color);
-        color: var(--bg-color);
-        padding: 2px 6px;
-        border-radius: var(--radius);
-        font-size: 0.75em;
-        font-weight: 500;
-        text-transform: uppercase;
-    }
-
-    .relationshipInfo {
-        margin-bottom: 4px;
-
-        .relationshipType {
-            color: var(--paragraph-color);
-            font-weight: 500;
-            text-transform: capitalize;
-        }
-
-        .notes {
-            color: var(--paragraph-color);
-            font-size: 0.9em;
-            opacity: 0.7;
-        }
-    }
-
-    .associatedAt {
-        color: var(--paragraph-color);
-        font-size: 0.8em;
-        opacity: 0.6;
-    }
-}
-
-.associationActions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.setPrimaryBtn,
-.removePrimaryBtn,
-.removeBtn,
-.associateBtn {
-    padding: 6px 12px;
-    border: none;
-    border-radius: var(--radius);
-    font-size: 0.85em;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-weight: 500;
-
-    &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-}
-
-.setPrimaryBtn {
-    background: var(--highlight-color);
-    color: #ffffff;
-
-    &:hover:not(:disabled) {
-        background: #0056b3;
-        color: #ffffff;
-        transform: translateY(-1px);
-    }
-}
-
-.removePrimaryBtn {
-    background: rgba(108, 117, 125, 1);
-    color: var(--bg-color);
-
-    &:hover:not(:disabled) {
-        background: rgba(90, 98, 104, 1);
-        transform: translateY(-1px);
-    }
-}
-
-.removeBtn {
-    background: rgba(220, 53, 69, 1);
-    color: var(--bg-color);
-
-    &:hover:not(:disabled) {
-        background: rgba(200, 35, 51, 1);
-        transform: translateY(-1px);
-    }
-}
-
-.associateBtn {
-    background: var(--primary-color);
-    color: var(--bg-color);
-    padding: 10px 20px;
-    font-size: 0.9em;
-
-    &:hover:not(:disabled) {
-        background: rgba(var(--primary-rgb), 0.9);
-        transform: translateY(-1px);
-    }
-}
-
-/* New Association Form */
-.newAssociation {
-    border-top: 1px solid rgba(var(--paragraph-rgb), 0.15);
-    padding-top: 30px;
-
-    h4 {
-        margin: 0 0 20px 0;
-        color: var(--secondary-color);
-        font-size: 1.1em;
-        font-weight: 500;
-    }
-}
-
-.associationForm {
-    background: rgba(var(--paragraph-rgb), 0.05);
-    padding: 20px;
-    border-radius: var(--radius);
-    border: 1px solid rgba(var(--paragraph-rgb), 0.1);
-}
-
-.formRow {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    @media (max-width: 768px) {
-        flex-direction: column;
-        gap: 15px;
-    }
-}
-
-.formField {
-    flex: 1;
-
-    label {
-        display: block;
-        margin-bottom: 5px;
-        color: var(--secondary-color);
-        font-weight: 500;
-        font-size: 0.9em;
-
-        input[type="checkbox"] {
-            margin-right: 8px;
-        }
-    }
-}
-
-.selectField,
-.textField {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid rgba(var(--paragraph-rgb), 0.25);
-    border-radius: var(--radius);
-    background: var(--bg-color);
-    font-size: 0.9em;
-    color: var(--paragraph-color);
-    transition: all 0.2s ease;
-
-    &:focus {
-        outline: none;
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
-    }
-}
-
-.textareaField {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid rgba(var(--paragraph-rgb), 0.25);
-    border-radius: var(--radius);
-    background: var(--bg-color);
-    font-size: 0.9em;
-    color: var(--paragraph-color);
-    resize: vertical;
-    min-height: 60px;
-    transition: all 0.2s ease;
-
-    &:focus {
-        outline: none;
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
-    }
-}
-
-.formActions {
-    margin-top: 20px;
-    text-align: right;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .container {
-        padding: 15px;
-    }
-
-    .associationItem {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 15px;
-    }
-
-    .associationActions {
-        align-self: flex-end;
-    }
-
-    .formActions {
-        text-align: center;
-    }
-
-    .associateBtn {
-        width: 100%;
-    }
-}
+@include association-manager;

package/src/components/styles/AuditLog.module.scss

@@ -28,19 +28,19 @@
     width: 100%;
     background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     overflow: visible;
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 10px 50px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--item-color-rgb), 1.05);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     padding: 10px 20px;
     border-radius: 0;
@@ -70,9 +70,9 @@
     flex: 0 0 calc(50% - 10px);
     padding: 0.85rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     color: var(--paragraph-color);
-    background: rgba(var(--tertiary-color-rgb), 0.95);
+    background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.95);
     margin: 5px;
     border-radius: var(--br);
     line-height: 1.45;
@@ -101,7 +101,7 @@
         width: 49%;
         padding: 1em;
         box-sizing: border-box;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
         color: var(--paragraph-color);
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;

package/src/components/styles/AuditLogs.module.scss

@@ -20,13 +20,13 @@
     width: 100%;
     background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     overflow: visible;
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 10px 50px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .titleInfo {
@@ -37,5 +37,5 @@
 
 .titleInfo span {
     font-size: 0.875em;
-    color: rgba(var(--paragraph-color-rgb), 0.65);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
 }

package/src/components/styles/Autocomplete.module.scss

@@ -33,14 +33,14 @@
     padding: 0.65rem 3rem 0.65rem 2.25rem !important;
     height: 38px;
     width: 100%;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     border-radius: 4px;
     outline: none;
     font-size: 0.9rem;
 
     &:focus {
-        border-color: rgba(var(--primary-rgb), 0.5);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+        border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.5);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     }
 }
 
@@ -53,7 +53,7 @@
     margin: 0;
     padding: 0;
     background-color: #fff;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     border-radius: 4px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     max-height: 250px;
@@ -65,7 +65,7 @@
 
 .AutocompletePlace-items {
     list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     cursor: pointer;
     padding: 8px 12px;
     font-size: 0.9rem;
@@ -75,7 +75,7 @@
     }
 
     &:hover {
-        background-color: rgba(var(--primary-rgb), 0.05);
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     }
 }
 
@@ -97,7 +97,7 @@
 
 .AutocompletePlace-itemSecondary {
     font-size: 0.8rem;
-    color: rgba(var(--paragraph-rgb), 0.7);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.7);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/components/styles/BusinessCardOcr.module.scss

@@ -1020,7 +1020,12 @@
 }
 
 // Dark mode support (if project supports it)
-@media (prefers-color-scheme: dark) {
+// The app ships a single light theme. These dark overrides used to fire
+// straight off the OS setting, which left the app half-dark at night: only 4
+// of 72 stylesheets carry dark rules, so dark surfaces ended up wearing
+// light-theme text. They now apply only when `data-theme="dark"` is opted
+// into explicitly, so the work survives for a real theme toggle later.
+:root[data-theme='dark'] {
     .captureGuide {
         background: rgba(255, 255, 255, 0.1);
         color: white;

package/src/components/styles/CallQueueSettings.module.scss

@@ -31,8 +31,11 @@ $cqsettings-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
 
     // Full-width layout: the queue-name column absorbs the slack so the
     // control cluster keeps its size and sits at the row's end.
+    // Vertical padding only: horizontal gutters belong to whatever page hosts
+    // this (the settings shell aligns panel bodies flush with the panel
+    // header, and this element sits too deep for the shell to flatten).
     width: 100%;
-    padding: 1rem 1.5rem 2rem;
+    padding: 1rem 0 2rem;
 
     // The CRM relied on a global `spin` keyframe from main.scss; this library
     // has none, so the animation is defined at the bottom of this module and

package/src/components/styles/CameraPlacement.module.scss

@@ -15,7 +15,7 @@
         background: var(--primary-color);
         padding: 16px 32px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(var(--primary-rgb), 0.7);
+        border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.7);
         z-index: 100;
         position: relative;
         min-width: 1060px;
@@ -298,17 +298,17 @@
         
         
         &.dragOver {
-            background: rgba(var(--primary-rgb), 0.05);
-            border: 2px dashed rgba(var(--primary-rgb), 0.3);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
+            border: 2px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.3);
             
             .uploadPlaceholder {
-                background: rgba(var(--primary-rgb), 0.1);
+                background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
                 transform: scale(1.02);
                 transition: all 0.2s ease;
                 
                 .dragDropHint {
-                    background: rgba(var(--primary-rgb), 0.2);
-                    border-color: rgba(var(--primary-rgb), 0.5);
+                    background: rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+                    border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.5);
                 }
             }
         }
@@ -374,18 +374,18 @@
                 transition: all 0.2s ease;
                 
                 &:hover {
-                    background: rgba(var(--primary-rgb), 0.8);
+                    background: rgba(var(--primary-rgb, 27, 57, 51), 0.8);
                     transform: translateY(-1px);
-                    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+                    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.3);
                 }
             }
             
             .dragDropHint {
                 margin-top: 20px;
                 padding: 12px 20px;
-                background: rgba(var(--primary-rgb), 0.1);
+                background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
                 border-radius: var(--br, 8px);
-                border: 1px dashed rgba(var(--primary-rgb), 0.3);
+                border: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.3);
                 display: flex;
                 align-items: center;
                 gap: 8px;
@@ -881,12 +881,12 @@
         opacity: 1;
         cursor: grab;
         transform: scale(1.25);
-        background: rgba(var(--primary-rgb), 0.8);
-        box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.6);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.8);
+        box-shadow: 0 3px 10px rgba(var(--primary-rgb, 27, 57, 51), 0.6);
     }
     
     &:active {
-        background: rgba(var(--primary-rgb), 0.7);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.7);
         transform: scale(1.1);
     }
     
@@ -916,8 +916,8 @@
     &:hover .rotationHandle {
         opacity: 1;
         transform: scale(1.15);
-        background: rgba(var(--primary-rgb), 0.8);
-        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.5);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.8);
+        box-shadow: 0 4px 16px rgba(var(--primary-rgb, 27, 57, 51), 0.5);
     }
     
     &.rotating {
@@ -929,8 +929,8 @@
         .rotationHandle {
             opacity: 1 !important;
             transform: scale(1.3) !important;
-            background: rgba(var(--primary-rgb), 0.9) !important;
-            box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.6) !important;
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.9) !important;
+            box-shadow: 0 8px 24px rgba(var(--primary-rgb, 27, 57, 51), 0.6) !important;
             cursor: grabbing !important;
             z-index: 1002 !important;
         }
@@ -1097,7 +1097,7 @@
         &:focus {
             outline: none;
             border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
+            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         }
     }
 
@@ -1152,7 +1152,7 @@
             color: white;
 
             &:hover {
-                background: rgba(var(--primary-rgb), 0.8);
+                background: rgba(var(--primary-rgb, 27, 57, 51), 0.8);
             }
         }
 

package/src/components/styles/CategorizedDropZone.module.scss

@@ -169,7 +169,12 @@
 }
 
 // Dark theme support
-@media (prefers-color-scheme: dark) {
+// The app ships a single light theme. These dark overrides used to fire
+// straight off the OS setting, which left the app half-dark at night: only 4
+// of 72 stylesheets carry dark rules, so dark surfaces ended up wearing
+// light-theme text. They now apply only when `data-theme="dark"` is opted
+// into explicitly, so the work survives for a real theme toggle later.
+:root[data-theme='dark'] {
     .categoryTabs {
         background-color: #343a40;
         border-color: #495057;