janvi01 / sql-editor

A web-based application that provides a SQL editor to run queries and display results.
https://sql-editor-online.vercel.app/
MIT License
9 stars 17 forks source link

Query history UI improvements #54

Open prash240303 opened 8 months ago

prash240303 commented 8 months ago

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 Screenshot: 2023-12-30 141649 image

Things that can be done to improve the UI:

prash240303 commented 8 months ago

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

aditya-armal commented 8 months ago

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:

Screenshot 2023-12-30 230924 Screenshot 2023-12-30 230907

Updated UI:

Screenshot 2023-12-30 231006 Screenshot 2023-12-30 231022 Screenshot 2023-12-31 000128

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 commented 8 months ago

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 commented 7 months ago

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

amanswarnakar commented 7 months ago

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