Skip to content

[UI] Add basic themes support #1265

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 3 commits into from
May 7, 2022
Merged

[UI] Add basic themes support #1265

merged 3 commits into from
May 7, 2022

Conversation

arielj
Copy link
Collaborator

@arielj arielj commented May 1, 2022

This PR adds basic themes support with a few hardcoded themes.

themes2.mp4

I removed a few css variables there were not being used, I didn't do a refactor on the variables (it could be nice to improve how we use the variables but it was not really needed for this PR)


Use the following Checklist if you have changed something on the Backend or Frontend:

  • Tested the feature and it's working on a current and clean install.
  • Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
  • Created / Updated Tests (If necessary)
  • Created / Updated documentation (If necessary)

.Dialog__element::backdrop {
/* var() doesn't work here */
background: rgba(13, 15, 28, 0.8);
box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

since modal backdrop can't use css variables, this is a workaround using a box-shadow that covers the whole screen

@flavioislima flavioislima changed the title Add basic themes support [UI] Add basic themes support May 2, 2022
@flavioislima
Copy link
Member

Tested here and looks pretty great 💯
The only thing is that we need to check with Billie if the colors on the game page (install, settings, etc) are ok.
I think there is one mistake on our current theme that we are using the same colors for Import and Install, I asked her to fix that.
And for the new themes, the hover colors I believe are not 100% ok as well. But lets wait until she updates the design in Figma :)

@arielj arielj added the pr:ready-for-review Feature-complete, ready for the grind! :P label May 7, 2022
@arielj
Copy link
Collaborator Author

arielj commented May 7, 2022

This is ready for review, I updated the themes based on figma (though the design don't completely match so things can be a bit off since I had to do some guessing). I also added classic versions of all with the variant on the sidebar links color since I know it's a somewhat controversial topic.

@flavioislima
Copy link
Member

Tested it and looks fine. If we need to update something we can do it later.

@flavioislima flavioislima merged commit f478e36 into main May 7, 2022
@flavioislima flavioislima deleted the feature/themes branch May 7, 2022 17:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr:ready-for-review Feature-complete, ready for the grind! :P
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants