diff --git a/src/components/FieldReviewRating/FieldReviewRating.css b/src/components/FieldReviewRating/FieldReviewRating.css index 0161ab21..69f67eb5 100644 --- a/src/components/FieldReviewRating/FieldReviewRating.css +++ b/src/components/FieldReviewRating/FieldReviewRating.css @@ -19,12 +19,18 @@ } .label { - width: 30px; + width: 27px; cursor: pointer; } .star { fill: var(--matterColorNegative); + transition: var(--transitionStyleButton); +} + +legend { + @apply --marketplaceH3FontStyles; + color: var(--matterColorAnti); } /***** CSS Magic to Highlight Stars on Hover *****/ @@ -38,6 +44,7 @@ .rating > .label:hover > .star, .rating > .label:hover ~ .label > .star { fill: var(--marketplaceColor); + transition: var(--transitionStyleButton); } /* Darken hovered star when changing rating i.e it already is active */ diff --git a/src/translations/en.json b/src/translations/en.json index 82f3a9e4..62eb3ab5 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -444,7 +444,7 @@ "ResponsiveImage.noImage": "No image", "ReviewForm.reviewContentLabel": "Leave a review", "ReviewForm.reviewContentPlaceholder": "Descripe your experience...", - "ReviewForm.reviewContentRequired": "Review message is required", + "ReviewForm.reviewContentRequired": "You need to add a message to leave a review.", "ReviewForm.reviewRatingLabel": "Rate your experience", "ReviewForm.reviewRatingRequired": "Review message is required", "ReviewForm.reviewSubmit": "Publish review",