Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevToolbar] Iterate on UI design #75636

Open
ryan953 opened this issue Aug 6, 2024 · 1 comment
Open

[DevToolbar] Iterate on UI design #75636

ryan953 opened this issue Aug 6, 2024 · 1 comment

Comments

@ryan953
Copy link
Member

ryan953 commented Aug 6, 2024 •
edited
Loading

@Jesse-Box put together some tweaks to the UI elements to make things look cleaner and consistent. We should iterate on each panel to bring them in-line and improve the overall look

https://www.figma.com/design/G8sBIfdPBh7wwpKdEMjqcD/Specs%3A-Dev-Toolbar-v2?node-id=2005-2843&t=Rt0ZD4spLndPPPaN-0
@aliu39
Copy link
Member

aliu39 commented Aug 12, 2024 •
edited by michellewzhang
Loading

Mini tasks:

Overall

  • Ensure list item styles (height, font, layout, padding) are consistent for every panel
  • Update panel headers style to match the design
    • left-aligned, project badge
    • header links to the relevant page
    • make sure same height + font
    • gray and bold "Unresolved issues/feedback related to this page" for those panels. Divider doesn't reach all the way across panel
    • also, remove the URL from the issues/feedback header, it should only say "this page"

Feedback

  • Feedback panel: change header button from "+" to "Report a bug" (see design)

Feature flags

  • FF Panel: move clear overrides button from above search bar to the bottom of the "Overrides". Use x icon and "Remove all"
  • FF Panel: make a "+ Add a Flag" button in header.
    • does this replace the "Add override button" we currently have at the bottom?
  • FF Panel: make toggles larger(?)
    • Contrary to the figma I think we should keep the true/false for clarity.
  • FF Panel: remove the gray "Name Value" header
  • FF Panel: "search flags" -> "search"

Alerts

  • Alerts panel: remove header description

Releases

  • Crash-free-rate numbers, release ver, and empty issue list encapsulated in boxes
  • Add box color highlight (green/red) for crash-free-rate change
  • Update empty state "No new issues in this release"

Newer panels

  • Replay/Web Vital/newer panels: brush up styles and ask Jesse for design thoughts

Toolbar

This was referenced Aug 13, 2024
Merged
Merged
Merged
michellewzhang added a commit that referenced this issue Aug 15, 2024
@michellewzhang
style(toolbar): adjust alert indicator css (#76189)
1c1d6e2 
- relates to #75636
- new styling for the alert badge -- no count, just a red dot (see
[figma](https://www.figma.com/design/G8sBIfdPBh7wwpKdEMjqcD/Specs%3A-Dev-Toolbar-v2?node-id=2087-3091&t=KlTCSSkhLqDtjp8y-0))

before:
<img width="38" alt="SCR-20240814-jyjf"
src="https://github.com/user-attachments/assets/29a76783-0d12-4c4c-a985-ea079a603088">

after:
<img width="47" alt="SCR-20240814-jyfs"
src="https://github.com/user-attachments/assets/50ae6ef2-1441-4fee-a756-a0daff375fb6">
michellewzhang added a commit that referenced this issue Aug 15, 2024
@michellewzhang
style(toolbar): update toolbar headings to match new design (#76032)
03cb02c 
- relates to #75636
- some initial changes to kick off the toolbar css updates. main changes
are
    - updating the header to be left aligned
    - adding project badge for all panels besides the FF panel
    - updating description css for feedback/issues panel (grey + bold)
    - removing the alerts description
    - also, transaction URLs are removed for feedback/issues
    - change feedback + button to say "report bug"



https://github.com/user-attachments/assets/6dd90d02-1ed4-4cca-a2e3-cea428223e19

<img width="295" alt="SCR-20240813-kdov"
src="https://github.com/user-attachments/assets/3132f4a2-c583-42d2-9d4c-4354c159ace0">
michellewzhang added a commit that referenced this issue Aug 15, 2024
@michellewzhang
style(toolbar): update feature flag panel css (#76102)
94c3083 
- relates to #75636
- modify feature flag css according to the figma. main changes:
- move "clear overrides" button from above search bar to the bottom of
the "overrides" tab.
    - Use x icon and "remove all" for the clear overrides button
    - make a "+ add flag" button in header
    - remove the gray "name value" header

before:
<img width="255" alt="SCR-20240813-mmtm"
src="https://github.com/user-attachments/assets/17fdee18-25fc-40ab-a26f-90d0e9c0fd20">
<img width="264" alt="SCR-20240813-mmul"
src="https://github.com/user-attachments/assets/7f8f325c-cee1-4049-b4c4-d7cd58e95a08">

after:


https://github.com/user-attachments/assets/acc7ede1-3f03-4999-969c-973ac410dd8c
@michellewzhang michellewzhang mentioned this issue Aug 27, 2024
Merged
michellewzhang added a commit that referenced this issue Aug 27, 2024
@michellewzhang
ref(toolbar): add links to panel headings (#76633)
f5a2219 
relates to #75636

<img width="299" alt="SCR-20240827-lyvz"
src="https://github.com/user-attachments/assets/1ef1d2a7-462c-459a-9e53-0c937a2490b7">
<img width="299" alt="SCR-20240827-lyye"
src="https://github.com/user-attachments/assets/2fba3a0c-ca60-49fe-ac88-ba1abb826bd9">
@michellewzhang michellewzhang mentioned this issue Aug 27, 2024
Merged
michellewzhang added a commit that referenced this issue Sep 3, 2024
@michellewzhang
style(toolbar): update release panel css (#76645)
d3edb1c 
relates to #75636

- update the release panel css to more closely match the
[figma](https://www.figma.com/design/G8sBIfdPBh7wwpKdEMjqcD/Specs%3A-Dev-Toolbar-v2?node-id=2087-3091&t=eyAm0V3PJoUUKnHY-0)

before: 
<img width="290" alt="SCR-20240827-ovsy"
src="https://github.com/user-attachments/assets/2133469f-603a-4afa-aac4-33e0089ed1cf">

neg change: 
<img width="296" alt="SCR-20240827-oqoi"
src="https://github.com/user-attachments/assets/b346b092-dacd-4793-a49c-100bdd3010fb">

pos change:
<img width="299" alt="SCR-20240827-otdt"
src="https://github.com/user-attachments/assets/3ad5f8e6-0efa-4722-a417-6a2b4d2fd77e">



with issues:
<img width="305" alt="SCR-20240827-pkdf"
src="https://github.com/user-attachments/assets/46586424-9e4b-428d-9fbd-25836484e9e9">
@michellewzhang michellewzhang removed their assignment Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ryan953 @michellewzhang @aliu39