From 81e6b986910e1690b835b9a3049ffeae2db99790 Mon Sep 17 00:00:00 2001
From: AniketSinghShaktawat <ashakta@ncsu.edu>
Date: Sun, 21 Apr 2024 19:33:52 -0400
Subject: [PATCH] Fixed UI for Show Review

---
 src/pages/ViewTeamGrades/ShowReviews.tsx | 18 ++++---
 src/pages/ViewTeamGrades/grades.scss     | 65 ++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/pages/ViewTeamGrades/ShowReviews.tsx b/src/pages/ViewTeamGrades/ShowReviews.tsx
index 903f068..4680e2d 100644
--- a/src/pages/ViewTeamGrades/ShowReviews.tsx
+++ b/src/pages/ViewTeamGrades/ShowReviews.tsx
@@ -29,17 +29,19 @@ const ShowReviews: React.FC<ShowReviewsProps> = ({ data }) => {
       
       // Assuming 'reviews' array exists inside the first 'question' of the first 'round'.
       const num_of_reviews = data[r][0].reviews.length;
-      reviewElements.push(<b>Round {r+1}</b>)
+      reviewElements.push(<div className="round-heading">Round {r+1}</div>)
       for (let i = 0; i < num_of_reviews; i++) {
-        reviewElements.push(<b>Review {i+1}</b>)
+        reviewElements.push(<div className="review-heading">Review {i+1}</div>);
         for (let j = 0; j < num_of_questions; j++) {
           reviewElements.push(
-            <div key={`round-${r}-question-${j}-review-${i}`}>
-              <div>{data[r][j].questionText}</div>
-              <div>Score: {data[r][j].reviews[i].score}</div>
-              {data[r][j].reviews[i].comment && (
-                <div>Comment: {data[r][j].reviews[i].comment}</div>
-              )}
+            <div key={`round-${r}-question-${j}-review-${i}`} className="review-block">
+              <div className="question">{j+1}. {data[r][j].questionText}</div>
+              <div className="score-container">
+                <span className="score">{data[r][j].reviews[i].score}</span>
+                {data[r][j].reviews[i].comment && (
+                  <div className="comment">{data[r][j].reviews[i].comment}</div>
+                )}
+              </div>
             </div>
           );
         }
diff --git a/src/pages/ViewTeamGrades/grades.scss b/src/pages/ViewTeamGrades/grades.scss
index 7aa03bd..1038cfb 100644
--- a/src/pages/ViewTeamGrades/grades.scss
+++ b/src/pages/ViewTeamGrades/grades.scss
@@ -222,3 +222,68 @@
     margin: auto;
   }
 }
+
+.round-heading {
+  font-weight: bold;
+  margin-top: 20px;
+  font-size: 30px;
+}
+
+.review-heading {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.review-block {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 0;
+}
+
+.question {
+  font-weight: bold;
+}
+
+.score {
+  background-color: #4caf50;
+  border-radius: 50%; /* Makes it circular */
+  width: 24px; 
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: black; /* Text color */
+  margin-right: 10px; /* Space between score and comment */
+  font-weight: bold; /* Make the score text bold */
+
+}
+
+.comment {
+  flex-grow: 1; /* Ensures comment fills the rest of the container */
+  padding-top: 3px; 
+}
+
+/* Style for even-numbered review blocks */
+.review-block:nth-child(even) {
+  background-color: #d9edf7; 
+  
+}
+
+/* Style for odd-numbered review blocks */
+.review-block:nth-child(odd) {
+  background-color: #fcf8e3; 
+
+}
+
+.score-container {
+  display: flex;
+  align-items: center; 
+  margin-top: 5px;
+  padding-top: 10px; 
+
+}
+
+
+.review-container {
+  margin-bottom: 200px; 
+}