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: dark mode for navbar and general layout background #159

Merged
merged 13 commits into from
Sep 29, 2023

Conversation

patricio0312rev
Copy link
Contributor

@patricio0312rev patricio0312rev commented Sep 28, 2023

[general] Dark Mode: navbar & general layout background

Summary

  • General layout background styles have been updated to support dark mode.
  • Same thing for Navbar component and its children components. (Send/Receive sidebars are still missing, since they are not part of this component).
  • Button styles for primary, secondary and danger buttons/button-with-icons have been updated. Icon buttons still need work, since it has many variations/implementations. I ended up just updating the ones that we use for the navbar and menus.

NOTE: A switch has been added to Settings menu just for testing purposes. This should be removed before merging and implement the design/config properly once it is designed.

image

Steps to reproduce

  1. Run the app in test_e2e or test mode.
  2. Connect your wallet and go to Settings page.
  3. Turn Dark mode toggle on and see the magic ✨

Checklist

  • I checked my UI changes against the design and there are no notable differences
  • I checked my UI changes for any responsiveness issues
  • I checked my (code) changes for obvious issues, debug statements and commented code
  • I opened a corresponding card on Clickup for any remaining TODOs in my code
  • I added a short description on how to test this PR (if necessary)
  • I added a storybook entry for the component that was added (if necessary)
  • Documentation (if necessary)
  • Tests (if necessary)
  • Ready to be merged

@patricio0312rev
Copy link
Contributor Author

I have some doubts/notes about this ticket:

  • There are a lot of icon buttons, so even if I updated the _buttons.css file, some of them were missing (for example: Like buttons). This is the reason why I'm not marking buttons as done.
image
  • The close button for mobile menu looks different in the icon section and in its implementation on design:
    • Icon section:
image
  • Mobile menu implementation:
image

I am using the icon section styles, but let me know if you want it as its implementation.

  • The Dark mode toggle I implemented on the settings page should be removed before merging this PR, since it is just for testing purposes.

@patricio0312rev patricio0312rev marked this pull request as ready for review September 28, 2023 14:27
@patricio0312rev patricio0312rev mentioned this pull request Sep 28, 2023
9 tasks
@ItsANameToo ItsANameToo added this to the 0.7.0 milestone Sep 28, 2023
@ItsANameToo ItsANameToo merged commit a47f943 into develop Sep 29, 2023
16 checks passed
@ItsANameToo ItsANameToo deleted the feat/dark-mode branch September 29, 2023 10:02
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