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

editable menu color on mobile #207

Closed
1 task
alishaevn opened this issue Feb 21, 2024 · 1 comment · Fixed by #208
Closed
1 task

editable menu color on mobile #207

alishaevn opened this issue Feb 21, 2024 · 1 comment · Fixed by #208
Assignees

Comments

@alishaevn
Copy link
Member

alishaevn commented Feb 21, 2024

story

on the mobile view of the webstore, the menu button (3 lines) is always set to black. this should be editable so that apps with a dark colored header don't interfere with being able to see the menu button. (we're already able to change the color of the header links. we may be able to extend that color to the menu button as well).

acceptance criteria

  • the mobile menu color is editable per application

demo

Screenshot 2024-02-21 at 12 13 19 PM
@alishaevn alishaevn self-assigned this Feb 22, 2024
@alishaevn
Copy link
Member Author

the menu button on mobile uses a background-image property, so it can't be changed by simply updating the color style.

alishaevn added a commit that referenced this issue Feb 27, 2024
this move was done in preparation for allowing the toggle icon rendered
by the "navbar-toggler" class to be styled with the same colors as the
rest of the navbar. the colors exist in a "module.scss" file so that they
can be imported into our ".scss" AND ".jsx" files.

I also updated the colors from greyscale to match those in the webstore
template. greyscale was chosen initially as not to spend too much time
picking a color palette and distracting from component creation. using
color now allows us to see some of the slight color variances better.

- ref: #207
alishaevn added a commit that referenced this issue Feb 27, 2024
by default, the background image rendered by the "navbar-toggler-icon"
class is a dark colored hamburger menu icon. since it uses an image, it
was incapable of being dynamically styled with css alone. this commit
replaces the "navbar-toggler-icon" class inside "navbar-toggler" with an
editable svg, allowing us to change the color.

- ref: #207
@alishaevn alishaevn linked a pull request Feb 27, 2024 that will close this issue
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 a pull request may close this issue.

1 participant