Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Divider component #3014

Closed

Conversation

iamsushantk
Copy link
Contributor

@iamsushantk iamsushantk commented Sep 3, 2024

Description

Divider is a fundamental element in user interfaces used to create visual separation and hierarchy within a layout.

This PR adds a Divider component and demonstrates its usage in following parts of the application:

  • TitleBar
  • RequestTabs
  • EnvironmentSelector

The themes are chosen from https://tailwindcss.com/docs/customizing-colors

Attached are the screenshots for both light and dark mode:

1
2
3
4
5
6

Contribution Checklist:

  • The pull request only addresses one issue or adds one feature.
  • The pull request does not introduce any breaking changes
  • I have added screenshots or gifs to help explain the change if applicable.
  • I have read the contribution guidelines.
  • Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

@sanjai0py
Copy link
Collaborator

I haven't looked into the code yet, but my first thought upon seeing the attached images is that the opacity for the divider can be reduced, maybe to 50%?

@iamsushantk
Copy link
Contributor Author

I haven't looked into the code yet, but my first thought upon seeing the attached images is that the opacity for the divider can be reduced, maybe to 50%?

1
2

@sanjai0py have set the opacity to 50%. Please refer to the screenshots above. Thanks.

@helloanoop
Copy link
Contributor

Hey @iamsushantk

I am onboard with the idea that Dividers help improve visual separation and hierarchy within a layout.
Even with the added opacity for the divider, I think we would need further improvements to make the UX looks appear aesthetically clean. I currently do not have additional feedback on how to improve this.

At the moment, getting this implemented is a low priority given the current state of PR backlog. We will revisit this at some point later.

@helloanoop
Copy link
Contributor

Something to consider in future is to use Native Menu provided by the OS. This https://github.com/usebruno/bruno/pull/1105/files#diff-06806ec8f9109775d07a5b223e78f2308d0811b7e78700305357adc7ec339a5d should give an idea on how to implement this

@iamsushantk
Copy link
Contributor Author

@helloanoop I am closing this PR and will look forward to proper implementation whenever that is planned. Thanks for your inputs.

@iamsushantk iamsushantk deleted the feature/add-divider-component branch September 17, 2024 09:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants