Query history UI improvements

[prash240303]

Describe the bug
A clear and concise description of what the bug is.
The query history viewer has spacing and UI flaws that can be improved

Things that can be done to improve the UI:

• addition of a better icon for each history item.
• left alignment of the query item content
• trail the query with "...." if its length is bigger than container width

[prash240303]

linked to issue #2 redesign and implement query history panel.

[aditya-armal]

Hi @prash240303 @janvi01 ,

I've made some updates to address the concerns you raised about the query history viewer. Before proceeding further, I want to confirm if the changes align with your expectations. Please take a moment to review the comparison between the previous and updated UI:

Comparison:

Previous UI:

Updated UI:

Changes Made:

1. Better Icons: Updated icons for each history item from BsCodeSquare to BsTerminal for a more polished appearance.

2. Alignment Adjustment: Center-aligned the code displayed in each items for a visually appealing layout.

3. Trail Queries: Added "...." to queries that exceed the container width for improved readability.

4. Box Width Increase: Expanded the box width from 20px to 28px for a more balanced and aesthetically pleasing design.

5. Delete All Queries Button: Changed the style to outline for a cleaner look.

6. Box Color: Adjusted the box color from whiteAlpha.500 to whiteAlpha.700 to make it distinct from the background and enhance visibility.

7. No Queries Message: Updated the message from "Execute a query first" to "Let's get started! Execute your first query." and centered it for better alignment.

Could you please confirm if these changes meet your requirements? If there's anything specific you'd like to adjust or if additional modifications are needed, feel free to provide feedback.

Looking forward to your thoughts!

[prash240303]

If you could make the query text left aligned instead of center aligned and bigger icon , with good padding spacing, and with these changes , please raise a PR : )

[sarthakroy107]

I would like to give this a try. Can you please assign me?

[amanswarnakar]

Hey @prash240303, please assign this issue to me under JWOC'24.