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.

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

[Look&Feel] Density and Consistency Improvements #2056

Closed
wants to merge 18 commits into from

Conversation

danieldong51
Copy link
Contributor

@danieldong51 danieldong51 commented Aug 13, 2024

Description

This PR applies the Look & Feel density and consistency changes to the Observability repository:

  1. Use small context menus
  2. Use small tabs
  3. Standardize paragraph size (15.75px next theme / 14px V7 theme)
  4. Use semantic headers (H1s on main pages, H2s on modals/flyouts)
  5. Modal/Flyout Typography
  6. Buttons for actions, only using primary buttons for primary calls to action
  7. Use small padding on popovers

Screenshots

Small context Menu

Scope Before After
Dashboards: Overview Actions Dashboards Actions Before Dashboards Post
Dashboards: Actions Dashboards SO Actions Before Dashboards SO Actions Post
Dashboards: Vis Actions Dashboards Vis Actions Before Dashboards Vis Actions Post
Dashboards: Vis Dashboards Vis Before Dashboards Vis Post
Integrations Integration Home context menu before Integration Home context menu post
Notebook: Header Reporting Notebook Header Reporting Before Notebook Header Reporting Post
Notebook: Header Paragraph Notebook Header Paragraph Before Notebook Header Paragraph Post
Notebook: Header Notebook Notebook Header Notebook HeaderActions Before Notebook Header Notebook HeaderActions Post
Notebook: Add Notebook Add Paragraph Before Notebook Add Paragraph Post
Notebook: Paragraph Notebook Paragraph Options Before Notebook Paragraph Options Post
Notebook: Listing Notebooks Listing Before Notebooks Listing Post
Trace: Save Trace Save Popover Before Trace Save Popover Post
Trace: Filters Trace Analytics Filters Before Trace Analytics Post
Trace: Actions Trace Actions Popover Before Trace Actions Popover Post

Small tabs

Scope Before After
Integration: Home Integration Home before Integration Home post
Integration: Details Integration Tab before Integration Tab post

Paragraph size

Scope Before After
Integration: Details Integration Details P Before Integration Details P Post
Notebooks: Empty overview Notebooks Empty Before Notebooks Empty Post
Notebooks: Empty notebook Notebook Empty Before Notebook Empty Post
Notebooks: Timestamp Notebook Output Timestamp Before Notebook Output Timestamp Post
Notebooks: Created Notebook Created Before Notebook Created Post
Notebooks: Quickstart Notebook OutputMD Before Notebook OutputMD Post
Traces: Empty Trace Empty Message Before Trace Empty Message Post
Traces: Map Trace Map Node Before Trace Map Node Post

Semantic Headers

Scope Before After
Dashboard: Overview Dashboards Before Dashboards Post
Dashboard: Title Dashboard Before Dashboard Post
Integrations: Overview Integration Overview Header Before Integration Overview Header Post
Integrations: Header Integration Header Before Integration Header Post
Integrations: Setup Integration Set up before Integration Set up post
Integrations: Added Integrations Added title before Integrations Added title post
Notebooks: Overview Notebooks Listing Before Notebooks Listing Post
Notebooks: Title Notebook before Notebook post
Trace: Trace ID Trace View ID Before Trace View ID Post
Trace: Service Traces Service Page Before Traces Service Page Post

Flyouts

Scope Before After
Dashboard: Select Vis Dashboards Select Vis Before Dashboards Select Vis Post
Integrations: Upload Integration Upload Before Integration Upload Post
Trace: Header Trace Header Before Trace Header Post
Trace: Span Header Trace Span Header Before Trace Span Header Post

Modals

Scope Before After
Dashboard: Create Dashboards Create Before Dashboards Create Post
Dashboard: Error Dashboard Error Header Before Dashboard Error Header Post
Dashboard: Error Dashboard Error p Before Dashboard Error P Post
Dashboard: Samples Dashboard Samples Before Dashboard Samples Post
Integrations: Delete Integration Delete Header Before Integration Delete Header Post
Integrations: Delete Integration Delete p Before Integration Delete p Post
Notebooks: Browse Vis Notebooks Browse Before Notebooks Browse Post
Notebooks: Duplicate Notebooks Custom Input Modal Before Notebooks Custom Input Modal Post
Notebooks: Delete Delete Notebook Before Delete Notebook Post

Check List

  • New functionality includes testing.
    • All tests pass, including unit test, integration test and doctest
  • New functionality has been documented.
    • New functionality has javadoc added
    • New functionality has user manual doc added
  • Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants