UI Post-Refactor Revisions [AARD-2002]

[itspvty]

Task

AARD-2002

This task involved collecting bugs relevant to the UI refactor from you guys and writing fixes for each one.

Task list:

• Toasts have a "findDOMNode is deprecated" warning in devtools
• The logo on the sidebar is draggable
• Panels are too tall (even with no content)
• The developer tool "No mira field loaded" red color is ugly, as well as some other red texts
• You can open more than one unique panel
• Panels on top of each other don't have proper separation (maybe add box shadow)
• The "spawn" window and the "configure assets" windows shouldn't be able to be open at the same time
• The dropdown shadows are too subtle/weird
• Can't drag panels if pressing their title
• The robot right-click context window shows the text "A Robot" in black at the top
• Sliders do not display numerical values
• There isn't enough spacing between many buttons (ex, match mode config menu)
• The drag mode indicator at the bottom left has dark text on a dark bg
• The timer on the scoreboard is dark text on dark bg
• Where present, "delete" and "edit" buttons are placed weirdly (a line after their respective element often)
• Add padding to the match mode config panel items
• Block opening config/spawn when one of the two is already open
• Fix slider overflow
• Add info content to empty dropdowns
• Pressing plus on the configure asset panel doesn't open the spawn assets panel
• No feedback for why the config panel doesn't open when the spawn asset panel is open
• Panels can be too tall
• The configure panel for inputs skips to a specific scheme
• The APS import folder doesn't have any text when empty
• Draggable region distinction
• Fix analytics consent panel color
• "Requires Browser Refresh" poorly styled; to tooltip
• There are two scrollbars on tall panels
• Blocked from closing the configure assets panel even with no configuration active
• "Grab" cursor on draggable regions
• Fix font sizes/logic throughout (titles/headers)
• Fix spacing issues in more places
• APS spinner alignment fix
• Fix "submit" and "cancel" button overflow
• Slider label/position uniformity
• Fix input configure placements
• Increase the maxHeight of all panels to 85vh
• Make the panel title and button background the same color as the content
• Keybind setters say "..." instead of "PRESS ANYTHING" when activated

Symptom

The UI refactor was a large code edit and brought various visual bugs with it. The UI was, in most cases, fully usable, but the styling wasn't production-ready.

Solution

Fixing individual issues over time by collecting purposeful data.

Verification

Look good? Yay! Look bad? Aw man :(

---

Before merging, ensure the following criteria are met:

• All acceptance criteria outlined in the ticket are met.
• Necessary test cases have been added and updated.
• A feature toggle or safe disable path has been added (if applicable).
• User-facing polish:
  • Ask: "Is this ready-looking?"
• Cross-linking between Jira and GitHub:
  • PR links to the relevant Jira issue.
  • Jira ticket has a comment referencing this PR.

[PepperLola]

Looks good overall but I noticed a couple things.

• I think the match mode config panel items could use some padding
• I'm not sure whether it makes more sense to close configure/spawn when the other is opened or to block the opening, because the user could be in the middle of configuring something and then opening spawn panel would cancel all their changes
• When dragging a slider in the settings modal all the way to the left or right the handle gets cut off, and on the right side it overflows and causes there to be a horizontal scroll bar
• I'm not sure how to address this, but I think the empty accordions in the spawn panel look a bit weird when expanded.

[rutmanz]

I'm not sure how to address this, but I think the empty accordions in the spawn panel look a bit weird when expanded.

Maybe just a message that is like "No Saved Assets" / "No Assets Found" rather than leaving it empty

[rutmanz]

I'm not sure whether it makes more sense to close configure/spawn when the other is opened or to block the opening, because the user could be in the middle of configuring something and then opening spawn panel would cancel all their changes

I think configure closing spawn is fine, but if configure is editing something (not just open) then spawn should show a warning

[rutmanz]

1. I think that configure assets should also not be openable when the initial config panel (right after spawning) is open because it lets you configure the same robot in two different places which I don't think makes sense
2. The input screen doesn't look quite right still, and I also don't seem to be able to drag it anymore (use one of the controller input schemes)

3. Reset orientation is kind of weird here, maybe just have one reset button?

4. I don't think we always want to see values (particularly for scalars that don't actually have real-world meaning) on sliders. Also "Preferences" should be more of a header IMO

[rutmanz]

see above ^

[AlexD717]

What do you think about adding something like this? This blurs the background if you have a modal open which I think is better.

Suggested change

	},
	},
	MuiBackdrop: {
	styleOverrides: {
	root: {
	backgroundColor: "rgba(0, 0, 0, 0.5)",
	backdropFilter: "blur(2px)",
	},
	},
	},

[rutmanz]

• Pressing the plus button on the configure asset panel doesn't open the spawn assets panel anymore
• There is no feedback for why the config panel doesn't open when the spawn asset panel is open. I think it makes more sense to make the newly-opened one replace the other, unless you're editing a configuration, at which point it should show a warning toast
• Panels can still be too tall

• The configure panel for inputs seems to skip to a specific scheme instead of showing the list (and there are no breadcrums)
• The APS import folder doesn't have any text when empty
• If only parts of a panel are going to be draggable, there should be a visible distinction (maybe a handle like this)

[PepperLola]

The analytics consent panel text is a weird color and the buttons (at least the close button) need fixing.

[PepperLola]

• I would like the APS spinner to be either the same height as the text (ideal) or centered vertically.

• The default height of the initial config panel makes the accept/cancel buttons overflow. Maybe a worthwhile change would be making the modal/panel content scrollable but keeping the buttons visible (and the title as well)

• If it's not too difficult it would be nice to have the slider labels match the other ones (in size + alignment/indentation); right now they look a bit out of place

• This toggle group should be centered horizontally like in the spawn assets panel, and the buttons shouldn't touch the bottom of the panel (latter would be fixed by always showing accept/cancel)

[rutmanz]

Approving because you've addressed my previous review and everybody else has caught my remaining feedback

[AlexD717]

How hard would it be for you to go through and increase the maxHeight of all panels to something closer to 85vh? I think that would be nicer.

[PepperLola]

• Can the panel title and button background be the same color as the content? I prefer the lighter background color between the two of them
• Can we make the input buttons say "..." when you click them rather than "PRESS ANYTHING"?

[PepperLola]

Can the sliders here be stacked vertically?

The title and buttons have the old background in modals

Can we switch the various configure panels to use tabs instead of the toggle group?

There are two intake duration sliders

[PepperLola]

The requested changes were not addressed.

stale

[PepperLola]

Looks good