React component using Grid + Flexbox + Dynamic styling

Community feedback

• 

  Samson Sham•140

  @samsonshamPosted over 2 years ago

  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 💪

  1

  ---

  

  Eric•260

  @EricLDevPosted over 2 years ago

  @samsonsham Hello Samson,

  thank you for your reply and for taking the time to review my challenge.

  I indeed tried to add the filter invert(1) but didn't get the expected result, the arrow turned brown-ish and the bg remained the same. I'll try your solution with the brightness(0) in addition to invert(1).

  Thanks again! Happy coding!

  0

  

  Samson Sham•140

  @samsonshamPosted over 2 years ago

  @EricL81 I tried in chrome debugger and it should be fine. You may take a look 😉

  • screen1 Change Button Background Colour
  • screen2 Add Filter to the arrow

  0