Submitted over 3 years ago

Responsive ecommerce product page in React and Sass

react, sass/scss

Ngoc Anh Vu-Martell•125

@anh-vumartell

A solution to the E-commerce product page challenge

Preview Code

Solution retrospective

I have a few concerns while developing this app.

How to change color of svg icon? The color of cart icon in "Add to cart"-button should be white but mine is gray.
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?
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,

Code

Please log in to post a comment

Community feedback

Matías Fuentes•50
@LeoCaprile
Posted over 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.
Natasya•330
@notanut
Posted over 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

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