Update logo and theme per Corporate Marketing request#378
Update logo and theme per Corporate Marketing request#378nburwell merged 3 commits into2022-08-01from
Conversation
…and for better readability in general
…nts back to fix glyphs that just showed a unicode box instead
nburwell
requested review from
a team,
cgaroutte and
laurenhedberggg
and removed request for
a team
cgaroutte
left a comment
cgaroutte
left a comment
There was a problem hiding this comment.
The new styling looks great. Just a few comments mostly based on reviewing the ReadtheDocs page itself.
| border-bottom: 1px solid #eaeaea; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
There was a problem hiding this comment.
After reviewing the changes on ReadtheDocs, it looks like the color of h3 elements will need to be updated from white to something darker. Right now there are a few h3 headers that cannot be read because they are white on white.
There was a problem hiding this comment.
Thanks for catching that, will take a look and fix
| @@ -526,16 +508,17 @@ div[role=navigation][aria-label~=breadcrumbs] { | |||
| .highlight-json .kc, .kd, .kn, .kp, .kr, .kt, .mf, .mh, .mi, .mo { | |||
There was a problem hiding this comment.
This may be out of scope, but while we're here, I wonder if there's anyway we could tweak the json highlighting for the Swagger UI to be in-line with the other API pages?
There was a problem hiding this comment.
I was noticing the Swagger UI code blocks were hard to read (mainly the yellow JSON strings), but did confirm they were that way before as well and thus hadn't gotten worse -- so, I didn't pull on that thread. I'll see if there is anything quick
There was a problem hiding this comment.
I have a vague recollection from when I first implemented this that it was something of a hassle to adjust the highlighting, which probably explains why I left it as the default colors... You may have better luck than me though.
There was a problem hiding this comment.
Short answer is no.. not without more research and likely updating the swagger JS.
They only support 7 themes, and you configure it in JS and that changes the colors per language and per element
https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/
I switched themes and cleaned up a few overrides, so it's more inline with our styling, but not matching the other blocks and not as readable still as I'd like. Unless we go with a dark background for the textareas, this was the best I could find:
…o be styled more inline with our theming
2 participants
This matches our platform and corporate website better (the logo and removing the sub text was the main driver), but also improves readability in general.
My goal was to remove as much unused CSS as possible, and then only change what was needed. Had to tweak a fair amount in the end, but was also able to fix some existing styling bugs along the way (like "Api documentation" no longer wraps on the side bar).
View it live (must be logged in using LastPass credentials):
https://developers.invoca.net/en/2022-08-01_update_logo_and_theme/index.html
OLD:
NEW:
Also updated the swagger UI (only used by SMS right now)
OLD:
NEW:
Also fixed the missing font file which led to broke glyphs like these:
OLD:
NEW:
Checklist