@visns-studio/visns-components 6.17.1 → 6.20.0

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

@@ -1,290 +1,6 @@
-.container {
-    padding: 20px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+// This file used to carry its own hardcoded palette (#007bff, #dc3545, #f8f9fa)
+// — a second, bluer design for the same panel. It now shares one definition
+// with AssociationManager.module.scss; see `_associationManager.scss`.
+@use 'associationManager' as *;
 
-.header {
-    margin-bottom: 30px;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 15px;
-
-    h3 {
-        margin: 0 0 5px 0;
-        color: #333;
-        font-size: 1.4em;
-    }
-
-    p {
-        margin: 0;
-        color: #666;
-        font-size: 0.9em;
-    }
-}
-
-.loading {
-    text-align: center;
-    padding: 40px;
-    color: #666;
-}
-
-/* Existing Associations */
-.existingAssociations {
-    margin-bottom: 40px;
-
-    h4 {
-        margin: 0 0 15px 0;
-        color: #333;
-        font-size: 1.1em;
-    }
-}
-
-.noAssociations {
-    padding: 20px;
-    text-align: center;
-    color: #999;
-    background: #f8f9fa;
-    border-radius: 6px;
-    font-style: italic;
-}
-
-.associationsList {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.associationItem {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    background: #fafafa;
-    transition: all 0.2s ease;
-
-    &:hover {
-        background: #f5f5f5;
-        border-color: #d0d0d0;
-    }
-
-    &.primary {
-        border-color: #007bff;
-        background: #e7f3ff;
-
-        &:hover {
-            background: #d1ecf1;
-        }
-    }
-}
-
-.associationInfo {
-    flex: 1;
-
-    .companyName {
-        font-weight: 600;
-        color: #333;
-        margin-bottom: 4px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .primaryBadge {
-        background: #007bff;
-        color: white;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-size: 0.75em;
-        font-weight: 500;
-        text-transform: uppercase;
-    }
-
-    .relationshipInfo {
-        margin-bottom: 4px;
-
-        .relationshipType {
-            color: #666;
-            font-weight: 500;
-            text-transform: capitalize;
-        }
-
-        .notes {
-            color: #888;
-            font-size: 0.9em;
-        }
-    }
-
-    .associatedAt {
-        color: #999;
-        font-size: 0.8em;
-    }
-}
-
-.associationActions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.setPrimaryBtn,
-.removeBtn,
-.associateBtn {
-    padding: 6px 12px;
-    border: none;
-    border-radius: 4px;
-    font-size: 0.85em;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-}
-
-.setPrimaryBtn {
-    background: #28a745;
-    color: white;
-
-    &:hover:not(:disabled) {
-        background: #218838;
-    }
-}
-
-.removeBtn {
-    background: #dc3545;
-    color: white;
-
-    &:hover:not(:disabled) {
-        background: #c82333;
-    }
-}
-
-.associateBtn {
-    background: #007bff;
-    color: white;
-    padding: 10px 20px;
-    font-size: 0.9em;
-
-    &:hover:not(:disabled) {
-        background: #0056b3;
-    }
-}
-
-/* New Association Form */
-.newAssociation {
-    border-top: 1px solid #eee;
-    padding-top: 30px;
-
-    h4 {
-        margin: 0 0 20px 0;
-        color: #333;
-        font-size: 1.1em;
-    }
-}
-
-.associationForm {
-    background: #f8f9fa;
-    padding: 20px;
-    border-radius: 6px;
-    border: 1px solid #e9ecef;
-}
-
-.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: #333;
-        font-weight: 500;
-        font-size: 0.9em;
-
-        input[type="checkbox"] {
-            margin-right: 8px;
-        }
-    }
-}
-
-.selectField,
-.textField {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-    background: white;
-    font-size: 0.9em;
-    color: #495057;
-
-    &:focus {
-        outline: none;
-        border-color: #007bff;
-        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-    }
-}
-
-.textareaField {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-    background: white;
-    font-size: 0.9em;
-    color: #495057;
-    resize: vertical;
-    min-height: 60px;
-
-    &:focus {
-        outline: none;
-        border-color: #007bff;
-        box-shadow: 0 0 0 2px rgba(0, 123, 255, 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/ClientAuth.module.scss

@@ -68,7 +68,7 @@
     &:focus {
         outline: none;
         border-color: var(--primary-color, #4a6741);
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     }
 
     &.error {