style: enhance AverageRating component with custom styles and CSS var…

…iables (#3213)
PalisadoesFoundation · Jan 9, 2025 · 024f421 · 024f421
1 parent 3314e4e
commit 024f421
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 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
@@ -48,7 +48,8 @@
   --subtle-blue-grey-hover: #5f7e91;
   --white: #fff;
   --black: black;
-
+  --rating-star-filled: #ff6d75;
+  --rating-star-hover: #ff3d47;
   /* Background and Border */
   --table-bg: #eaebef;
   --tablerow-bg: #eff1f7;
@@ -942,7 +943,17 @@ hr {
 .card {
   width: fit-content;
 }
+.cardContainer {
+  width: 300px;
+}
 
+.ratingFilled {
+  color: var(--rating-star-filled); /* Color for filled stars */
+}
+
+.ratingHover {
+  color: var(--rating-star-hover); /* Color for star on hover */
+}
 .cardHeader {
   padding: 1.25rem 1rem 1rem 1rem;
   border-bottom: 1px solid var(--bs-gray-200);