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.

Sign up for GitHub

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

Jump to bottom

Initial draft of dark mode for feedback #360

Merged
merged 24 commits into from
Dec 27, 2021
Merged

Initial draft of dark mode for feedback #360

merged 24 commits into from
Dec 27, 2021

Conversation

secondl1ght
Copy link
Contributor

I started working on implementing dark mode, it is chosen based on the users system settings as suggested in #305. I have only done the welcome onboarding views so far to get some initial feedback before proceeding to work on more pages. Please let me know what you think. Here are some screenshots:

image

image

image

image

image

@secondl1ght secondl1ght mentioned this pull request Nov 5, 2021
Closed
@secondl1ght secondl1ght marked this pull request as ready for review November 8, 2021 15:07
@MoritzKa
Copy link
Contributor

MoritzKa commented Nov 9, 2021

Looks actually quite good. How does it turn out if we have a more sophisticated design in the extension as suggested here Maybe we should wait for that first?

@secondl1ght
Copy link
Contributor Author

I'll just wait for more feedback before proceeding with converting the rest of the extension to dark mode.

@bumi
Copy link
Collaborator

bumi commented Nov 14, 2021

maybe you can show it to @johnsBeharry or @GBKS to hear what they think?

@GBKS
Copy link
Contributor

GBKS commented Nov 14, 2021

Looks really good, a small thing might the body text color being too low contrast. If you want to, the Bitcoin UI Kit has color palettes for dark and light modes laid out here: https://www.bitcoinuikit.com/foundation .

@secondl1ght
Copy link
Contributor Author

@GBKS perfect thanks i'll check that out, and it seems like people generally like this so I think i'll go ahead and code up the rest of the extension and then post here when it is ready to be reviewed and merged.

@secondl1ght
Copy link
Contributor Author

secondl1ght commented Nov 14, 2021 •
edited
Loading

Ok I have converted the rest of the extension to dark mode! 😎

I will attach some screenshots here but the best way to see all of the screens would be to just load the unpacked version of my fork and play around a bit. It is possible that I may have missed some screens because I am not sure if I went through all the possible user-flows, so if someone could double-check for me and let me know if I missed anything that would be great.

After review and feedback I think this is ready to be merged as long as everyone likes it.

image

image

image

image

image

image

image

@secondl1ght secondl1ght force-pushed the dark-mode-welcome-onboard branch from e88b5ed to 4fdeb88 Compare November 15, 2021 01:16
@secondl1ght
Copy link
Contributor Author

Note: I should probably create a dark mode for https://getalby.com/demo as well because it is very bright when you leave the dark mode Alby and go there. Just not sure where the repo for that is.

@MoritzKa
Copy link
Contributor

That's great work! I think the color of the demo website is fine. We can think about enhancing the demo a bit. Today a visitor can press a pay button. What could we give a user back?

Regarding the dark mode of the extension. If there are builds available I am happy to test and review it.

@secondl1ght
Copy link
Contributor Author

@MoritzKa here is a build you can use to try it out
chrome.zip

@bumi
Copy link
Collaborator

bumi commented Nov 15, 2021

@secondl1ght can you check the merge conflict here?

@secondl1ght
Copy link
Contributor Author

secondl1ght commented Nov 15, 2021 •
edited
Loading

@bumi yes please use the edits from my PR so it should look like this:

<!DOCTYPE html>
<html lang="en" class="antialiased dark:bg-gray-900">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alby</title>
</head>

<body class="dark:bg-gray-900">
  <div id="prompt-root"></div>
</body>

</html>

@bumi
Copy link
Collaborator

bumi commented Nov 15, 2021 •
edited
Loading

you can also download the builds from the build artifacts, for example:
https://github.com/getAlby/lightning-browser-extension/actions/runs/1463580337

image

@secondl1ght
Copy link
Contributor Author

I am creating a post here to track the feedback I have received so far, please let me know if I have missed anything. I will work on making these changes soon:

@dylancom

  • input fields should be lighter grey instead of white
  • top navbar and other borders should stand out less and blend in more like shadows

@MoritzKa

  • some icons on the dropdown menu are black and some are grey, switch all to grey so it looks better
  • same comment as dylan for white areas, needs to be grey for less contrast
  • not dark mode specific but also suggested a border and rounded edges for the send screen amount box

@secondl1ght secondl1ght force-pushed the dark-mode-welcome-onboard branch from af272de to 3e323e9 Compare November 18, 2021 04:35
@secondl1ght
Copy link
Contributor Author

Ok I think I have made most of the changes based on the feedback, the one exception is moritz comments about some of the black icons. Some of these are images so do not get their styling from the Tailwinds classes, so these will be a bit trickier to style based on the dark theme. I'm open to any ideas though.

@secondl1ght
Copy link
Contributor Author

secondl1ght commented Nov 22, 2021 •
edited
Loading

Edit: I have resolved the conflicts.

Edit: Dylan has updated the icons to be uniform Bitcoin Design and they are now SVGs which can receive Tailwind class styling. So once #412 gets merged I can add dark mode to them and that should be everything for this initial dark mode.

@secondl1ght secondl1ght mentioned this pull request Nov 23, 2021
Merged
@johnsBeharry johnsBeharry added design frontend All things frontend development related labels Nov 26, 2021
@secondl1ght
Copy link
Contributor Author

I have resolved all the conflicts and also made all the dropdown icons the same color now that they are SVGs.

@secondl1ght
Copy link
Contributor Author

Once this gets merged if anyone has any comments after they play around with all of the screens I can still make changes going forward.

@dylancom dylancom linked an issue Dec 1, 2021 that may be closed by this pull request
Dark mode #305
Closed
@secondl1ght
Copy link
Contributor Author

Ok I have resolved the conflicts again on this, after it gets merged I will play around with the app more and make any dark mode adjustments that need to be made with smaller PR's for this.

@secondl1ght
Copy link
Contributor Author

Lots more conflicts LOL.. XD. Ok I'll go through these and resolve them and do a final review and then we should be able to merge.

@secondl1ght
Copy link
Contributor Author

Ok I resolved the conflicts but it looks like the new onboarding broke lots of the dark mode I had setup. So I'll have to go back and make changes to make it look right again.

@secondl1ght
Copy link
Contributor Author

Ok @bumi @MoritzKa @dylancom I have made the updates so dark mode is working again with the new onboarding screen. I think this is ready for the final review. I did a pretty in-depth review to make sure all the screens look good but one more look would be good. Thanks!

Some updates screenshots:

image

image

image

image

image

image

image

image

@bumi bumi merged commit 98a7190 into getAlby:master Dec 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
frontend All things frontend development related
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Dark mode
5 participants
@secondl1ght @MoritzKa @bumi @GBKS @johnsBeharry