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

Make Onboarding Compatible With All Themes (#3604) #4196

Closed
wants to merge 3 commits into from
Closed

Make Onboarding Compatible With All Themes (#3604) #4196

wants to merge 3 commits into from

Conversation

sgbj
Copy link
Contributor

@sgbj sgbj commented Oct 2, 2019

What type of PR is this? (check all applicable)

  • Refactor
  • Bug Fix
  • Feature
  • Documentation Update

Description

Updated the styles in app/assets/stylesheets/preact/onboarding-modal.scss to support all themes. I tried to keep all of the default colors intact, so if the default theme is selected, it looks pretty much the same as it used to.

A couple of things I ran into:

  • The input[type='checkbox']:checked background used to be set to --theme-top-bar-write-background, but the minimal light theme uses white for that variable, so I changed it to use --theme-anchor-color instead.
  • The /assets/mobile-onboarding-background.png background image for the mobile view has a slightly transparent white background on it, which makes it difficult to read white text even when the background is dark (see the dark mobile theme screenshot below), so I've set the text color for that part to use $black for mobile regardless of theme.

Related Tickets & Documents

#3604 - Make Onboarding Compatible With All Themes

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Default theme desktop screenshot of onboarding page
Default theme mobile screenshot of onboarding page
Dark theme desktop screenshot of onboarding page
Dark theme desktop screenshot of onboarding page
Minimal light theme desktop screenshot of onboarding page
Minimal light theme desktop screenshot of onboarding page
Pink theme desktop screenshot of onboarding page
Pink theme desktop screenshot of onboarding page

Added to documentation?

  • docs.dev.to
  • readme
  • no documentation needed

@pr-triage pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Oct 2, 2019
@CLAassistant
Copy link

CLAassistant commented Oct 2, 2019

CLA assistant check
Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ sgbj
❌ batary


batary seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@sgbj
Copy link
Contributor Author

sgbj commented Oct 2, 2019

I must've committed changes on a computer that didn't have git set up properly so I'm going to close and recreate this PR so the CLA works properly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: unreviewed bot applied label for PR's with no review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants