Repository navigation
UI consolidation and improvement #60
Copy link
Copy link
Closed
Labels
uiComponents, layout, themeComponents, layout, theme
Description
#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:
.hintis restyled in about seven components at two sizes (--text-smin Businesses, Settings, PropertyList, NightclubWarehouse and Timers;--text-xsin SafeCard and MoneyFrontsCard), with different margins. Pick one or two named sizes, e.g. aHintcomponent 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
.notecallout ("Estimate.", "Shut down.", "Not tracked.") is styled in BusinessProduction and again in NightclubWarehouse and SafeCard. A sharedNotewith 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
uiComponents, layout, themeComponents, layout, theme
Activity
[-]UI consolidation: shared hint, grid and boost rows across tabs[/-][+]UI consolidation and improvement[/+]