diff --git a/CHANGELOG.md b/CHANGELOG.md index b7422a9..bee197b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ CalVer image tags (`stable-YYYY.MM.N`, `dev-YYYY.MM.N`) are produced for every C ## [Unreleased] ### Fixed +- **UI consistency pass** (I-UI-01..05): radio-card selected state on `/admin/tables` (14 cards get blue border + light bg highlight via `.sync-option-card:has(input:checked)`); promoted `.label-qualifier` / `.optional` to global rule (drops local duplicate); inline `` migrated to design tokens with bg + border; `.btn-google` hover hardcoded swatches replaced with vars; `.code-block code` border + radius reset for dark containers; `.form-textarea` promoted to global. Plus #340 follow-up: removed leftover Phase F2 `{% if data_source_type == 'keboola' %}` guard around edit-modal JS so handlers ship to every instance type (Discover button onclick call sites still respect the guard). Closes #347 (credit @MonikaFeigler). - `agnes refresh-marketplace` (non-bootstrap path) now re-applies `chmod +x` to every `.sh` under `~/.agnes/marketplace` after each `git reset --hard FETCH_HEAD`, not just on the initial bootstrap diff --git a/app/web/static/style-custom.css b/app/web/static/style-custom.css index a6e689a..f82c78a 100644 --- a/app/web/static/style-custom.css +++ b/app/web/static/style-custom.css @@ -11,6 +11,7 @@ --surface: #FFFFFF; --border: #E5E7EB; --border-light: #F3F4F6; + --border-dark: #C4C4C4; --success: #10B77F; --warning: #F59F0A; --error: #EA580C; @@ -254,8 +255,8 @@ nav { .btn-google:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); - border-color: #c4c4c4; - background-color: #fafafa; + border-color: var(--border-dark); + background-color: var(--background); } .btn-google:active { @@ -386,10 +387,28 @@ nav { /* Code blocks */ code { - font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace; - font-size: 0.875rem; - padding: 2px 6px; - border-radius: 4px; + font-family: var(--font-mono); + font-size: var(--text-sm); + background: var(--border-light); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 1px var(--space-1); + color: var(--text-primary); +} + +/* Label qualifiers — optional, default, hint text next to form labels */ +.label-qualifier, +.optional { + font-size: var(--text-sm); + font-weight: var(--font-normal); + color: var(--text-secondary); + margin-left: var(--space-1); +} + +/* Radio option cards — visual selected state */ +.sync-option-card:has(input:checked) { + border-color: var(--primary) !important; + background: var(--primary-light) !important; } .code-block { @@ -405,6 +424,8 @@ code { .code-block code, .code-block pre { background: transparent; + border: none; + border-radius: 0; padding: 0; font-size: 0.8125rem; color: inherit; @@ -2885,8 +2906,8 @@ a.slack-badge:hover { .login-page .btn-google:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); - border-color: #c4c4c4; - background-color: #fafafa; + border-color: var(--border-dark); + background-color: var(--background); } .login-page .btn-google:active { @@ -3970,6 +3991,29 @@ textarea.form-input { line-height: 1.5; } +textarea.form-textarea { + width: 100%; + min-height: 80px; + padding: var(--space-2) var(--space-3); + font-family: var(--font-primary); + font-size: var(--text-sm); + color: var(--text-primary); + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + resize: vertical; + line-height: normal; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +textarea.form-textarea:focus { + outline: none; + border-color: var(--primary); + box-shadow: var(--focus-ring); +} + +textarea.form-textarea::placeholder { color: var(--text-muted); } + .form-input:focus { outline: none; border-color: var(--primary); @@ -3978,6 +4022,14 @@ textarea.form-input { .form-input::placeholder { color: var(--text-muted); } +/* chip-input widget — set font on the container so the inner input's + `font: inherit` inline style picks up the right value */ +.chip-input { + font-family: var(--font-primary); + font-size: var(--text-sm); + color: var(--text-primary); +} + /* ===================================================== Page-header primitive (Task 6) .page-header + __main / __title / __subtitle / __actions / __eyebrow diff --git a/app/web/templates/admin_tables.html b/app/web/templates/admin_tables.html index b811140..03d2f5c 100644 --- a/app/web/templates/admin_tables.html +++ b/app/web/templates/admin_tables.html @@ -727,15 +727,8 @@ margin-bottom: 6px; } - .form-label .optional { - font-weight: 400; - color: var(--text-secondary); - font-size: 12px; - } - .form-input, - .form-select, - .form-textarea { + .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--border); @@ -748,8 +741,7 @@ } .form-input:focus, - .form-select:focus, - .form-textarea:focus { + .form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 115, 209, 0.1); @@ -761,11 +753,6 @@ cursor: not-allowed; } - .form-textarea { - min-height: 80px; - resize: vertical; - } - .form-select { cursor: pointer; appearance: none; @@ -1021,7 +1008,7 @@
-