Skip to content

UI consolidation and improvement #60

Closed

Description

@ToothyDev

#59 adds ui/Fact (a label and value row) and ui/Select (a dropdown), and moves the cards over to them. A few patterns are still copied per component and drift apart:

  • Hint text: .hint is restyled in about seven components at two sizes (--text-sm in Businesses, Settings, PropertyList, NightclubWarehouse and Timers; --text-xs in SafeCard and MoneyFrontsCard), with different margins. Pick one or two named sizes, e.g. a Hint component or a global class.
  • Tab grid: the card grid is repeated in Businesses, Safes, Settings, Timers and Kit, with 20rem or 24rem columns. A shared CardGrid (or a global class) with one column width.
  • Notes: the .note callout ("Estimate.", "Shut down.", "Not tracked.") is styled in BusinessProduction and again in NightclubWarehouse and SafeCard. A shared Note with tones (warn, quiet, good).
  • Acid Lab boost row: "Boost on · 80 units left [Undo]" puts the Undo button next to the value. The Timers cards in Timers tab: Lucky Wheel cooldown and Mansion production boost #59 moved Undo to the card's footer strip; the Acid Lab boost should do the same, so every Undo sits in one place.
  • Empty states: "You do not own …, mark it in Settings" is written by hand on each tab. One small component with the link.

Other improvements to the UI:

  • Settings: The settings have both a lot of wasted space and are very crammed and disorganised, particularly if you own many or all businesses. They also flicker a lot when you set it up because new elements appear and move others.
  • The "timers" tab is easily editable, whereas the MC businesses have an entire separate "edit" view
    Currently, you can activate both the "Edit" mode and the "Settings" mode for each card where this applies. This can cause confusion and clutters the UI, so they should be exclusive with each other.
    Alternatively, the "edit" functionality could always be accessible, i.e. you can always edit the numbers / drag the sliders, and the only extra mode is the settings view then. Both should be tested to choose the better one

In general, the entire UI should be looked at to make sure it looks unified, UI elements follow the same basic rules (same buttons are in the same locations, if possible, same behaviors are possible etc.)
And on the code side, there shouldn't be needless duplication

Activity

  1. changed the title [-]UI consolidation: shared hint, grid and boost rows across tabs[/-] [+]UI consolidation and improvement[/+] on Oct 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    uiComponents, layout, theme

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions