Changed star formatting

394-w25 · Jan 14, 2025 · 4fc1970 · 4fc1970
1 parent e1585d1
commit 4fc1970
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/src/components/Post/Post.css b/src/components/Post/Post.css
@@ -78,7 +78,7 @@
     gap: 8px;
   }
 
-  .public-rating-section {
+  .public-rating-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -90,13 +90,23 @@
     font-size: 0.9rem;
   }
 
-  .public-star-icons {
-    display: flex;
-    gap: 4px;
+  .big-star-wrapper {
+    position: relative;
+    display: inline-block;
   }
 
-  .star-icon-public {
+  .big-star-icon {
     color: #6C3BB6 !important;
+    font-size: 75px !important;
+  }
+
+  .big-star-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-weight: bold;
   }
 
   .chip-third {
@@ -108,12 +118,10 @@
     background-color: #92AAFF !important;
     color: #000 !important;
   }
-
   .chip-course-physics {
     background-color: #ED92FF !important;
     color: #000 !important;
   }
-
   .chip-course-gen_eng {
     background-color: #FF9294 !important;
     color: #000 !important;
@@ -123,17 +131,14 @@
     background-color: #B4FF92 !important;
     color: #000 !important;
   }
-
   .chip-quarter-fall {
     background-color: #E5AEFF !important;
     color: #000 !important;
   }
-
   .chip-quarter-winter {
     background-color: #ADBFFF !important;
     color: #000 !important;
   }
-
   .chip-quarter-summer {
     background-color: #FFC192 !important;
     color: #000 !important;

diff --git a/src/components/Post/Post.jsx b/src/components/Post/Post.jsx
@@ -48,18 +48,6 @@ function Post({ post, friends }) {
     return starsArray;
   };
 
-  const renderPublicStars = (rating) => {
-    const filledStars = Math.floor(rating);
-    const starsArray = [];
-    for (let i = 0; i < filledStars; i++) {
-      starsArray.push(<StarIcon key={`p-filled-${i}`} className="star-icon-public" />);
-    }
-    for (let j = filledStars; j < 5; j++) {
-      starsArray.push(<StarBorderIcon key={`p-empty-${j}`} className="star-icon-public" />);
-    }
-    return starsArray;
-  };
-
   return (
     <Card className="post-card">
       <CardContent>
@@ -104,12 +92,15 @@ function Post({ post, friends }) {
             </div>
           </div>
 
-          <div className="public-rating-section">
+          <div className="public-rating-container">
             <Typography variant="body2" className="public-rating-label">
               {(post.publicRatingCount ?? 1100).toLocaleString()} ratings
             </Typography>
-            <div className="public-star-icons">
-              {renderPublicStars(post.publicRating ?? 3.5)}
+            <div className="big-star-wrapper">
+              <StarIcon className="big-star-icon" />
+              <div className="big-star-text">
+                {post.publicRating ?? 3.5}
+              </div>
             </div>
           </div>
         </div>