diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css index 55096c3..8f3c3c8 100644 --- a/app/static/css/cassandra.css +++ b/app/static/css/cassandra.css @@ -2461,22 +2461,29 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } border-color: var(--accent); } -/* Submit button — ghost styled to match the EDIT pill. Lights up to - * solid accent only when an add is actually possible. */ +/* Submit button — a square accent-bordered plus glyph. Visually + * heavier than the ghost calendar icon (larger size, accent border) + * so the primary action reads as primary. Lights up to solid accent + * on hover/focus when enabled. */ .pf-add__submit { margin-left: auto; background: transparent; border: 1px solid var(--accent); color: var(--accent); - padding: 3px 14px; + width: 26px; + height: 26px; + padding: 0; border-radius: 2px; cursor: pointer; font-family: inherit; - font-size: 12px; - letter-spacing: 0.06em; - text-transform: lowercase; + font-size: 18px; + font-weight: 600; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; transition: background 120ms ease-out, color 120ms ease-out, - border-color 120ms ease-out; + border-color 120ms ease-out, transform 120ms ease-out; } .pf-add__submit:hover:not(:disabled), .pf-add__submit:focus-visible:not(:disabled) { @@ -2484,6 +2491,9 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } color: var(--bg); outline: none; } +.pf-add__submit:active:not(:disabled) { + transform: scale(0.94); +} .pf-add__submit:disabled { border-color: var(--border); color: var(--dim); diff --git a/app/static/js/portfolio.js b/app/static/js/portfolio.js index 21e4358..bae774d 100644 --- a/app/static/js/portfolio.js +++ b/app/static/js/portfolio.js @@ -189,13 +189,13 @@ mount.innerHTML = '
' + notice + - 'Welcome — start by adding a position above, or ' + + 'No positions yet — click edit to add one, or ' + 'import a CSV from your broker →' + '
'; - // When empty, the add form should be visible by default — the - // edit module toggles it via the pf-empty class. + // The form is only ever visible in edit mode — never auto-shown by + // the empty state. Defensive: ensure it stays hidden here. var form = document.getElementById('pf-add-form'); - if (form) form.hidden = false; + if (form) form.hidden = true; } // Silently remove an unrecoverable cloud blob and re-render. The user diff --git a/app/static/js/portfolio_edit.js b/app/static/js/portfolio_edit.js index 52cbffb..1354fe2 100644 --- a/app/static/js/portfolio_edit.js +++ b/app/static/js/portfolio_edit.js @@ -28,11 +28,10 @@ function exitEditMode() { panel.classList.remove('pf-editing'); - // Form stays visible when the pie is empty (empty-state UX handled - // by portfolio.js setting the pf-empty class on the panel). - if (!panel.classList.contains('pf-empty')) { - form.hidden = true; - } + // The form is edit-mode-only — always hide it on exit, including + // when the portfolio is empty. The empty state shows guidance text + // that nudges the user back to the Edit button. + form.hidden = true; editBtn.hidden = false; doneBtn.hidden = true; editBtn.setAttribute('aria-pressed', 'false'); diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index dec1355..cb31752 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -84,7 +84,8 @@ - +