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 :
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)
[x] 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).
[x] are not breaking changes.
Documentation
[x] 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.
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.
Motivation and Context
How Has This Been Tested?
Screenshots :
Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests