refactor: added consistent styling for buttons and tags

[hargunkaur286]

Description

This PR is related to the issue with inconsistent styling. According to the issue, "WCAG 2.0 guideline 3.2.4 Consistent Identification states "Components that have the same functionality within a set of Web pages are identified consistently".

For example:
If we move to async-react website,

We will notice that there are multiple elements with a solid color background, but only some of them are a button.

Changes proposed in this pull request:

To resolve this, the ask in the issue was:

1. Buttons to be styled with rectangular outline.
2. Tags to be styled with solid background.

In this PR, changes have been made in 4 files:

1. In "library/src/components/Schema.tsx" file:
   Addresses the tags "Default values", "const", "Allowed values", "Example values".
   BEFORE:
   

   AFTER:
   

2. In "library/src/containers/Messages/Message.tsx" file
   Addresses tags of "Correlation Id" and "Message Id"
   BEFORE:
   
   AFTER:

3. In "library/src/containers/Messages/MessageExample.tsx" file
   Addresses the example labels
   BEFORE:
   

   AFTER:

   

4. In "library/src/containers/Operations/Operation.tsx" file
   BEFORE:
   

   AFTER:

   

Related issue(s)

Resolves #960

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[catosaurusrex2003]

To resolve this, the ask in the issue

1. Buttons to be styled with rectangular outline.
2. Tags to be styled with solid background.

I support this, also the changes are looking good.

However, I feel like there should be a py-1 added to some of the tags which are being converted to solid.

in the above 👆 example you can see that lightMeasured Message ID tags which you have made solid appear to be thinner than format: date-time

This is my opinion, Please let me know what you think about this.

[AceTheCreator]

@hargunkaur286 i don't think you should apply the changes to the messageExample.tsx file 🤔

[hargunkaur286]

@hargunkaur286 i don't think you should apply the changes to the messageExample.tsx file 🤔

@AceTheCreator @catosaurusrex2003 Thank you for the feedback. I have removed the changes from messageExample.tsx file

[AceTheCreator]

LGTM!

cc @catosaurusrex2003

[catosaurusrex2003]

LGTM too 🚀

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[AceTheCreator]

/rtm

[asyncapi-bot]

🎉 This PR is included in version 2.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀