207 menu button color #208
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
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
for some reason after adding the custom ToggleIcon component to the Navbar, the screen size that the navbar collapses at changed. It used to collapse at <992px, but changed to <1232px. changing the `expand` prop to `md` collapses the navbar at <1008px, which is closer to the original behavior. ref: https://react-bootstrap.github.io/docs/components/navbar#responsive-behaviors
1 task
alishaevn
commented
Feb 27, 2024
| import Logo from '../Logo/Logo' | ||
|
|
||
| const Header = ({ auth, linkColor, logo, navLinks, userSession }) => { | ||
| const { src, alt } = logo | ||
|
|
||
| return ( | ||
| <Navbar bg='primary' expand='lg'> | ||
| <Navbar bg='primary' expand='md'> |
There was a problem hiding this comment.
this fixes the changed media query after changing the toggle icon.
ref: this commit for more details.
I would like to make it the same color as the icon too, but that isn't possible dynamically with scss
alishaevn
commented
Feb 27, 2024
Comment on lines
+5
to
+11
| .navbar-toggler:focus { | ||
| text-decoration: none; | ||
| outline: 0; | ||
| // overriding the below to lessen the spread radius | ||
| // I would like to make it the same color as the icon, but that isn't possible dynamically with scss | ||
| box-shadow: 0 0 0 1px; | ||
| } |
labradford
reviewed
Feb 28, 2024
@labradford updating the propTypes fixed this. great suggestion! |
for some reason, with the `w-75` class, the "Sign In" text in the Header was being shown on two lines. Not sure why, when this wasn't happening yesterday. retested with tall and wide logos to make sure they still are contained in the given area and don't distort.
labradford
approved these changes
Feb 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
story
create ability to customize the collapsed menu button color.
detailed explanation
move the default theme colors into a module.scss file
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.
use an editable svg as the navbar toggle icon
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.
adjust navbar toggle behavior
for some reason after adding the custom
ToggleIconcomponent to the Navbar,the screen size that the navbar collapses at changed. It used to collapse
at <992px, but changed to <1232px. changing the
expandprop tomdcollapses the navbar at <1008px, which is closer to the original behavior.
overriding the spread radius for ".navbar-toggler:focus"
I would like to make it the same color as the icon too, but that isn't
possible dynamically with scss
demo
Screen.Recording.2024-02-27.at.02.03.43.PM.mp4