From acae8a6a1536a856eae4f7f96525edd1ac5111a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriana=20Ceri=C4=87?=
 <62163307+AdrianaCeric@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:04:28 -0500
Subject: [PATCH] fix: star highlighting

---
 components/Stars.tsx    |  6 ++----
 styles/Stars.module.css | 10 +++++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/Stars.tsx b/components/Stars.tsx
index 0d20f7f..0b35edb 100644
--- a/components/Stars.tsx
+++ b/components/Stars.tsx
@@ -9,17 +9,15 @@ export type StarsProps = {
 }
 
 const Star = ({ index, selected }: { index?: string; selected?: boolean }) => {
-  const fill = selected ? 'rgba(255, 214, 0, 0.8)' : 'rgba(30, 30, 30, 0.3)'
-
   return (
     <svg
       aria-label={index ? `${Number(index) + 1} stars` : ''}
-      className={starStyles.star}
+      className={`${starStyles.star} ${selected ? starStyles.selected : ''}`}
       height="55"
       width="54"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M27,2.5 43,52.5 1,21.5H53.5L11,52.5" fill={fill} />
+      <path d="M27,2.5 43,52.5 1,21.5H53.5L11,52.5" fill="currentColor" />
     </svg>
   )
 }
diff --git a/styles/Stars.module.css b/styles/Stars.module.css
index 63ceb6c..7231551 100644
--- a/styles/Stars.module.css
+++ b/styles/Stars.module.css
@@ -7,11 +7,15 @@
   width: 45px;
   overflow: unset;
   margin-right: 15px;
+  color: gray;
 }
-.star:hover path {
+.star:hover {
   cursor: pointer;
-  fill: #ffd600;
-  opacity: 0.8;
+  color: #a98d00;
+}
+
+.selected {
+  color: #ddb802;
 }
 
 .input:focus + label path {