Skip to content
Submitted almost 3 years ago

Responsive ecommerce product page in React and Sass

Ngoc Anh Vu-Martell•125
@anh-vumartell
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I have a few concerns while developing this app.

  1. How to change color of svg icon? The color of cart icon in "Add to cart"-button should be white but mine is gray.
  2. On hovering thumbnails, the border appears a weird way. A black border quickly appears before the real border color. This also happens on hovering user avatar icon. Any comments on this behavior?
  3. I haven't really find out how to pass data from my imgSlide-context to the <Modal/> component. For now the current image in modal is default the first image in image array (dataImg.jsx). Any suggestions on how to implement this final feature of my app. Thank you for your time. Cheers,

Community feedback

  • Matías Fuentes•50
    @LeoCaprilePosted almost 3 years ago

    Hi! I loved the popup notifications, I help you with your concern about change color to a svg, in css you hace a property called "fill" this one can change the color of a svg.

    1
    Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted almost 3 years ago

    @LeoCaprile thank you for helping out. I also find another workaround for this issue. I used CSS filter property and a bunch of filter values to get the expected white color on the cart icon. If you're interested you can check it out. I wrote a reflection note in README.md under the section "What I learned" and attached a couple of useful links and references.

    0
  • Natasya•330
    @notanutPosted almost 3 years ago

    hello, I'd help you with your 2nd concern. you can make the outline none:

    .modal-lightbox .thumbnails .thumbnail-img {
    outline: none;
}

    this applies to the :hover class too, make the outline none. instead, just play with the border property

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord