fix: star highlighting

ibi-group · Nov 13, 2023 · acae8a6 · acae8a6
1 parent b4bf9b6
commit acae8a6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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 {