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

UI changes #10165

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Conversation

AllanOcelot
Copy link

@AllanOcelot AllanOcelot commented Oct 10, 2024

Description

I have tweaked various small aspects of the UI ( spacing, borders etc ) - to give a slightly more "refined" look in 2024.
Nothing game changing here at all, and I'm sure much of it comes down to personal opinion, but personally, I prefer the way Swagger looks with these changes.

  • Removed drop shadow from endpoints
  • Only apply border-bottom to "open" .opblock-tag-section
  • Remove margin-bottom from "title" for "closed" .opblock-tag-section
  • Add padding the ".operation-tag-content" for better look
  • Add margin bottom to .opblock-tag-section for better spacing
  • Add background color ( White ) to ..opblock-tag-section title for better legability
  • Styled the "external docs"(find out more) button in similar fashion to existing swagger buttons.

Motivation and Context

  • I think using box-shadow is slightly outdated and distracts from legibility for lower vision users
  • My eyes are glued to swagger for 25% of an average work day, I want it to look pretty
  • I think the titles are more legible with a white background
  • I believe adding padding to the endpoint list makes everything feel more visually weighted.

How Has This Been Tested?

  • Visual pass by myself
  • Visual pass by coworker
  • Ran Tests via NPM

Screenshots :

image
image

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

- add "external docs" as pil style button
- add border and border radius to opblock-tag-section
- Add new variable for heading background
- Add overflow to op container
- Add margin bottom 15px to op container
- Add new gray variable, for use with border colors
- fix border being applied to OpBlock when not open
- Remove bottom margin from  opblock-tag, makes it look better when closed
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.

1 participant