Skip to content

Add summary strip, persistent dark mode, and UI polish (bump to 0.3.0)#29

Open
vantough wants to merge 1 commit intomainfrom
add-summarystrip-to-index.html-and-update-logic-2026-04-04
Open

Add summary strip, persistent dark mode, and UI polish (bump to 0.3.0)#29
vantough wants to merge 1 commit intomainfrom
add-summarystrip-to-index.html-and-update-logic-2026-04-04

Conversation

@vantough
Copy link
Copy Markdown
Owner

@vantough vantough commented Apr 4, 2026

Motivation

  • Provide a compact summary of totals and counts on the main dashboard for quicker visibility.
  • Improve dark-mode behavior by persisting the setting and making the toggle icon and control more robust.
  • Polishing typography, floating control styling, and accessibility/responsiveness to make the UI feel more modern and consistent.

Description

  • Bumped project VERSION to 0.3.0 and added the Inter webfont via index.html with preconnect optimizations.
  • Added a new summary strip UI block (.summary-strip / .summary-item) to index.html and CSS, and wired DOM elements to display Total Expense, Expense Count, and Payment Count.
  • Refactored js/darkMode.js to persist dark-mode in localStorage, provide renderDarkModeIcon() and applyDarkModeState() helpers, and guard against missing DOM nodes.
  • Enhanced CSS (css/styles.css) with improved toggle button styling, animations, dark-mode variants, icon hover behavior, and typography inheritance changes.
  • Extended js/logic.js with updateSummaryStrip() and added calls to keep the summary in sync from expense/payment lifecycle hooks and on DOMContentLoaded, plus small DOM-safety fixes in remaining/percentage update helpers.
  • Exported updateSummaryStrip on window and updated tasks/lessons.md with new lessons learned regarding UI and theme parity.

Testing

  • No automated tests were added or executed as part of this change.

Codex Task

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
expense-splitter Ready Ready Preview, Comment Apr 4, 2026 8:43pm

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 4, 2026

Deploy Preview for expensive-split ready!

Name Link
🔨 Latest commit f8da55a
🔍 Latest deploy log https://app.netlify.com/projects/expensive-split/deploys/69d177f3b2457d0008ff8c71
😎 Deploy Preview https://deploy-preview-29--expensive-split.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant