asyncapi-react fix: added consistent styling for buttons and tags

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, Screenshot 2024-10-20 at 3 12 13 AM 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:

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

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

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

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

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

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

AFTER:

Related issue(s)

Resolves #960

Oct 19 '24 22:10 hargunkaur286

To resolve this, the ask in the issue

Buttons to be styled with rectangular outline.

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