Refactor AverageRating component to use CSS modules for styling

PalisadoesFoundation · Jan 8, 2025 · 8370adc · 8370adc
1 parent bcfb41f
commit 8370adc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/components/EventStats/Statistics/AverageRating.tsx b/src/components/EventStats/Statistics/AverageRating.tsx
@@ -4,7 +4,7 @@ import Rating from '@mui/material/Rating';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import Typography from '@mui/material/Typography';
-
+import styles from '../../../style/app.module.css';
 // Props for the AverageRating component
 type ModalPropType = {
   data: {
@@ -33,7 +33,7 @@ type FeedbackType = {
 export const AverageRating = ({ data }: ModalPropType): JSX.Element => {
   return (
     <>
-      <Card style={{ width: '300px' }}>
+      <Card className={styles.cardContainer}>
         <Card.Body>
           <Card.Title>
             <h4>Average Review Score</h4>
@@ -50,13 +50,9 @@ export const AverageRating = ({ data }: ModalPropType): JSX.Element => {
             icon={<FavoriteIcon fontSize="inherit" />}
             size="medium"
             emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
-            sx={{
-              '& .MuiRating-iconFilled': {
-                color: '#ff6d75', // Color for filled stars
-              },
-              '& .MuiRating-iconHover': {
-                color: '#ff3d47', // Color for star on hover
-              },
+            classes={{
+              iconFilled: styles.ratingFilled,
+              iconHover: styles.ratingHover,
             }}
           />
         </Card.Body>

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -942,7 +942,17 @@ hr {
 .card {
   width: fit-content;
 }
+.cardContainer {
+  width: 300px;
+}
+
+.ratingFilled {
+  color: #ff6d75; /* Color for filled stars */
+}
 
+.ratingHover {
+  color: #ff3d47; /* Color for star on hover */
+}
 .cardHeader {
   padding: 1.25rem 1rem 1rem 1rem;
   border-bottom: 1px solid var(--bs-gray-200);