UI improvements to contact section

Content & configuration

Swagger/OpenAPI definition:

{
 "openapi": "3.0.3",
 "info": {
     "title": "My API",
     "description": "Description of My API.",
     "contact": {
       "name": "My Company",
       "url": "https://example.com/contact",
       "email": "cas@example.com"
     },
     "version": "1.0"
   }
}

Swagger-UI configuration options:
Default

Is your feature request related to a problem?

Depending on your definition of a problem :). In my opinion, the current contact section lacks quite a bit in usability, user experience and styling. The current situation is displayed below.

Describe the solution you'd like

The desired solution looks something like the image below:

This includes the following improvements:

• Add a contact heading
• Display contact name in the heading, instead of in each hyperlink text
• Similarity between website and email text (go to website, send email)
• Show website URL and email address between brackets (users know what to expect, makes copying easier)

Describe alternatives you've considered

N.A.

Additional context

The to-be-changed lines of code reside here. Styling in the info.scss file would also be nice to add.

All in all, this is quite an easy change and quick win. It makes the difference between me wanting to use the contact section or not. I will be able to implement these changes myself, but I'd like to get your feedback first! 😃

Start in src/core/components/info.jsx at the contact rendering lines identified by the issue, then review info.scss for the related styling. Update the contact section to include the heading, contact name, consistent website/email labels, and bracketed URL and email text; verify the rendered section matches the requested layout.