Commit Graph

10 Commits

Author SHA1 Message Date
Guillem Arias Fauste
0d32bb70ec chore(design-system): swap raw gray classes for semantic tokens across remaining views (#1655)
* chore(design-system): swap raw gray classes for semantic tokens across remaining views

Finalizes the raw-color sweep started in #1652 (settings) and continued
in #1654 (holdings). Covers accounts, budgets, chats, pages, imports,
provider integrations (mercury, lunchflow, sophtron, enable_banking,
coinstats), auth flows (password reset, MFA, registrations), shared
layouts, and selected DS component hover states. 35 files, ~56 line
changes.

Mappings (matching the patterns established in the prior sweeps):

- text-white bg-gray-900 hover:bg-gray-800 (with optional focus:ring-gray-900)
  -> text-inverse button-bg-primary hover:button-bg-primary-hover
  -> focus:ring-button-bg-primary
- text-gray-500 / 600 / 700 -> text-secondary
- text-gray-800 -> text-primary
- text-gray-400 -> text-subdued
- hover:text-gray-700 / hover:text-gray-100 -> hover:text-primary
- bg-gray-50 / 100 / 200 (standalone) -> bg-surface-inset
- bg-gray-500/5 -> bg-gray-tint-5
- bg-gray-500/10 -> bg-gray-tint-10
- bg-gray-900 (decorative active states) -> bg-inverse
- hover:bg-gray-50 / 100 (standalone) -> hover:bg-surface-inset
- hover:bg-gray-300 -> hover:bg-surface-inset-hover
- bg-white hover:bg-gray-100 -> bg-container hover:bg-container-hover
- border-gray-300 -> border-secondary
- focus:border-gray-200 -> focus:border-secondary
- focus-within:border-gray-900 -> focus-within:border-primary
- DS::Buttonish outline / ghost / icon hover:
  hover:bg-gray-100 theme-dark:hover:bg-gray-700
  -> hover:bg-container-inset-hover

Left intentionally raw, with rationale:

- bg-gray-300 / bg-gray-400 decorative dots and avatar circles. The
  raw value reads OK against both bg-container variants; no semantic
  "neutral indicator" token exists. Same pattern as #1652 / #1654.
- bg-gray-400/20 theme-dark:bg-gray-500/20 (onboardings/trial). Custom
  alpha tint with no equivalent token.
- bg-white theme-dark:bg-gray-700 (DS::Tabs active pill, budgets tabs).
  Custom tab-pill pattern; gray-700 in dark mode (one shade lighter
  than page bg-gray-900) is intentional for visibility.
- bg-gray-100 theme-dark:bg-gray-700 (DS::Toggle base bg). Closest
  match (bg-container-inset-hover) is semantically a hover state.
- DS::Buttonish secondary variant gray-200/300/700/600 pattern. Same
  pattern as #1654 holdings; needs button-bg-secondary-strong from
  that PR. Will swap in a follow-up after #1654 merges.
- disabled:bg-gray-500 theme-dark:disabled:bg-gray-400 on inverse
  buttons (DS::Buttonish primary, enable_banking, coinstats). Custom
  disabled state for the inverse pair; no token.
- text-gray-300 SVG stroke (shared/_progress_circle).
- bg-white text-gray-900 (layouts/print). Print contexts intentionally
  light regardless of theme.
- bg-gray-800 / border-gray-700 / text-white / hover:text-gray-100
  (impersonation_sessions/_super_admin_bar). Admin overlay styled to
  remain dark in both modes; not a theme-aware component.

Files covered by other in-flight PRs were skipped to avoid rebase
conflicts: chats/_ai_consent's fg-inverse swap (#1626), shared/_text_tooltip
and shared/_money_field tooltip pills (#1626), investments/_value_tooltip
(#1626), components/DS/tooltip (#1626).

* fix(design-system): keep changelog avatar text raw to preserve dark-mode contrast

The changelog avatar fallback (when @release_notes[:avatar] is missing)
sits inside the "decorative + raw" exception list — bg-gray-300 stays
fixed across themes since no semantic neutral-indicator token exists.

The earlier sweep partially themed the pair: bg-gray-300 stayed raw but
text-gray-600 became text-secondary. text-secondary resolves to gray-300
in dark mode, which matches the bg → text became invisible against its
own background.

Reverting only the text class to text-gray-600 restores the original
fixed-light placeholder behavior. Both classes raw, both themes
readable.

* fix(design-system): address review feedback on raw-color-sweep-finalize

Six issues caught by CodeRabbit + Codex review:

1. focus:ring-button-bg-primary silently emits no CSS (×6 files).
   button-bg-primary is a custom @utility, not a theme color, so Tailwind's
   ring-{name} resolution finds no --color-button-bg-primary. Replaces with
   focus:ring-gray-900 theme-dark:focus:ring-white — same color flip as the
   button bg, but resolved through theme colors so the ring actually renders.
   Files: lunchflow/mercury/sophtron _api_error + _setup_required, coinstats_items/new.

2. accounts/show/_activity.html.erb: focus-within:ring-gray-100 was dead
   (no ring-width on the parent). Removed.

3. import/confirms/show.html.erb: uniform hover:bg-surface-inset-hover
   applied to both active and inactive step indicators created a jarring
   dark-to-light flip on the active step (bg-inverse → bg-surface-inset-hover).
   Now hover follows the resting state: active uses hover:bg-inverse-hover,
   inactive uses hover:bg-surface-inset-hover.

4. password_resets/new.html.erb: bg-white left raw alongside the migrated
   hover:bg-surface-inset. Swapped to bg-container so dark mode flips properly.

5. registrations/new.html.erb + password_validator_controller.js: view now
   uses bg-surface-inset on password strength block lines, but the Stimulus
   controller still toggled bg-gray-200 on validate. Updated controller to
   add/remove bg-surface-inset matching the view, so unmet states reset to
   the tokenized class instead of leaving raw gray-200 stuck on the element.
2026-05-04 21:47:01 +02:00
Zach Gollwitzer
9fabcf4c72 Redis check for self hosted apps (#2353)
* Redis check for self hosted apps

* Run linter with autocorrect

* Add Redis to CI
2025-06-09 18:30:52 -04:00
Alex Hatzenbuhler
8070986763 Standardize corners, backgrounds, and borders (#2271)
* Create shared ruler view

* Use collection rendering/spacer templates for rules, and new shared_ruler

* Use shared ruler for all the places a ruler is used

* Use shared ruler for imports and balance sheet

* Fix brakeman by using a static partial with a defined collection

* Standardize & improve a bunch of corners, fix some backgrounds, fix merchants for dark mode

* Update balance sheet

* misc cleanup

* Fix import table

* Remove middot
2025-05-21 10:28:56 -04:00
Joseph Ho
fea1baeb1e import: Align elements correctly while importing CSV. (#2210) 2025-05-05 12:49:25 -04:00
Guilherme Mena
210b89cd17 Improve dark mode styles across multiple pages (#2125)
* fix: improve dark mode readability across the app

* fix: improve dark mode support for asset percentage text

* fix: apply suggested patch for theme-related improvements

* chore: apply PR feedback – remove dark:, align with design tokens, update form builder

* chore: revert background token and restore original style for visual consistency

* chore: remove unnecessary class attributes from form fields using builder

* refactor: move number_field and date_field into metaprogramming block

* refactor: replace bg-divider-adaptive divs with <hr> and border-secondary

* fix: apply requested changes and linting fixes
2025-04-23 09:42:30 -04:00
neo773
65e1bc6edd Feature: Implement Mobile Responsiveness (#2092)
* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* format

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix conflict

* fix conflict

* chore: run rubocop

* fix test

* update PWA logo

* fix tests

* chore: lint

* fix test

* Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>
2025-04-18 08:23:10 -05:00
Josh Pigford
88a6373e84 Implement dark mode (#2078)
* User theme settings

* Initial rough pass on colors

* More progress on dark mode
2025-04-11 09:28:00 -05:00
Zach Gollwitzer
d75be2282b New Design System + Codebase Refresh (#1823)
Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones
2025-02-21 11:57:59 -05:00
Zach Gollwitzer
849c58dd3e Maybe Design System Updates (#1856)
* Add geist font

* Design system css file

* Add cursor ui/ux rules

* Add shadows and shadow borders

* Replace primitives with tokens for common text and backgrounds

* Organize css

* Update switch and checkbox class names

* Add back global color variables
2025-02-13 11:31:07 -05:00
Zach Gollwitzer
398b246965 CSV Imports Overhaul (Transactions, Trades, Accounts, and Mint import support) (#1209)
* Remove stale 1.0 import logic and model

* Fresh start

* Checkpoint before removing nav

* First working prototype

* Add trade, account, and mint import flows

* Basic working version with tests

* System tests for each import type

* Clean up mappings flow

* Clean up PR, refactor stale code, tests

* Add back row validations

* Row validations

* Fix import job test

* Fix import navigation

* Fix mint import configuration form

* Currency preset for new accounts
2024-10-01 10:47:59 -04:00