Replaces undefined --space-2xs CSS custom property references with the smallest defined spacing token, --space-xs, across several dashboard component stylesheets, and hardens the regression test that guards against reintroducing --space-2xs by scanning components recursively. - Replace var(--space-2xs) with var(--space-xs) in NewTaskModal.css, QuickEntryBox.css, TaskReviewTab.css, and McpServersCard.css - Update QuickEntryBox.test.tsx assertion to expect --space-xs instead of --space-2xs - Make space-token-defined.test.ts recursively walk components directory (previously only scanned the top level, missing nested files like settings/sections/McpServersCard.css) - Add FNXC:DashboardTokens comments documenting the --space-2xs is-intentionally-undefined decision (FN-5934) and the recursive-scan fix rationale (FN-7681) Files changed: .../app/__tests__/space-token-defined.test.ts | 33 ++++++++++++++++++---- packages/dashboard/app/components/NewTaskModal.css | 2 +- .../dashboard/app/components/QuickEntryBox.css | 18 ++++++++---- .../dashboard/app/components/TaskReviewTab.css | 2 +- .../components/__tests__/QuickEntryBox.test.tsx | 2 +- .../settings/sections/McpServersCard.css | 4 +-- 6 files changed, 44 insertions(+), 17 deletions(-) Fusion-Task-Id: FN-7681 Fusion-Task-Lineage: 59850d5c-09cc-4178-ac45-9792fa9aca59 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
210 lines
4.1 KiB
CSS
210 lines
4.1 KiB
CSS
.mcp-servers-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.mcp-servers-card__header,
|
|
.mcp-server-row,
|
|
.mcp-discovery__header,
|
|
.mcp-discovery-row,
|
|
.mcp-import-export,
|
|
.mcp-sensitive-row,
|
|
.mcp-inline-actions {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.mcp-servers-card__header,
|
|
.mcp-server-row,
|
|
.mcp-discovery__header,
|
|
.mcp-discovery-row {
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mcp-servers-card__title,
|
|
.mcp-server-row p,
|
|
.mcp-discovery p,
|
|
.mcp-discovery h6,
|
|
.mcp-import-export h6 {
|
|
margin: 0;
|
|
}
|
|
|
|
.mcp-servers-card__description,
|
|
.mcp-server-row p,
|
|
.mcp-discovery p,
|
|
.mcp-empty,
|
|
.mcp-empty-inline,
|
|
.mcp-effective-count {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mcp-server-list,
|
|
.mcp-discovery,
|
|
.mcp-discovery__group,
|
|
.mcp-editor,
|
|
.mcp-sensitive-list,
|
|
.mcp-import-export__pane,
|
|
.mcp-server-row__main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.mcp-server-row,
|
|
.mcp-discovery,
|
|
.mcp-discovery-row,
|
|
.mcp-editor,
|
|
.mcp-import-export__pane {
|
|
padding: var(--space-md);
|
|
border: var(--border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.mcp-discovery-row {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.mcp-discovery__notes,
|
|
.mcp-discovery-row__note {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.mcp-server-row__titleline,
|
|
.mcp-validation-status,
|
|
.mcp-server-row__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mcp-state-badge,
|
|
.mcp-transport-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-full);
|
|
padding: var(--space-xs) var(--space-xs);
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-tight);
|
|
border: var(--border-width) solid var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mcp-state-badge--disabled,
|
|
.mcp-state-badge--disabled-global {
|
|
color: var(--color-error);
|
|
background: color-mix(in srgb, var(--color-error) 12%, transparent);
|
|
}
|
|
|
|
.mcp-state-badge--overridden,
|
|
.mcp-state-badge--project-local {
|
|
color: var(--color-info);
|
|
background: color-mix(in srgb, var(--color-info) 12%, transparent);
|
|
}
|
|
|
|
.mcp-state-badge--inherited {
|
|
color: var(--color-warning);
|
|
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
|
}
|
|
|
|
.mcp-state-badge--configured {
|
|
color: var(--color-success);
|
|
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
|
}
|
|
|
|
.mcp-state-badge--required {
|
|
color: var(--color-warning);
|
|
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
|
}
|
|
|
|
.mcp-validation-status {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mcp-validation-status__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-full);
|
|
padding: var(--space-xs) var(--space-xs);
|
|
border: var(--border-width) solid var(--border);
|
|
color: inherit;
|
|
}
|
|
|
|
.mcp-validation-status--pending {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.mcp-validation-status--valid {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.mcp-validation-status--unreachable,
|
|
.mcp-validation-status--error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.mcp-editor-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.mcp-editor-grid__wide,
|
|
.mcp-import-export__pane,
|
|
.mcp-server-row__main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mcp-sensitive-row {
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mcp-sensitive-row .input,
|
|
.mcp-sensitive-row .select {
|
|
flex: 1 1 var(--settings-field-min-width, 12rem);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mcp-subheading {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.mcp-json-textarea {
|
|
min-height: calc(var(--space-xl) * 4);
|
|
resize: vertical;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.mcp-enabled-toggle {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mcp-servers-card__header,
|
|
.mcp-server-row,
|
|
.mcp-discovery__header,
|
|
.mcp-discovery-row,
|
|
.mcp-import-export,
|
|
.mcp-server-row__actions,
|
|
.mcp-sensitive-row,
|
|
.mcp-inline-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.mcp-editor-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mcp-server-row__actions .btn,
|
|
.mcp-inline-actions .btn,
|
|
.mcp-sensitive-row .btn {
|
|
justify-content: center;
|
|
}
|
|
}
|