[Enhancement] Incorporate Underline for Link in Top Bar to Enhance UX

[hempun10]

The Feature

Motivation, pitch

Adding a simple underline at the link can enhance the UI/UX.

Twitter / LinkedIn details

No response

[dosubot[bot]]

🤖

Hello @hempun10! I'm Dosu, a friendly bot here to assist you with bugs, answer your queries, and guide you on becoming a contributor. While we wait for a human maintainer to join us, feel free to ask me anything. Remember, I'm here to help!

Thank you for your suggestion to enhance the UI/UX of Quivr. I agree that adding an underline to the link in the top bar can improve the user experience.

Currently, the styling applied to the links in the top bar of the Quivr application is defined by the following CSS rule in the frontend/globals.css file:

a {
  @apply hover:text-primary dark:hover:text-gray-200 transition-colors;
}

This rule applies the following styles to the links:

• On hover, the text color changes to the primary color defined in the Tailwind CSS configuration.
• On hover, in dark mode, the text color changes to gray-200.
• The color transition happens smoothly due to the transition-colors utility.

To add an underline to the links, you can modify the CSS for the "a" selector in the frontend/globals.css file as follows:

a {
  @apply hover:text-primary dark:hover:text-gray-200 transition-colors;
  @apply underline;
}

In the above code, I have added the "@apply underline;" to the "a" selector. This will add an underline to all the links when they are displayed.

Please note that this change will apply to all links in the application. If you want to apply the underline only to the links in the top bar, you might need to add a specific class to those links and apply the underline to that class.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Best regards, Dosu

Sources

• frontend/globals.css

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[rishitabura]

I can solve this issue

[rishitabura]

@hempun10 Could you please share some video of this?

[hempun10]

@rishitabura you can refer to an image that I have attached above. The bot also has given the relevant solution.

[yisusworldwide]

@hempun10 hello, just made a PR #2214 so let's see if I can solve this. Best, Jesus.

[github-actions[bot]]

Thanks for your contributions, we'll be closing this issue as it has gone stale. Feel free to reopen if you'd like to continue the discussion.