[feature] API docs theme #197

[Aryamanz29]

Closes #197

Changes

• Changed API docs theme to look similar to admin

Screenshots

BEFORE

AFTER

login-2022-02-06_22.31.45.mp4

login-2022-02-11_15.57.21.mp4

Checklist

• I have read the contributing guidelines.
• I have manually tested the proposed changes.
• I have written new test cases to avoid regressions. (if necessary)
• I have updated the documentation. (e.g. README.rst)
• I have added [change!] to commit title to indicate a backward incompatible change. (if required)
• I have checked the links added / modified in the documentation.

[coveralls]

Coverage remained the same at 98.618% when pulling 64dbbb1 on Aryamanz29:issue-197/api-doc-theme into deb4af2 on openwisp:master.

[Aryamanz29]

@nemesisdesign Do I have to make changes in OP block styles as well to look similar to admin-theme? 😅

[nemesifier]

@nemesisdesign Do I have to make changes in OP block styles as well to look similar to admin-theme? sweat_smile

No this one let's not touch it.

[nemesifier]

Thank you very much for your great work, is looking really good, let's make some more improvements!

Swagger UI

Can you please make the authorize button look like:

Also, would be nice to switch the color of links (<a> elements) to the same color we use in the openwisp admin, making sure the links are not bold.

Take a look also at these buttons please (which do not look right):

DRF browsable API

Here it is what I suggest:

• remove the gird background
• make the header background white
• make the logo and spacing around it similar to what's in the swagger API
• the labels of the form I would try to remove the bold and make it full black (#000)
• the tabs in the form, let's not make the background reddish but keep the background consistent with the rest of the form box, the background color on hover could be slightly lighter (eg: #f9f9f9)

[Aryamanz29]

Swagger UI

• 

• Also, would be nice to switch the color of links (<a> elements) to the same color we use in the openwisp admin, making sure the links are not bold.

NOW

• Take a look also at these buttons please (which do not look right):

NOW

DRF browsable API

• remove the gird background
• make the header background white
• make the logo and spacing around it similar to what's in the swagger API
• the labels of the form I would try to remove the bold and make it full black (#000)
• the tabs in the form, let's not make the background reddish but keep the background consistent with the rest of the form box, the background color on hover could be slightly lighter (eg: #f9f9f9)

NOW

[nemesifier]

Thanks 👍