[BUG] REQUEST/REPLY operations on navigation panel are not visible due to low contrast between font and background colors

[pablomorsch]

Describe the bug.

For AsyncAPI version 3.0.0, if a "send" or "receive" operation has a "reply" parameter, the documentation adds a tag with text "REPLY" or "REQUEST". The problem is that the font color and the background color are too similar (white / light gray) so the text is not visible.

Expected behavior

Better contrast between background color and text color to make the text readable.

Screenshots

End result:

How to Reproduce

Spec example:

...
operations:
  ConnectionRequest:
    action: send
    channel:
      $ref: "#/channels/RequestConnection"
    messages:
      - $ref: "#/channels/RequestConnection/messages/ConnectionRequest"
    reply:
      channel:
        $ref: "#/channels/ResponseConnection"
      messages:
        - $ref: "#/components/messages/ConnectionResponse"
...

🥦 Browser

Google Chrome

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

No, someone else can work on it

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup 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.

[maehata-fairy]

I'm also having the same problem. ( "@asyncapi/html-template": "2.1.7" )
I think this is because ".bg-orange-600" is not defined in css.
As a hotfix, I created the following script and inserted it into the automatically generated css file.

• hotfix.js

const fs = require('fs');
const cssFilePath = '/path/to/output/css/asyncapi.min.css';
const additionalAttribute = '.aui-root .bg-orange-600 {--tw-bg-opacity: 1;background-color: rgba(252, 148, 3, var(--tw-bg-opacity))}';

fs.readFile(cssFilePath, 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }

    const modifiedData = data + '\n' + additionalAttribute;

    fs.writeFile(cssFilePath, modifiedData, 'utf8', (err) => {
        if (err) {
            console.error(err);
            return;
        }
    });
});

• package.json

    "scripts": {
        "build": "ag xxx.yml @asyncapi/html-template -o </path/to/output> --force-write && node /path/to/hotfix.js"
    },

[derberg]

I'm moving it to react component repo where the responsible component is.
Would be great if anyone can propose a change in a PR

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup 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.