Skip to content
Submitted over 3 years ago

React component using Grid + Flexbox + Dynamic styling

Eric•260
@EricLDev
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there,

I had some difficulties styling the "share" button when clicked, as I could'nt find any svg provided with the starter kit downloaded. Any idea ?

thanks.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Samson Sham•140
    @samsonsham

    Hello Eric 👋 Congratulations for finishing this challenge🎉 Your solution looks nice!

    When I was doing this challenge, I also noticed there was only one svg for the share button. That was the non-active state. This could mean that if we want an active state image, we have to some how massage the image by ourselves before using it.

    From the design we know the active state share icon is white in colour. I found an answer in this discussion by using filter: brightness(0) invert(1); to do the trick.

    How it works: It first change your svg to black by brightness(0) and then change it to white by invert(1).

    Hope it helps 💪

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