Skip to content

Dark mode changes for app screen #265

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

Merged
merged 11 commits into from
Mar 23, 2023

Conversation

SaurabhJamadagni
Copy link
Collaborator

Contributor checklist

  • This pull request is on a separate branch and not the main branch
  • I have updated the CHANGELOG with a description of my changes for the upcoming release (if necessary)

Description

  • This PR introduces changes to the color sets in the assets directory.
  • Had to change the GitHubCorner image as the previous one had a white corner that was extending into the text when switched to dark mode.
  • Tried using already existing color variables instead of creating new ones with the exact same color just different labels 😅

Related issue

@SaurabhJamadagni
Copy link
Collaborator Author

Hey @andrewtavis, sorry about the numerous commits. I just can't get this one merge conflict to be resolved.

image

This one conflict is causing a problem. We don't want the .light to be there. So when I take it away in my code the conflict is resolved, but adding the change again as it is needed for the dynamic dark mode it causes a conflict again. Do you know how I could fix this?

@andrewtavis
Copy link
Member

Sorry for all the changes to the main branch while you were working on things, @SaurabhJamadagni! I'm a bit unsure on the issue here. As I understand it you want to remove .light from the text color assignment, which would allow either light or dark text colors to be assigned. Why would we add it back in?

@andrewtavis andrewtavis self-requested a review March 22, 2023 19:17
@andrewtavis
Copy link
Member

andrewtavis commented Mar 22, 2023

For me I would remove the .light in the merge conflict and make it work however it needs to on your end, but I'm potentially oversimplifying things 🤔

@SaurabhJamadagni
Copy link
Collaborator Author

Why would we add it back in?

Because if I don't add it back in, it is throwing a merge conflict. I am trying rebasing the branches. Don't know what is going on 😅

@andrewtavis
Copy link
Member

Did that work, @SaurabhJamadagni?

@andrewtavis
Copy link
Member

All I did was go into the merge conflict UI and remove the original line and the conflict indicators. Sorry if that was an oversimplification though :)

@SaurabhJamadagni
Copy link
Collaborator Author

Did that work

I think it did @andrewtavis. Let me know if there are any problems. Currently, it seems like all my changes have gone through 😵‍💫

@andrewtavis
Copy link
Member

Will bring the changes in to see if it's all working 😊 Thanks, @SaurabhJamadagni!

@SaurabhJamadagni
Copy link
Collaborator Author

All I did was go into the merge conflict UI and remove the original line and the conflict indicators. Sorry if that was an oversimplification though :)

No worries. I think in an attempt to solve it myself, I think I was making conflicting changes myself as well. Seems like its fixed though. Sorry about the bombarding commit messages.

@andrewtavis
Copy link
Member

No stress! 😎 Will check this now 🙃

@andrewtavis
Copy link
Member

andrewtavis commented Mar 22, 2023

Looks great, @SaurabhJamadagni! Dark mode! 🌔

Minor questions/comments:

  • It doesn't look like we're switching the color of the arrows and other icons in the keyboard installation steps? Same for the link text, which should probably be made into a variable?
  • If memory serves me, switching the icons in the top right is likely a bit annoying/impossible as the colors are hard coded in PNGs... Do you want to remove them all for now and just put the Go to Settings button from the designs in the top right of the keyboard install flow?
    • Adding back in the icon for the Privacy Policy can just be a part of the work for GSoC :)

Things I'll do after (no stress on this!):

  • I think the text on the orange button should be medium and only the first letter should be capitalized.

Thanks for all the work on this, @SaurabhJamadagni!!

@andrewtavis andrewtavis mentioned this pull request Mar 22, 2023
2 tasks
@SaurabhJamadagni
Copy link
Collaborator Author

It doesn't look like we're switching the color of the arrows and other icons in the keyboard installation steps? Same for the link text, which should probably be made into a variable?

Yes @andrewtavis. The problem with those is that they are images. Thus they don't have any color variable associated with them that can be dynamic. The link colors or symbols like the globe could be changed though with some workaround.

I was also thinking the same. This was more of a temporary solution as I planned to add more image variations that switch on dark mode when we build the full fledged menu. What do you think? We could do the button like in the design file, but currently the entire section itself is like a giant button that takes us to the Settings. So I thought it would be redundant.

@andrewtavis
Copy link
Member

I’d say we do need something that indicates that clicking that area of the screen will go to settings, @SaurabhJamadagni, so let’s put the button there and I could potentially switch the full area to a view and put the settings behavior on the Go to Settings button after it’s merged :) For all images just remove them as we want either non-corner icons in the case of GitHub or an inline image in the case of the privacy policy icon. The privacy policy icon can also be a good first issue after this is merged :)

@SaurabhJamadagni
Copy link
Collaborator Author

Hey @andrewtavis, could you check these changes that I pushed right now? I added alternate images for the dark mode. Apparently like color sets, we can have alternate sets for images too. Let me know if this can work instead of getting rid of it completely for now.

@andrewtavis
Copy link
Member

Thanks, @SaurabhJamadagni! Will check in a moment :)

Copy link
Member

@andrewtavis andrewtavis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks beautiful, @SaurabhJamadagni! Great work 😊

Will do those minor changes I was talking about above and then close the issue :)

Thanks for this! ☀️🌙

@andrewtavis andrewtavis merged commit 961aaec into scribe-org:main Mar 23, 2023
@SaurabhJamadagni SaurabhJamadagni deleted the 260-color-scheme branch April 18, 2023 12:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants