Interactive Rating Component

Hi @ashkan-zs 👋

Great job on your solution!

The rating component works pretty good.

Here are some recommendations for you:

• There is a better approach to change the width of the component based on the screen's width. Instead of using a media query, I suggest using width and max-width properties together. You can usemax-width to prevent the component from streching too much. See the example below.

.Card_card__7Eml9 {
  width: 90%; 
  max-width: 420px; /*This will prevent from streching out more than 420px*/
}

• I also suggest using transitions in your buttons to add a smooth transition while the background-color and the color change. Check out the MDN Web Docs to see how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

.Ratings_rate-btn__bqd2Z {
  transition: background-color .2s, color .2s;
}
.RateForm_card__btn__wHc2p {
  transition: background-color .2s, color .2s;
}

In summary I suggest adding this code:

.Card_card__7Eml9 {
  width: 90%;
  max-width: 420px;
}
.Ratings_rate-btn__bqd2Z {
  transition: background-color .2s, color .2s;
}
.RateForm_card__btn__wHc2p {
  transition: background-color .2s, color .2s;
}

And removing this:

.Card_card__7Eml9 {
  width: 30%;
}
@media (max-width: 768px) {
  .Card_card__7Eml9 {
    width: 90%;
  }
}

I hope this helps a little.

Well done for the rest.