[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.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[asyncapi-bot]

🎉 This issue has been resolved in version 2.2.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀